时间戳

首页 > 解决方案 > Vue、Leaflet、Mapbox - 找不到错误地图容器

vue.js - Vue、Leaflet、Mapbox - 找不到错误地图容器

问题描述

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

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

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

我也在mounted中声明了我的map变量。我尝试使用 and 的建议语法，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);
}

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

标签： vue.jsvuejs2leafletmapbox

解决方案

在过去的几天里，同样的事情困扰着我。#map我的主要学习点是，如果 DOM 中不存在Leaflet，则无法将其自身注入到元素中，这是 StackOverflow 上的每个人都会告诉你的。不太明显的是，如果 - 可能由于祖先元素上的 a 或使用 Vue 路由器 - 元素不是“可见的”（在 Vue 的意义上）#map，则 DOM 中不存在。v-if

确保 Leaflet 代码仅在#map渲染后才注入的一个好方法是#map改为使用自己的mounted()钩子制作组件。这样你就知道它mounted()只会在组件被渲染时应用和运行，并且每次渲染时（例如，由v-if某处切换）。

推荐阅读