高德地图根据经纬度转换成地址JS代码demo

转自:https://www.cnblogs.com/simpledev/p/3843324.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>逆地理编码</title> <link rel="stylesheet" type="text/css" href="http://developer.amap.com/Public/css/demo.Default.css" /> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=d94035ac264f0cc5b293199360ca0e1e"></script> <script language="javascript"> var mapObj; function mapInit() {         mapObj = new AMap.Map("iCenter", {         view: new AMap.View2D({         center:new AMap.LngLat(121.428000,31.197600),//地图中心点         zoom:13 //地图显示的缩放级别         })     }); } //已知点坐标 var lnglatXY = new AMap.LngLat(121.428000,31.197600); function geocoder() {     var MGeocoder;     //加载地理编码插件     mapObj.plugin(["AMap.Geocoder"], function() {               MGeocoder = new AMap.Geocoder({             radius: 1000,             extensions: "all"         });         //返回地理编码结果         AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);         //逆地理编码         MGeocoder.getAddress(lnglatXY);     });     //加点     var marker = new AMap.Marker({         map:mapObj,         icon: new AMap.Icon({             image: "http://api.amap.com/Public/images/js/mark.png",             size:new AMap.Size(58,30),             imageOffset: new AMap.Pixel(-32, -0)         }),         position: lnglatXY,         offset: new AMap.Pixel(-5,-30)     });     mapObj.setFitView(); } //鼠标划过显示相应点 var marker; function onm ouseOver (e) {     var coor = e.split(','),         lnglat = new AMap.LngLat(coor[0], coor[1]);     if (!marker) {         marker = new AMap.Marker({             map:mapObj,             icon: "http://webapi.amap.com/images/0.png",             position: lnglat,             offset: new AMap.Pixel(-10, -34)         });     } else {         marker.setPosition(lnglat);     }     mapObj.setFitView(); } //回调函数 function geocoder_CallBack(data) {     var resultStr = "";     var roadinfo ="";     var poiinfo="";     var address;     //返回地址描述     address = data.regeocode.formattedAddress;     //返回周边道路信息     roadinfo +="<table style='width:600px'>";     for(var i=0;i<data.regeocode.roads.length;i++){         var color = (i % 2 === 0 ? '#fff' : '#eee');         roadinfo += "<tr style=' margin:0; padding:0;'><td>道路:" + data.regeocode.roads[i].name + "</td><td>方向:" + data.regeocode.roads[i].direction + "</td><td>距离:" + data.regeocode.roads[i].distance + "米</td></tr>";     }     roadinfo +="</table>"     //返回周边兴趣点信息     poiinfo += "<table style='width:600px;cursor:pointer;'>";     for(var j=0;j<data.regeocode.pois.length;j++){         var color = j % 2 === 0 ? '#fff' : '#eee';         poiinfo += "<tr onm ouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style=' margin:0; padding:0;'><td>兴趣点:" + data.regeocode.pois[j].name + "</td><td>类型:" + data.regeocode.pois[j].type + "</td><td>距离:" + data.regeocode.pois[j].distance + "米</td></tr>";     }     poiinfo += "</table>";     //返回结果拼接输出     resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">"+"<b>地址</b>:"+ address + "<hr/><b>周边道路信息</b>:<br/>" + roadinfo + "<hr/><b>周边兴趣点信息</b>:<br/>" + poiinfo +"</div>";     document.getElementById("result").innerHTML = resultStr; } </script> </head>

 

1 2 3 4 5 6 7 8 9 <body onload="mapInit();">     <div id="iCenter" ></div>     <div class="demo_box">             <input type="button" value="逆地理编码" onclick="geocoder()"/>         <div id="r_title"><b>查询结果:</b></div>         <div id="result"> </div>     </div> </body> </html>
 
上一篇:拓扑排序


下一篇:高德地图