高德地圖根據經緯度轉換成地址JS程式碼demo
阿新 • • 發佈:2020-07-21
轉自: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 >
|