google Map APi学习与总结(三) .

来源:互联网 发布:淘宝爆款运营计划表 编辑:程序博客网 时间:2024/06/05 09:26

 

 

闲话不说,接着

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 onload="load()" onunload="GUnload()"> <div style="height:20px"></div>    <div style="float: left; text-align: center; height: 550;">        <form action="#" onsubmit="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>

 

 下接

google Map APi学习与总结(四)

如果转载或使用,希望标明本人地址。

 

  当然我也是问好多人的,可是大家都没给我正确答案,很困惑哦 我问了好多人啊。。。。。。。。。。。。。。