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

嘿佛雷 發表於 2020-5-20 14:46:00

在uni-app上自带有map组件，但是那个组件功能太弱，很多高级用法很难实现。用npm添加leaflet呢，又各种报错。
偶然和朋友聊起，可以用html来实现leaflet地图，然后用webview组件来加载这个html。webview其实就是一个浏览器内核。它可以渲染html，而且性能可以完全媲美原生。我们试验之后，果然发现非常棒，非常好用。哈哈
这里只粘贴上部分代码，仅供参考，
<div class="cnblogs_code">
<pre><!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>

<divid="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,
},</pre>
</div>
  
来源：https://www.cnblogs.com/tiandi/p/12923556.html

頁: [1]

琼殿技术论坛's Archiver

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