我正在尝试在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 © <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。
答案 0 :(得分:3)
欢迎您!
当您尝试实例化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将仅获得第一个,从而引发错误,该地图已为此容器初始化。