高德地图 热力图 清空地图

之前正常的打点画图都使用的是map.clearMap();来清空地图

但是发现这个方法对热力图并没有效果(如果有知道的同学麻烦给我留言),

业务需求是2个数据来源的热力图在同一张地图上展示

最后使用了热力图中的setMap(null),将数据清空,然后再重新画图就可以了

if(this.heatmap != null){
        this.heatmap.setMap(null);
      }

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
Vue.js是一个流行的JavaScript框架,而高德地图是一个提供地图和位置服务的平台。要在Vue.js中使用高德地图力图,你可以按照以下步骤进行操作: 1. 在你的Vue项目中安装高德地图的JavaScript API库。你可以使用npm或yarn来安装,具体命令可以参考高德地图官方文档。 2. 创建一个Vue组件,用于显示地图力图。你可以在组件中使用高德地图提供的JavaScript API来初始化地图,并添加力图层。 3. 在组件的生命周期钩子函数中,例如`mounted`,使用高德地图API的力图相关方法来设置力图的数据和样式。 以下是一个简单的示例代码: ```vue <template> <div> <div id="map"></div> </div> </template> <script> export default { mounted() { // 初始化地图 const map = new AMap.Map('map', { zoom: 13, center: [116.39, 39.9], }); // 创建力图实例 const heatmap = new AMap.Heatmap(map, { radius: 25, // 力图点半径 }); // 设置力图数据 heatmap.setDataSet({ data: [...], // 力图数据数组 max: 100, // 力图权重最大值 }); }, }; </script> <style> #map { width: 100%; height: 400px; } </style> ``` 在这个示例中,我们在组件的`mounted`函数中初始化了一个地图实例,并创建了一个力图实例。然后,我们使用`setDataSet`方法设置了力图的数据和样式。 注意:以上只是一个简单的示例,你可能需要根据你的具体需求进行更多的配置和处理,例如根据地图的变化更新力图数据等。 希望对你有所帮助!如果还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值