google地图编程

最新推荐文章于 2024-05-27 10:10:05 发布

wonderful_ha

最新推荐文章于 2024-05-27 10:10:05 发布

阅读量2.8k

点赞数

分类专栏： Web编程文章标签： google function sqlserver 数据库 xhtml input

本文链接：https://blog.csdn.net/adobeadge/article/details/6596098

版权

Web编程专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1，本例子实现了根据给出的经度，维度在google地图上做标记。

2，并且能够反应出对应的经度和维度的一些自定义信息

3，数据来源自数据库，连接的数据库为SQLServer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-

microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; 

charset=UTF-8" />
    <title>Google Maps API Example: Simple Geocoding</title>

    <script src="http://maps.google.com/maps?

file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-

jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
        type="text/javascript"></script>

    <script type="text/javascript">
   /*参考资料
        http://code.google.com/intl/zh-CN/apis/maps/articles/phpsqlajax.html 
   */
   //定义map  的全局变量
    var map = null;
    var geocoder = null;
    var objRs= new ActiveXObject("ADODB.Recordset");
    //js连接数据库
     var sSQL1  ="";
    sConn = "Provider=SQLOLEDB.1;Password=123;Persist Security Info=False;User ID=sa;Initial Catalog=admin_xm;";
    sSQL1 = "select * from ss";
   // alert(sSQL1);
    objRs.Open(sSQL1,sConn);
    alert(" HTML Link success"); 
    
    //onload  网页被加载完的时候立即发生
     window.οnlοad=function(){
            initialize();
            TagIt(0.0,0.0);
     } 

 
 
    
    function initialize() {
      if (GBrowserIsCompatible()) {
              //第一步创建一个GMap2对象
               map = new GMap2(document.getElementById("map_canvas"));
             //必须给map对象一个setCenter  map对象才能正常工作
               map.setCenter(new GLatLng(30.0, 110.1419), 10); 
             //定义在地图上要显示图标的标志的背景图案   
                 var baseIcon = new GIcon(G_DEFAULT_ICON);
                baseIcon.shadow="http://www.google.com/mapfiles/shadow50.png";
                baseIcon.iconSize = new GSize(20,34);
                baseIcon.shawdowSize = new GSize(37,34);
                baseIcon.iconAnchor = new GPoint(9,34); 
                baseIcon.infoWindowAnchor = new GPoint(9,2);
        //添加自定义图标函数
           function createMaker(point,index){
                  var gIcon = new GIcon(baseIcon);
                  gIcon.image ="file:///E:/image/tadiao.png";
                  
                  //markeOptions 定义要加载的图案，在GMarker中调用
                  markerOptions = {icon:gIcon };
                  //GMarker 定义的选项（图案） 在point点进行标记
                  //将标记对象添加到地图中后，通过标记可打开该地图的信息窗口。标记对象会触发鼠标事件和信息窗口事件。
                  var marker = new GMarker(point,markerOptions);
                  //增加监听的事件，这里增加了一个点击事件，当点击鼠标的时候触发事件   
                  var  info="宜昌";
                  GEvent.addListener(marker,"click",function(){
                                                        marker.openInfoWindowHtml(info);
                                        });
                    return marker;
            }
            //要添加图标的点
              var latlng = new GLatLng(30,110.14);
            // 将叠加层添加到地图中，并触发 addoverlay 事件。 
              map.addOverlay(createMaker(latlng)); 
            
        }  
        geocoder = new GClientGeocoder();

    }
    
     function TagIt(a,b){
     if (GBrowserIsCompatible()) {   
       
        map.addControl(new GMapTypeControl());
        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.shadow="http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20,34);
        baseIcon.shawdowSize = new GSize(37,34);
        baseIcon.iconAnchor = new GPoint(9,34);
        baseIcon.infoWindowAnchor = new GPoint(9,2);
        
        function createMaker1(point,address,index){
          
           var gIcon = new GIcon(baseIcon);
              gIcon.image ="file:///E:/image/tadiao.png";
             markerOptions = {icon:gIcon };
            var marker = new GMarker(point,markerOptions);
            var infomation;
                infomation="<b>" + point + "</b> <br/>" + address;
              //  alert(infomation);
            GEvent.addListener(marker,"click",function(){
                    marker.openInfoWindowHtml(infomation);
                    });
                    return marker;
            }
          // alert("yes");
          
          
               var latlng;
          //利用数据库中的经度和纬度进行标记
             while(!objRs.EOF){
                  latlng = new GLatLng(objRs(2),objRs(1));
                // alert(latlng);
                 map.addOverlay(createMaker1(latlng,objRs(3)));  
               objRs.MoveNext();  
              } 
  
        }
    }
    function showAddress(address) {
      if (geocoder)
       {
       if(address=="")
       {
          return;
       }
       
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("无法解析:" + address);
            } else {
              map.setCenter(point, 15);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
              GEvent.addListener(marker, "dragend", function() {
                marker.openInfoWindowHtml(marker.getLatLng

().toUrlValue(6));
              });
              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(marker.getLatLng

().toUrlValue(6));
              });
	      GEvent.trigger(marker, "click");
            }
          }
        );
      }
      else
      {
        var geocoder2 = new GClientGeocoder();
        geocoder2.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("无法解析:" + address);
            } else {
              map.setCenter(point, 15);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
              GEvent.addListener(marker, "dragend", function() {
                marker.openInfoWindowHtml(marker.getLatLng

().toUrlValue(6));
              });
              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(marker.getLatLng

().toUrlValue(6));
              });
	      GEvent.trigger(marker, "click");
            }
          }
        );
      }
    }
   function Parse()
   {
     showAddress(document.getElementById

("address").value.toString());
   }

    </script>

</head>
<!-- <body οnlοad="initialize()" οnunlοad="GUnload()">  -->
<body >
    <form action="#" οnsubmit="showAddress(this.address.value); 

return false">
    <p>
        地址：<input id="passAddress" type="text" style="width: 350px" name="address" value="" />
        <input id="Find" type="submit" value="定位" />
    </p>

    <div id="map_canvas" style="width: 750px; height: 550px">
    </div>
    </form>
</body>
</html>

参考链接：

http://apps.hi.baidu.com/share/detail/37300274

http://code.google.com/intl/zh-CN/apis/maps/articles/phpsqlajax.html

http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/examples/cssSkins.html

wonderful_ha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google地图编程

1，本例子实现了根据给出的经度，维度在google地图上做标记。 2，并且能够反应出对应的经度和维度的一些自定义信息 3，数据来源自数据库，连接的数据库为SQLServer<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
复制链接

扫一扫

专栏目录