uni-app上使用leaflet地图的解决方案

在uni-app上自带有map组件，但是那个组件功能太弱，很多高级用法很难实现。用npm添加leaflet呢，又各种报错。

偶然和朋友聊起，可以用html来实现leaflet地图，然后用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,
    },

原文地址：https://www.cnblogs.com/tiandi/p/12923556.html