google Map APi学习与总结（三） .

最新推荐文章于 2022-12-07 17:04:06 发布

冰镇宝贝321

最新推荐文章于 2022-12-07 17:04:06 发布

阅读量3.6k

点赞数

分类专栏： web开发文章标签： google api function xhtml div float

本文链接：https://blog.csdn.net/bzbb321/article/details/7419914

版权

web开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

闲话不说，接着

google Map APi学习与总结（二）

但是这个查出来功能是实现了，能够查询国家，查询城市了，可是不是显示城市信息，感觉很苦恼，随后进行改编

这样就不但可以查询城市，还可以查询街道名称哦，甚至还可以显示查询的地址信息和邮政编码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>google map</title>
    <style type="text/css">
        body
        {
            font-family: Verdana, Arial, sans serif;
            font-size: 11px;
            margin: 2px;
        }
        table.directions th
        {
            background-color: #EEEEEE;
        }
        img
        {
            color: #000000;
        }
    </style>

    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAJmM4oHHk-rqX9L9qiuc-JRRO_N-AwaXOHpj4q9noXJ7oi8JM0hTY3x2vIcYDXr6J1ZdK7Cfue1OK5Q&hl=zh-CN&sensor=false"
        type="text/javascript"></script>
    <!-- 此为Google Map API 的验证码，用到自己的网站要去 http://www.google.com/apis/maps/ 审请一个 -->
    <script type="text/javascript">
    var i=1;
    var map;
    var currentOverlay = null;
    var geocoder;
    var address;
    var gdir;
    var addressMarker;
    function load() {
 //GBroswerIsCompatible()确定Api能否兼容当前浏览器
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map"));
            var point = new GLatLng(31.294035589372354,120.57870384694675);
            map.setCenter(point,14);
            //map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());        
         var customUI = map.getDefaultUI();
         //Remove MapType.G_HYBRID_MAP
        customUI.maptypes.hybrid = false;
        map.enableDoubleClickZoom();
        map.setUI(customUI);
        //维基百科
        //var myLayer = new GLayer("org.wikipedia.zh");
        //map.addOverlay(myLayer);
        ///
            var marker = new GMarker(point);
    //var catorMsg = '苏州虎丘长江路';
            //marker.openInfoWindowHtml(catorMsg);
   map.addOverlay(marker);
      geocoder = new GClientGeocoder();
   geocoder.getLocations("苏州虎丘", function (response) {
   place = response.Placemark[0];
   marker.openInfoWindowHtml(
   '<b>纬经度:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
   '<b>地址:</b>' + place.address + '<br>' +
   '<b>精准度:</b>' + place.AddressDetails.Accuracy + '<br>' +
   '<b>缩放级别为:</b>' + map.getZoom()+'<br>'+   
   '<b>国家代码:</b> ' + place.AddressDetails.Country.CountryNameCode);
   }
   )
            GEvent.addListener(map, 'click',getAddress);
        //内置搜索
        //map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
  map.addControl(new GScaleControl());//添加地图组件　地图比例尺控件
     map.addControl(new GOverviewMapControl(new GSize(200, 200))); //添加地图组件　一个可折叠的鹰眼地图，在地图的角落
        }
    }
    function removeCurrentOverlay() {
        map.removeOverlay(currentOverlay);
    }

  function getAddress(overlay, latlng) {
      if (latlng != null) {
        address = latlng;
        geocoder.getLocations(latlng, showAddress);
      }
    }

    function showAddress(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("HTTP状态代码:" + response.Status.code);
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
  
        map.addOverlay(marker);
        marker.openInfoWindowHtml(
        '<b>纬经度:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
        '<b>地址:</b>' + place.address + '<br>' +
        '<b>精准度:</b>' + place.AddressDetails.Accuracy + '<br>' +
        '<b>缩放级别为:</b>' + map.getZoom()+'<br>'+   
        '<b>国家代码:</b> ' + place.AddressDetails.Country.CountryNameCode);
      }
    }

       ///外置搜索，只能搜地址
       function showAddr(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("不能解析: " + address);
            } else {
              map.setCenter(point, 14);
            }
    geocoder.getLocations(address, showAddress);
          }
        );
      }
    }
    </script>

</head>
<body οnlοad="load()" οnunlοad="GUnload()">
 <div style="height:20px"></div>
    <div style="float: left; text-align: center; height: 550;">
        <form action="#" οnsubmit="showAddr(this.address.value); return false">
        地点名:<input type="text" name="address" value="苏州虎丘" style="width: 190px" />
        <input type="submit" value="查找" />
        </form>
    </div>
 <div style="height:50px"></div>
    <div id="map" style="width: 100%; height: 600px; border: solid 1px #999; float: left">
    </div>
</body>
</html>

下接