注
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=百度地图接口申请自己的ak"></script>
百度地图开发地址:(申请ak密钥)
https://lbsyun.baidu.com/
申请密钥里有白名单里要写,写“ * ”就可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
#bigMap {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box" style="text-align: center;background: white; padding: 10px;">
<div style="font-weight: bold;">获取到的信息</div>
<div>纬度:<input type="text" id="lat" value="" readonly></div>
<div>经度:<input type="text" id="lng" value="" readonly></div>
<div>地址 :<input type="text" id="address" readonly></div>
</div>
<div id='bigMap'></div>
</body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=百度地图接口申请自己的ak"></script>
<script>
var map = new BMap.Map("bigMap");
var geoc = new BMap.Geocoder(); //地址解析对象
var markersArray = [];
var geolocation = new BMap.Geolocation();
var point = new BMap.Point(116.404412, 39.914714);
map.centerAndZoom(point, 12); // 中心点
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
map.enableScrollWheelZoom(true);
}
else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
map.addEventListener("click", showInfo);
//清除标识
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
map.removeOverlay(markersArray[i])
}
}
}
//地图上标注
function addMarker(point) {
var marker = new BMap.Marker(point);
markersArray.push(marker);
clearOverlays();
map.addOverlay(marker);
}
//点击地图时间处理
function showInfo(e) {
document.getElementById('lng').value = e.point.lng;
document.getElementById('lat').value = e.point.lat;
geoc.getLocation(e.point, function (rs) {
var addComp = rs.addressComponents;
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
if (confirm("确定要地址是" + address + "?")) {
document.getElementById('address').value = address;
}
});
addMarker(e.point);
}
</script>