leaflet清除图层报错问题Map container is being reused by another instance

最新推荐文章于 2025-04-20 23:04:05 发布

六只羊l

最新推荐文章于 2025-04-20 23:04:05 发布

阅读量763

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45846702/article/details/135836397

版权

文章讲述了在使用Vue封装Leaflet地图组件时，如何处理在不需要地图的页面间切换时出现的Mapcontainer被其他实例重用的错误。作者提供了在组件销毁阶段设置map为null并清空子组件map的方法来解决这个问题。

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

Map container is being reused by another instance

由于自己使用vue封装了leaflet成公用组件，导致切换到别的页面（不需要leaflet）导致报错Map container is being reused by another instance；
解决方法：this.map = null;//将当前组件下的的map置空；以及引入的组件 this.$refs.ForeMap.map = null//给你自己引入的组件加一个ref获取map将它置空

 beforeDestroy() {
    if (this.map) {
      this.map.remove()
      this.map = null;//将当前的map置空
      this.$refs.ForeMap.map = null//给你自己引入的组件加一个ref获取map将它置空
    }
  },