百度地图实现热力图的添加、移除

最新推荐文章于 2024-09-12 19:48:44 发布

山谷里的杂货铺

最新推荐文章于 2024-09-12 19:48:44 发布

阅读量1.2k

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_58528200/article/details/126484638

版权

本文介绍了如何通过JavaScript实现在百度地图上动态添加和移除热力图，同时展示了与医院点图的叠加显示效果。首先进行地图初始化，然后详细阐述了根据用户选择切换热力图的实现过程。

摘要由CSDN通过智能技术生成

效果：

需求：实现热力图和医院点图叠加显示

 watch: {
    selectMapKeys: { // 监听选中的checkbox是否发生变化
      handler: function (val) {
        if (this.earthquakeInfo.id) {
          this.addLayers(val)
        }
      },
      deep: true
    },
    earthquakeInfo: {
      handler: function (val) { // 监听地震事件是否被切换
        this.mapKeys = val.mapKeys
        this.center = {
          lng: val.longitude,
          lat: val.latitude
        }
        this.dist = null
        this.map.clearOverlays()
        // 切换事件后，先清除影响场图层
        this.heatMapLayer = null
        this.getPlace(val.place) // 获取省市区
        this.initMap(true, val.place, true)
      },
      deep: true
    }
  },

地图初始化：

if (!this.map) {
          this.map = new BMapGL.Map('map')
          this.map.enableScrollWheelZoom(true)
        }
        this.map.centerAndZoom(new BMapG