Map container is already initialized.

项目场景：

在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', {...})
	}

这样，完美解决。