JS通过选择百度地图地址获取经纬度⾃动填充到⽂本框中的⽅
法
⾸先要注册百度地图API。
1、登录百度地图开放平台lbsyun.baidu
注册账号，完善信息，点击⽹站右上⾓的“API控制台”，点击，创建应⽤。
应⽤类型选择：“浏览器端”，应⽤服务全选，Referer⽩名单：*
点击提交。会⽣成⼀个访问应⽤（AK）。
AK码记下来，后⾯页⾯中要⽤它来引出百度地图。
2、创建html⽹页。部分代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title
<!-- 将百度地图API引⼊，设置好⾃⼰的key -->
<script type="text/javascript" src="api.map.baidu/api?v=2.0&ak=刚才创建应⽤的AK"></script>
</head>
<body>
<label >纬度：</label>
<input type="text" id="lat" value="" readonly>
<label>经度：</label>
<input type="text" id="lng" value="" readonly>
<label>地址：</label>
<input type="text" id="address" readonly>
<button type="button" id="open">
点击显⽰地图获取地址经纬度
</button>
<div id='allmap' style='width: 60%; height: 60%; position: absolute; display: none'></div>
</body>
</html>
3、JS代码
<script type="text/javascript">
if (ElementById('allmap').style.display == 'none') {
} else {
html网页边框代码
}
}
var map = new BMap.Map("allmap");
var geoc = new BMap.Geocoder();  //地址解析对象
var markersArray = [];
var geolocation = new BMap.Geolocation();
var point = new BMap.Point(116.404412, 39.914714);
if (Status() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
}
else {
alert('failed' + Status());
}
}, {enableHighAccuracy: true})
map.addEventListener("click", showInfo);
//清除标识
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
}
}
}
//地图上标注
function addMarker(point) {
var marker = new BMap.Marker(point);
markersArray.push(marker);
clearOverlays();
map.addOverlay(marker);
}
//点击地图时间处理
function showInfo(e) {
var addComp = rs.addressComponents;
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
if (confirm("确定要地址是" + address + "?")) {
}
});
addMarker(e.point);
}
</script>
效果图：
PS：需要注意⼀点的是，js代码要写在body后⾯。否则地显⽰不出来

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。