在uni-app上自带有map组件，但是那个组件功能太弱，很多高级用法很难实现。用npm添加leaflet呢，又各种报错。
偶然和朋友聊起，可以用html来实现leaflet地图，然后用webview组件来加载这个html。webview其实就是一个浏览器内核。它可以渲染html，而且性能可以完全媲美原生。我们试验之后，果然发现非常棒，非常好用。哈哈
这里只粘贴上部分代码，仅供参考，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>实况地图</title> <link rel="stylesheet" href="./js/leaflet.css" crossorigin=""/> <script src="./js/leaflet.js" crossorigin=""></script> <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="./js/axios.min.js"></script> <script src="./js/date.js"></script> <script src="./js/aqi.js"></script> <script type="text/javascript" src="./js/uni.webview.1.5.2.js"></script> </head> <body> <div id="app"> <div class="Radio"> <button class="button" v-bind:class="[ i == airIndex ? 'button_on' : '']" v-for="(item,i) in airArr" :key="i" @click="airRadioClick(item.id,i)"> {{item.mainName}} </button> </div> <div id="mapid"> <div class="time_title"> {{timeTitle}} </div> <img src="./image/refresh2.png" class="RefreshIcon" @click="dataRefresh"> <img src="./image/wind.png" class="WindIcon" v-bind:class="{WindIcon_on:showWind}" @click="windShow"> </div> </div> <script type="module"> // import {getPollLevelColor,getPollLevelTextColor} from './js/aqi.js'; // import { getDateYMD,dateAdd,getDateYMDHMS,DateDiff,DateDiffHour,getDateYMDH,addZero,getDateYMDH_CN} from './js/date.js'; var _self; var vm = new Vue({ el : "#app", data : { timeTitle:"2020年5月19日12时", name : "vue", map:null, baseLayer:null, graphicLayer:null, siteArr:[], airArr:[//单选框数组 { id: 'aqi', mainName: 'AQI'}, { id: 'pm25', mainName: 'PM2.5'}, { id: 'pm10', mainName: 'PM10'}, { id: 'so2', mainName: 'SO2'}, { id: 'o3', mainName: 'O3'}, { id: 'no2', mainName: 'NO2'}, { id: 'co', mainName: 'CO'}, { id: 'voc', mainName: 'VOC'}, ], airIndex:0, airid:'aqi', showWind:true, },