偶然和朋友聊起，可以用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,
},
發表於 2020-5-20 14:46:00