如何在Nuxt Vue 3中动态创建多个Leaflet地图？

1. 模板部分修正 #

你的原有模板存在重复id、ref绑定方式错误的问题，修改后的模板如下：

<template>
  <div v-for="(item, index) in listitems" :key="index">
    <!-- 生成唯一ID+函数式ref存储容器DOM -->
    <div 
      :id="`map-${index}`" 
      :ref="el => { if (el) mapRefs[index] = el }"
      style="height: 300px; width: 100%;"
    ></div>
  </div>
</template>

• 给每个地图容器设置唯一ID，避免DOM冲突
• 用函数式ref将动态生成的容器DOM存入数组，确保能精准获取每个元素
• 必须设置固定高度，否则Leaflet地图无法正常渲染

2. 脚本部分实现 #

在<script setup>中完成地图初始化与实例管理：

<script setup>
import { ref, onMounted } from 'vue'
import L from 'leaflet'
// 引入Leaflet样式（未全局配置时必须加）
import 'leaflet/dist/leaflet.css'

// 替换为你的实际列表数据
const listitems = ref([/* 你的数据项 */])
// 存储所有地图实例的数组
const mapInstances = ref([])
// 存储地图容器DOM的数组
const mapRefs = ref([])

onMounted(() => {
  listitems.value.forEach((_, index) => {
    const container = mapRefs.value[index]
    if (!container) return

    // 初始化地图
    const map = L.map(container).setView([51.505, -0.09], 13)
    // 添加瓦片图层（必须添加，否则地图无内容）
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map)

    // 存入实例，方便后续操作
    mapInstances.value[index] = map
  })
})
</script>

3. 关键注意事项 #

• 样式引入：未全局配置Leaflet CSS时，必须在组件内导入leaflet/dist/leaflet.css，否则瓦片会显示错位
• 容器高度：地图容器必须设置明确高度，否则无法渲染
• ref使用：Vue 3中v-for内的动态元素，必须用函数式ref才能正确获取DOM
• 实例管理：将地图实例存入数组后，可随时通过索引对指定地图进行修改（比如添加标记、调整视图）

4. Nuxt 3全局配置（可选） #

若多个组件使用Leaflet，可在nuxt.config.ts中全局配置：

export default defineNuxtConfig({
  css: ['leaflet/dist/leaflet.css'],
  vite: {
    ssr: {
      noExternal: ['leaflet']
    }
  }
})

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