代码如下,先复制代码跑一跑
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<script type='text/javascript' src='http://api.map.baidu.com/api?v=2.0&ak=你的ak'></script>
<title>百度地图label显示隐藏</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//创建地图
var map = new BMap.Map('allmap');
map.centerAndZoom(new BMap.Point(121.4, 31.2), 11); // 设置中心点
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true); //鼠标滑轮滚动改变地图显示大小
var point = [{
local: {
lng: 121.404,
lat: 31.225
},
name: 'lat225'
},
{
local: {
lng: 121.404,
lat: 31.215
},
name: 'lat215'
},
{
local: {
lng: 121.395,
lat: 31.235
},
name: 'lat235'
},
];
for (var i = 0; i < point.length; i++) {
createLabel(point[i].local, point[i].name);
}
// 创建label标签
function createLabel(cityCenter, cityName) {
var label = new BMap.Label(cityName, {
offset: new BMap.Size(-20, -10),
position: cityCenter
});
label.setStyle({
border: 'red',
background: 'red',
'font-size': '0.25rem',
color: '#fff',
});
map.addOverlay(label);
}
// 监听鼠标滑轮滚动
//因为鼠标左右键也可以放大缩小地图,所以这个方法弃用了
/* var mouseScroll = function (e) {
e = e || window.event;
if (map.getZoom() >= 8 && e.deltaY < 0) {
showLabel()
return
}
if (map.getZoom() < 11 && e.deltaY > 0) {
hideLabel()
return
}
}
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', mouseScroll, false);
}
window.onmousewheel = document.onmousewheel = mouseScroll;//浏览器兼容
*/
//监听zoom改变完成回调
map.addEventListener("zoomend", function (evt) {
console.log(map.getZoom())
if (map.getZoom() < 10) {
hideLabel()
} else {
showLabel()
}
});
//label显示
function showLabel() {
var markers = map.getOverlays();
console.log(markers)
for (var i = 0; i < markers.length; i++) {
if (markers[i].toString() == "[object Label]") {
markers[i].show();
}
}
}
//label隐藏
function hideLabel() {
var markers = map.getOverlays();
for (var i = 0; i < markers.length; i++) {
if (markers[i].toString() == "[object Label]") {
markers[i].hide();
}
}
}
</script>