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

Question

我的理解是，该错误是由于我的代码尝试在渲染 HTML 元素之前初始化地图造成的。据说，将地图初始化为

mounted()

中的 var 应该可以修复它。我尝试了本文中建议的修复，但它对我不起作用。

我在 HTML 中设置了 refs 值：

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

我也在 Mounted 中声明了我的地图变量。我尝试使用

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 上的每个人都会告诉你的。不太明显的是，如果 - 可能由于祖先元素上的 

#map

 或使用 Vue Router - 该元素不“可见”（在 Vue 中），则 DOM 中不存在 

v-if

这个词的意义）。

确保仅在呈现

#map

 时才注入 Leaflet 代码的一个好方法是将 

#map

 放入组件中，并使用其自己的 

mounted()

 钩子。这样您就知道 

mounted()

 只会在组件渲染时应用和运行，

以及每次渲染时（例如，在某处由 v-if

 切换）。

Answer 2

我在使用 nuxt 时遇到了这个问题，但它也适用于 Vue。看起来 Vue 在 DOM 可用之前调用 onMounted() 存在一些错误。它应该在 Vue 3.3.7 中修复。 github上有一个问题[https://github.com/nuxt/nuxt/issues/13471]

以下解决方案取自问题页面。

在旧版本的 Vue 中，您可以通过禁用过渡来修复它

// inside component's setup() funciton
definePageMeta({
  pageTransition: false,
}

// or globally in nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: false,
    layoutTransition: false,
  }
})

或者您可以使用超时解决方案

onMounted(() => {
    setTimeout(() => {
        // your mounted code
    }, 1)
})