百度地图指定覆盖物的隐藏删除操作

最新推荐文章于 2024-07-19 12:05:11 发布

原创

最新推荐文章于 2024-07-19 12:05:11 发布 · 8.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery #覆盖物 #百度地图API #原型

本文介绍了如何使用JavaScript和jQuery结合百度地图API实现复选框控制覆盖物的显示和隐藏。当复选框选中时显示对应图标，取消选中则隐藏。关键在于通过getOverlays()获取所有覆盖物并判断类型，再根据Icon的name属性进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　今天要根据代码写一个需求，是在别人已经写好代码的基础上增加一个功能，百度地图中添加了自定义的图标，要求点击左侧sidebar中的复选框时做出不同的选择，选中时显示相应WiFi图标，取消选中状态时对应的图标也相应的隐藏，查了半天的百度API，终于找到了方法。
　　
复选框控制显示的图标：

　　　　　　　　　　　　　　　　　　　　　　　　这里写图片描述

初始状态下的显示红蓝皆有：

　　　　　这里写图片描述
　　　　　
筛选之后的状态：
　
　　　　

　　网上有很多关于自定义覆盖物的博客和教程，找了半天，发现不是自己想要的，在这里，创建的覆盖物是百度API中默认的，不存在自定义的说法，只是对应的改变了显示的图标，调用百度API创建图标的代码是这样的：

 // 调用百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
    map.enableScrollWheelZoom(true);

 // 这里是关键，在Icon对象的原型中添加属性和方法，用来标记对应的图标,用这个在遍历对象的时候获取到对应的覆盖物
    BMap.Icon.prototype.name = "";
    BMap.Icon.prototype.setName = function(name){
        this.name = name;
    }