Question

我的理解是，该错误是由于我的代码在呈现HTML元素之前尝试初始化地图所致。假设在mounted()中将地图初始化为var应该可以解决。我尝试了建议的修补程序in this post，但它对我不起作用。

我在HTML中设置了refs值：

<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 {语法，但这两种方法似乎都没有什么区别。

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);
}

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

Answer 1

最近几天，同样的事情困扰着我。我的主要学习点是，如果DOM中不存在Leaflet，则无法将其自身注入#map元素中，这是StackOverflow上的每个人都会告诉您的。似乎不太明显的是，如果{–1}}在DOM中不存在-可能是由于祖先元素上的#map或使用了Vue Router-该元素“不可见” （在Vue的意义上）。

确保仅在呈现v-if时才插入Leaflet代码的好方法是，将#map改成具有自己的#map钩子的组件。这样，您就知道mounted()仅在渲染组件，以及每次渲染（例如，在某处通过mounted()切换）时才应用并运行。

Vue，Leaflet，Mapbox-未找到错误地图容器

1 个答案: