页面效果
应用场景：你需要在一个弹窗中拾取一个高德的地址坐标。
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>
供参考，谢谢