页面效果
应用场景：你需要在一个弹窗中拾取一个高德的地址坐标。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>酸奶小妹的火星坐标</title> 6 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=YOUKEY"></script> 7 <style> 8 #iMap { 9 height: 500px; 10 width: 600px; 11 float: left; 12 } 13 .info { 14 float: left; 15 margin: 0 0 0 10px; 16 } 17 label { 18 width: 80px; 19 float: left; 20 } 21 .detail { 22 padding: 10px; 23 border: 1px solid #aaccaa; 24 } 25 </style> 26 </head> 27 <body onload="mapInit()"> 28 <div id="iMap"></div> 29 <div class="info"> 30 <h1>坐标拾取工具（GCJ-02坐标）</h1> 31 <p>说明：</p> 32 <p>1、鼠标滚轮可以缩放地图，拖动地图。</p> 33 <p>2、点击地图，即可获得GCJ-02的经纬度坐标，即火星坐标。</p> 34 </br> 35 <div class="detail"> 36 <p> 37 <span id="lnglat"> </span> 38 </p> 39 <p> 40 <span id="iAddress"> </span> 41 </p> 42 </div> 43 </div> 44 </body> 45 <script language="javascript"> 46 var mapObj; 47 var lnglatXY; 48 //初始化地图 49 function mapInit() { 50 var opt = { 51 level: 10, //设置地图缩放级别 52 center: new AMap.LngLat(116.397428, 39.90923) //设置地图中心点 53 } 54 mapObj = new AMap.Map("iMap", opt); 55 AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件 56 } 57 function geocoder() { 58 var MGeocoder; 59 //加载地理编码插件 60 mapObj.plugin(["AMap.Geocoder"], function () { 61 MGeocoder = new AMap.Geocoder({ 62 radius: 1000, 63 extensions: "all" 64 }); 65 //返回地理编码结果 66 AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack); 67 //逆地理编码 68 MGeocoder.getAddress(lnglatXY); 69 }); 70 //加点 71 var marker = new AMap.Marker({ 72 map: mapObj, 73 icon: new AMap.Icon({ 74 image: " http://api.amap.com/Public/images/js/mark.png" , 75 size: new AMap.Size(58, 30), 76 imageOffset: new AMap.Pixel(-32, -0) 77 }), 78 position: lnglatXY, 79 offset: new AMap.Pixel(-5, -30) 80 }); 81 // mapObj.setFitView(); 82 } 83 //回调函数 84 function geocoder_CallBack(data) { 85 console.log("ddd"); 86 var address; 87 //返回地址描述 88 address = data.regeocode.formattedAddress; 89 console.log(address); 90 //返回结果拼接输出 91 document.getElementById("iAddress").innerHTML = address; 92 } 93 //鼠标点击，获取经纬度坐标 94 function getLnglat(e) { 95 mapObj.clearMap(); 96 var x = e.lnglat.getLng(); 97 var y = e.lnglat.getLat(); 98 document.getElementById("lnglat").innerHTML = x + "," + y; 99 lnglatXY = new AMap.LngLat(x, y); 100 geocoder(); 101 } 102 </script> 103 </html>
供参考，谢谢