轉自: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='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 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
>
|