Vue，Leaflet，Mapbox-找不到错误地图容器 [英] Vue, Leaflet, Mapbox - error map container not found

问题描述

我的理解是，该错误是由于我的代码在呈现HTML元素之前尝试初始化地图所致.据说，将地图初始化为 Mounted()中的var应该可以修复它.我在这篇文章中尝试了建议的修复方法​​ ，但它对我不起作用

My understanding is that the error is due to the my code attempting to initialize the map before the HTML element is rendered. Supposedly, initializing the map as a var in mounted() should fix it. I tried the suggested fix in this post, but it is not working for me.

我在HTML中设置了我的refs值:

I set my refs value in my HTML:

<div class="map-container-column">
    <div class="map banner-map" id="map" ref="myMap"></div>
</div>

我也声明了我的map变量在mount中.我尝试使用 L.map(this.$ refs ['myMap'] {和 L.map(this.$ refs.myMap {似乎没有任何改变.

And I declared my map variable in mounted as well. I tried using the suggested syntax of L.map(this.$refs['myMap'] { and L.map(this.$refs.myMap { and it doesn't seem to make a difference either way.

mounted() {
var map = L.map(this.$refs.myMap, {
                    zoomControl: false,
                    closePopupOnClick: false
                }).setView(regionCoords, 10);
                this.tileLayer = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
                    minZoom: 9,
                    maxZoom: 15,
                    accessToken: MapBoxApiKey,
                    style: 'mapbox://styles/mapbox/streets-v9',
                    attribution: '<a href="https://www.mapbox.com/about/maps/" target="_blank">&copy; Mapbox</a> <a href="http://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap</a> <a class="mapbox-improve-map" href="https://www.mapbox.com/feedback/?owner=mapbox&amp;id=streets-v9&amp;access_token=pk.eyJ1IjoiaGlnaGxhbmRob21lc2RpZ2l0YWwiLCJhIjoiY2psNzJrdmwwMzN0ZDNxcWpwNnRteDJ5aiJ9.ENhvxwa1PF2i8f6xCcgLLA" target="_blank">Improve this map</a>',
                });
                this.tileLayer.addTo(map);
                L.control.zoom({
                    position: 'topright'
                }).addTo(map);
}

我做错什么了吗?如果没有，还有什么可能导致此错误?

Am I doing somethings wrong? If not, what else could be causing this error?

推荐答案

最近几天，同样的事情困扰着我.我的主要学习点是，如果DOM中不存在Leaflet，则无法将其自身注入 #map 元素，这是StackOverflow上的每个人都会告诉您的.不太明显的是， #map 在DOM中不存在-可能是由于祖先元素上的 v-if 或使用了Vue Router-该元素不是可见的"(按Vue的说法).

The same thing was bugging me for the last few days. My main learning point is that Leaflet can't inject itself into the #map element if it doesn't exist in the DOM, which is what everyone on StackOverflow will tell you. What isn't so apparent is that #map doesn't exist in the DOM if - perhaps by virtue of a v-if on an ancestor element or use of Vue Router - the element isn't 'visible' (in the Vue sense of the word).

确保仅在渲染 #map 后才插入Leaflet代码的好方法是，将 #map 改成具有其自己的的组件.Mounted()钩子.这样一来，您便知道 mount()仅在渲染该组件，以及每次渲染该组件时才适用并运行(例如，通过 v-如果在某处).

A good way to ensure that the Leaflet code injects only when #map has been rendered is to make #map into a component instead, with its own mounted() hook. That way you know that mounted() will only apply and run when the component is rendered, and every time it is rendered (eg. toggled by a v-if somewhere).

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