<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>map4</title>
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微軟雅黑";
}
#allmap {
width: 700px;
height: 600px;
}
</style>
</head>
<body>
<div id="allmap"></div>
<p></p>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=trLEKMVBCc6MKGemHlUXdyy2&s=1"></script>
<script>
var info = document.querySelector("p");
// 百度地圖API功能
var x = "";
var y = "";
var map = new BMap.Map("allmap");
var point = new BMap.Point(104.044573, 30.601292); //默認坐標
map.centerAndZoom(point, 17); //默認地圖縮放大小
var marker = new BMap.Marker(point); // 創(chuàng)建標注
map.addOverlay(marker); // 將標注添加到地圖中
map.enableScrollWheelZoom(true); //縮放地圖
map.addEventListener("click", showInfo);
function showInfo(e) {
x = e.point.lng; //獲取鼠標當前點擊的經(jīng)緯度
y = e.point.lat;
if (x != "" && y != "") {
clearAll(); //清除地圖上存在的標注
var point = new BMap.Point(x, y);
map.centerAndZoom(point);
marker = new BMap.Marker(point); // 創(chuàng)建新的標注
map.addOverlay(marker); //將標注添加到地圖上
} else {
map.centerAndZoom("成都", 12);
}
var point = new BMap.Point(x, y); //獲取當前地理名稱
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
console.log(rs, "當前點擊位置信息")
info.innerText = rs.address;
});
}
function clearAll(e) {
map.removeOverlay(marker);
}
</script>
</body>
</html>
地圖.png
