Vuejs传单:找不到地图容器 [英] Vuejs Leaflet : Map Container Not Found

问题描述

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

I am trying to use the leaflet map in Vue, but keep getting the error:

未捕获的错误:找不到地图容器.

Uncaught Error: Map container not found.

这是我的组件的样子:

<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.

I have also added the Leaflet CSS and JavaScript under that in my index.html head.

推荐答案

欢迎使用！

当您尝试实例化Leaflet Map时，通过传递元素ID来 /a>(L.map('mapid'))，问题在于您的Vue组件尚未附加到页面DOM.因此，当Leaflet尝试查询后者以找到您的Element时，它将找不到它，因此会出现错误消息.

When you try instantiating your Leaflet Map by passing it your Element id (L.map('mapid')), the problem is that your Vue component is not yet attached to your page DOM. Therefore when Leaflet tries to query the latter to find your Element, it cannot find it, hence your error message.

如果您尝试在mounted生命周期挂钩中实例化，情况也是如此:创建了Vue组件实例，并构建了其片段HTML结构，但仍未附加到页面DOM.

Same thing if you try instantiating in the mounted lifecycle hook: your Vue component instance is created and its fragment HTML structure is built, but still not attached to the page DOM.

但是，除了传递您的Element ID之外，您还可以直接传递您的Element.请注意，您仍然需要在 mounted 挂钩中执行此操作，以确保您的组件实例确实具有HTML结构.

But instead of passing your Element id, you can directly pass your Element. Note that you still need to do so in the mounted hook, to ensure that your component instance does have an HTML structure built.

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

在给定一个<div> HTML元素实例以及一个可选的带有Map options的对象常量的情况下，实例化地图对象.

Instantiates a map object given an instance of a <div> HTML element and optionally an object literal with Map options.

然后获取元素，只需利用Vue $refs 实例属性和 ref 特殊属性，如Vue指南>

Then to get your Element, simply leverage Vue $refs instance property and ref special attribute, as described in Vue Guide > Accessing Child Component Instances & Child Elements:

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

[…] sometimes you might still need to directly access a child component in JavaScript. To achieve this you can assign a reference ID to the child component using the ref attribute.

因此，在您的情况下，您将使用模板:

Therefore in your case you would have in your template:

<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.

The added advantage of using Vue ref over HTML id is that you can have several Vue component instances with their own map, and Vue will reference the appropriate Element to each script.

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

Whereas with HTML id, if you have several map Elements with same id, Leaflet will get only the first one every time you try to instantiate your map, raising the error that the map is already initialized for this container.

这篇关于Vuejs传单:找不到地图容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！