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

欢迎您！

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

如果您尝试在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.
  },
}

在HTML id上使用Vue ref的另一个好处是，您可以拥有多个具有自己的映射的Vue组件实例，并且Vue将为每个脚本引用适当的Element。

使用HTML ID的情况下，如果您有多个具有相同ID的地图元素，则每次尝试实例化地图时，Leaflet将仅获得第一个，从而引发错误，该地图已为此容器初始化。

Vuejs传单：找不到地图容器

1 个答案: