Vuejs Leaflet：找不到地图容器

Question

我正在尝试在 Vue 中使用传单地图，但不断收到错误消息：

未捕获的错误：未找到地图容器。

这是我的组件的样子：

<template>
  <div id="app" class="container">
    Map
    <div class="col-md-9">
      <div id="mapid"></div>
    </div>
  </div>
</template>

<style scoped>
#mapid { 
    height: 800px;
}
</style>

<script>
import L from 'leaflet'

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: ''
}).addTo(mymap);
</script>

我还在 index.html 头部添加了 Leaflet CSS 和 JavaScript。

Answer 1

欢迎来到 SO！

当您尝试实例化您的 Leaflet Map by passing it your Element id (L.map('mapid')) 时，问题是您的 Vue 组件尚未附加到您的页面 DOM。因此，当 Leaflet 尝试查询后者以查找您的元素时，它找不到它，因此您的错误消息。

如果您尝试在 mounted 生命周期钩子中实例化，同样的情况：您的 Vue 组件实例已创建，其片段 HTML 结构已构建，但仍未附加到页面 DOM。

但是，您可以直接传递您的 Element，而不是传递您的 Element id。请注意，您仍然需要在 mounted 挂钩中执行此操作，以确保您的组件实例确实具有构建的 HTML 结构。

L.map(<HTMLElement> el, <Map options> options?)

在给定<div> HTML 元素实例和可选的带有Map options 的对象文字的情况下实例化地图对象。

然后要获取您的元素，只需利用 Vue $refs 实例属性和 ref 特殊属性，如 Vue 指南 > Accessing Child Component Instances & Child Elements 中所述：

[...] 有时您可能仍需要在 JavaScript 中直接访问子组件。为此，您可以使用 ref 属性为子组件分配一个引用 ID。

因此，在您的情况下，您的模板中有：

<div id="mapid" ref="mapElement"></div>

在你的组件脚本中：

import L from 'leaflet'

export default {
  mounted() {
    var mymap = L.map(this.$refs['mapElement']).setView([51.505, -0.09], 13);
    // etc.
  },
}

使用 Vue ref 而不是 HTML id 的额外优势是您可以拥有多个 Vue 组件实例和它们自己的映射，并且 Vue 会为每个脚本引用适当的元素。

而对于 HTML id，如果您有多个具有相同 id 的地图元素，每次您尝试实例化地图时，Leaflet 只会获得第一个，从而引发地图已为此容器初始化的错误。