頁面集成高德api——獲取經緯度

引用鏈接

https://blog.csdn.net/qq_42445490/article/details/89155610?utm_medium=distribute.pc_relevant.none-task-blog-baidulandingword-7&spm=1001.2101.3001.4242

https://www.cnblogs.com/smfx1314/p/10124652.html

https://lbs.amap.com/

頁面最終結果

<div id="containermap" ></div>

樣式：

<style type="text/css">
#containermap{
margin:0 auto;
width:100%;
height:30%;
}
</style>

js腳本：

//初始化地圖插件
/*正向地理編碼： 將地址描述信息轉換成地理坐標（經緯度），對應為AMap.Geocoder的getLocation方法
逆向地理編碼：將地理坐標（經緯度）轉換成地址描述信息，對應為AMap.Geocoder的getAddress方法*/
window.onload = function(){
var map = new AMap.Map("containermap", {
resizeEnable: true,
zoom: 10
/* zoom: 15, //設置地圖顯示的縮放級別
center: [116.44927, 39.9584] //設置地圖中心點坐標 */
});

var geocoder = new AMap.Geocoder({
//city: "010", //城市設為北京，默認：“全國”
radius: 500 //范圍，默認：500
});

/*var infoWindow = new AMap.InfoWindow({ //創建信息窗體
isCustom: true, //使用自定義窗體
//content:'<div>信息窗體</div>', //信息窗體的內容可以是任意html片段
offset: new AMap.Pixel(16, -45)
});*/
var onMarkerClick = function(e) {
//infoWindow.open(map, e.target.getPosition());//打開信息窗體
//e.target就是被點擊的Marker
//document.getElementById('lnglat').value = e.lnglat;
$("#lnglat").val(e.lnglat);
/*
$("#address").val(e.address);*/
regeoCode();
//addressCode();

}

// 創建一個 Marker 實例：（標記點）
var marker = new AMap.Marker({
//position: new AMap.LngLat(116.44927, 39.9584), // 經緯度對象，也可以是經緯度構成的一維數組[116.39, 39.9]
//title: "位置標題"
});

function regeoCode() {
//var lnglat = document.getElementById('lnglat').value.split(',');
var lnglat = $("#lnglat").val().split(',');
geocoder.getAddress(lnglat, function(status, result) {
if (status === 'complete'&&result.regeocode) {
var address = result.regeocode.formattedAddress;
//document.getElementById('address').value = address;
$("#addressmap").val(address);
$("#longitude").val(lnglat[0]);
$("#latitude").val(lnglat[1]);
marker.setPosition(lnglat);
map.add(marker);
}else{
console.log('根據經緯度查詢地址失敗');
}
});

};

function addressCode() {
var inputaddress= $("#addressmap").val();
console.log('根據3===='+inputaddress);
geocoder.getLocation(inputaddress,function(status,result) {
console.log('根據00===='+status+"===="+result.info+"====="+result.geocodes);
if (status === 'complete'&&result.info === 'OK') {
//if (status === 'complete'&&result.geocodes) {
console.log('根據1===='+inputaddress);
// result中對應詳細地理坐標信息
var lnglat = result.geocodes[0].location;
//document.getElementById('lnglat').value = lnglat;
$("#lnglat").val(lnglat);
var lnglatc = $("#lnglat").val().split(',');
$("#longitude").val(lnglatc[0]);
$("#latitude").val(lnglatc[1]);
marker.setPosition(lnglat);
map.setZoomAndCenter(10, [lnglatc[0], lnglatc[1]]);
map.add(marker);
}else{
console.log('根據地址查詢經緯度失敗');
}
});
};

// 將創建的點標記添加到已有的地圖實例：
map.add(marker);
//marker.on('click',onMarkerClick);//綁定click事件
map.on('click',onMarkerClick);//綁定click事件

document.getElementById("regeoToaddress").onclick = regeoCode;
document.getElementById("addressToregeo").onclick = addressCode;
/* document.getElementById('lnglat').onkeydown = function(e) {
if (e.keyCode === 13) {
regeoCode();
return false;
}
return true;
};
document.getElementById('addressmap').onkeydown = function(e) {
if (e.keyCode === 13) {
addressCode();
return false;
}
return true;
};*/


}

 

結束