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学习与总结(四)
如果转载或使用,希望标明本人地址。
当然我也是问好多人的,可是大家都没给我正确答案,很困惑哦 我问了好多人啊。。。。。。。。。。。。。。
- google Map APi学习与总结(三) .
- google Map APi学习与总结(一)
- google Map APi学习与总结(二)
- google Map APi学习与总结(四)
- python学习笔记(三) Google map API调用
- Google Map API官方站点总结
- Google Map API 使用总结
- google map开发学习笔记(三)
- google map开发学习笔记(三)
- google map api学习笔记
- Google Map API学习记录
- Google Map for Android 官方API 学习与解析
- Google Map API使用详解(三)——Google Map基本常识(上)
- Google Map API使用详解(八)——Google Map坐标系统总结(上)
- Google Map API使用详解(九)——Google Map坐标系统总结(下)
- Google Map Android API V2使用总结
- google map api 3 学习应用笔记 (1)
- android学习之GPS(google map 相关api)注意事项
- 两分钟彻底让你明白Android中onInterceptTouchEvent与onTouchEvent(图文)!
- erlang 开发建议
- http://www.cnblogs.com/nova_zhang/archive/2010/05/13/1734344.html
- 实现机制:利用FlexEvent.IDLE空闲事件,然后用mx_internal::idleCounter来获取空闲时间。
- Servlet如何工作?
- google Map APi学习与总结(三) .
- hibernate 经验谈
- 判断一个文件是否正在被使用
- [diameter] difference between offline charging and online charging
- 长大了要为父母做的8件事
- socket编程中如何实现自动获取本机IP地址和随机获取一个没有占用的端口
- Servlet的生命周期
- Perl: 匿名函数,数组,列表的定义
- Servlet API