<!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); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.enableScrollWheelZoom(true); //缩放地图
map.addEventListener("click", showInfo);
function showInfo(e) {
x = e.point.lng; //获取鼠标当前点击的经纬度
y = e.point.lat;
if (x != "" && y != "") {
clearAll(); //清除地图上存在的标注
var point = new BMap.Point(x, y);
map.centerAndZoom(point);
marker = new BMap.Marker(point); // 创建新的标注
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
网友评论