uniapp vue3 如何使用 leaflet 实现地图功能

在uniapp中使用vue3框架开发时，如何集成leaflet地图库？我按照官方文档尝试引入leaflet，但发现DOM操作和uniapp的渲染机制有冲突，地图无法正常显示。请问有没有完整的示例代码或解决方案？需要处理的关键点包括：1)如何正确引入leaflet库；2)解决uniapp的DOM操作限制；3)地图容器的样式适配问题；4)在vue3组合式API中的实现方式。

2 回复

在uniapp vue3中使用leaflet，需先安装leaflet：npm install leaflet。引入leaflet.css和leaflet.js，在onMounted中初始化地图：

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

onMounted(() => {
  const map = L.map('map').setView([39.9, 116.4], 10);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
});

注意：uniapp中需处理跨平台兼容性，H5可直接使用，小程序需使用map组件桥接。


在 UniApp Vue3 中使用 Leaflet 实现地图功能，需要通过以下步骤：

1. 安装 Leaflet 依赖

在项目根目录执行：

npm install leaflet

2. 引入 Leaflet 样式

在 App.vue 或页面样式中添加：

@import 'leaflet/dist/leaflet.css';

3. 创建地图组件

在页面组件中实现：

<template>
  <view class="map-container">
    <view id="map"></view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue'
import L from 'leaflet'

onMounted(() => {
  initMap()
})

const initMap = () => {
  // 创建地图实例
  const map = L.map('map').setView([39.9042, 116.4074], 13) // 北京坐标
  
  // 添加瓦片图层（使用OpenStreetMap）
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map)
  
  // 添加标记
  L.marker([39.9042, 116.4074])
    .addTo(map)
    .bindPopup('这是一个标记')
    .openPopup()
}
</script>

<style scoped>
.map-container {
  height: 100vh;
  width: 100%;
}

#map {
  height: 100%;
  width: 100%;
}
</style>

4. 注意事项

  • 跨平台兼容：H5 端可直接使用，小程序端需使用 web-view 组件嵌套
  • 图标修复：若遇到图标路径问题，需手动修复：
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

5. 扩展功能示例

添加点击事件和自定义标记：

// 地图点击事件
map.on('click', (e) => {
  L.marker(e.latlng)
    .addTo(map)
    .bindPopup(`位置: ${e.latlng.lat.toFixed(4)}, ${e.latlng.lng.toFixed(4)}`)
    .openPopup()
})

重点提示

  • 确保容器有明确的高度/宽度
  • 小程序端需要使用 web-view 加载 H5 页面实现
  • 生产环境建议使用合法地图源（如高德、腾讯地图需申请密钥）

这样即可在 UniApp Vue3 中实现基础的 Leaflet 地图功能。

回到顶部