uniApp中使用leaflet地图组件踩坑记

最近在用uniApp写一个App，有打卡之类功能需要用到地图展示，找了几个轮子(echarts、openlayers、leaflet)，比较一下了最终选择了leaflet(要不这文章没法写)，主要是只有40k，用在移动端太合适了

有了解的小伙伴可能会说：uni不是提供了map组件吗，是的，为啥不用呢, 拿来用没挑战(其实是没有money)

如何应用

一、安装

npm i leaflet  

二、使用

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

import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'

const map = L.map(containerId, {
    attributionControl: false,
    zoomControl: false
}).setView([39.90762942,116.39190674], 12, { // 注意： 纬度在前，经度在后
    minZoom: 2,
    maxZoom: 16
})

// 添加图层
const layer = L.tileLayer(url).addTo(map); // url是瓦片地址

return map;

运行成功结果

好，文章到此结束

在web端确实已经结束了，但当你运行到真机的时候，你会发现嘛也没有啊

leaflet是基于HTML5和JavaScript开发的开源地图库,针对网页开发优化。而uniapp使用原生渲染,不是标准的网页环境,所以无法直接引用leaflet

解决方案

只需要加这么一行代码，这个时候你就可以在手机上看到熟悉的画面了

<script module="leaflet" lang="renderjs">

总结

介绍了如何使用leaflet，真机遇到的问题及解决办法，如果你碰到类似的问题，希望能给你提供个参考。

1. 小白一个，大佬轻喷
2. 欢迎批评、指导
3. 这个方案还有一个坑，下一篇文章再来填

附官方介绍资料连接：uniapp.dcloud.net.cn/tutorial/re…