项目场景:
在vue项目中使用leaflet用做一个组件,做一些初始化的操作。
问题描述
遇到一个报错是
SectionDetail.vue:29 Error: Map container is already initialized.
容器已经映射了。但是我是一个组件的怎么会已经映射呢。
原因分析:
<template>
<div id="LMap" ref="map" class="map-box" />
</template>
// 初始化
initMap() {
this,map=L.map('LMap', {...})
}
出现的位置是我已经渲染了一个map地图,但是我在点击一个图标的时候弹出一个弹窗,弹窗中也包含了这个地图的组件。
但是这个是vue组件,原理上来说这是两个不相干的map,容器时不会冲突的。
不多说,扒源码
_initContainer: function(id) {
var container = this._container = get(id);
if (!container) {
throw new Error('Map container not found.');
} else if (container._leaflet_id) {
throw new Error('Map container is already initialized.');
}
on(container, 'scroll', this._onScroll, this);
this._containerId = stamp(container);
}
可以看到检测的是一个id的值,预测存放的id就是我们LMap…,所以解决就简单了,不然这个id相同就完了。
解决方案:
initMap() {
this,map=L.map('this.$refs.map', {...})
}
这样,完美解决。