Vuejs传单:找不到地图容器

时间:2018-08-27 22:05:06

标签: javascript vue.js leaflet

我正在尝试在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。

1 个答案:

答案 0 :(得分:3)

欢迎您!

当您尝试实例化Leaflet Map by passing it your Element idL.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将仅获得第一个,从而引发错误,该地图已为此容器初始化。