转自: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 onMouseOver (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='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='600px;cursor:pointer;'>"; for(var j=0;j<data.regeocode.pois.length;j++){ var color = j % 2 === 0 ? '#fff' : '#eee'; poiinfo += "<tr onmouseover='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> |