Vue3集成vue-leaflet报错Uncaught (in promise) TypeError: t is undefined

可能的原因及解决方案 #

1. 未导入Leaflet核心库 #

@vue-leaflet/vue-leaflet是Leaflet的Vue封装组件，必须依赖Leaflet核心库才能运行。你的代码仅引入了组件和样式，但未导入Leaflet本身，导致组件无法获取Leaflet实例，触发该错误。

解决：
在脚本中添加Leaflet核心库的导入：

import L from 'leaflet'
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";

2. 版本兼容性不匹配 #

Vue3、Leaflet、@vue-leaflet/vue-leaflet三者版本不兼容会引发此类运行时错误。

解决：

• 查看@vue-leaflet/vue-leaflet官方文档确认兼容版本范围
• 安装匹配的版本，例如（根据当前稳定版调整）：

npm install leaflet@^1.9.0 @vue-leaflet/vue-leaflet@^0.10.0

3. 地图容器无固定尺寸或渲染时机问题 #

从错误栈可见错误与vue-router导航相关，可能是路由切换时地图组件在DOM未就绪或容器无尺寸的情况下渲染。

解决：

• 给地图容器添加固定宽高样式：

.map {
  width: 100%;
  height: 400px; /* 按需调整高度 */
}

• 控制组件在页面挂载完成后渲染：

import { ref, onMounted } from 'vue'
const isMounted = ref(false)
onMounted(() => {
  isMounted.value = true
})

模板修改：

<div class="map" v-if="isMounted">
  <l-map ref="map" v-model:zoom="zoom" :center="center">
    <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base" name="OpenStreetMap"></l-tile-layer>
  </l-map>
</div>

内容的提问来源于stack exchange，提问作者Amin Seyedi