百度地图label标注随着鼠标滑轮滑动（随着zoom大小的变化，获取zoom)显示or隐藏

最新推荐文章于 2023-09-01 23:58:31 发布

子非池鱼

最新推荐文章于 2023-09-01 23:58:31 发布

阅读量1.1k

点赞数

分类专栏：百度地图label 文章标签： javascript html 百度

本文链接：https://blog.csdn.net/weixin_44650016/article/details/114396292

版权

百度地图label 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码如下，先复制代码跑一跑

<!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>

子非池鱼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度地图label标注随着鼠标滑轮滑动（随着zoom大小的变化，获取zoom)显示or隐藏

百度地图label随着鼠标滑动（zoom变化)事件显示、隐藏项目中遇到类似的需求，结果上网查了n多，发现大部分都不符合需求，然后东拼西凑弄出来了。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=
复制链接

扫一扫