uni-app上使用leaflet地圖的解決方案

在uni-app上自帶有map組件，可是那個組件功能太弱，不少高級用法很難實現。用npm添加leaflet呢，又各類報錯。javascript

偶然和朋友聊起，能夠用html來實現leaflet地圖，而後用webview組件來加載這個html。通過試驗以後，發現還不錯，挺好用的。哈哈css

這裏只粘貼上部分代碼，僅供參考，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, },