使用uniapp 开发离线地图在浏览器能正常显示，运行到手机端是空白的。
方法1 使用 renderjs
renderjs使用方法及视图层和逻辑层的通信方法：
<view id="map" :layer="layer" @click="leaflet.emitData" :change:layer="leaflet.receiveName">
//视图层
<script module="leaflet" lang="renderjs">
import L from "leaflet";
import 'leaflet/dist/leaflet.css'
export default {
data() {
return {
src:'',
NavAudio:'',
};
},
mounted() {
let map = L.map("map", {
center: [24.06554, 113.43704], // 地图中心
zoom: 3, //默认缩放比例
minZoom: 1,
maxZoom: 18,
animate: true,
zoomControl: true, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
bounceAtZoomLimits: false
});
let name = L.tileLayer(
"./static/Tile/{z}/{x}/{y}.png", {}
).addTo(map);
//点击renderjs层后发送数据到逻辑层
emitData(e, ownerVm) {
//多个数据用数组发送
ownerVm.callMethod('receiveRenderData', [this.src, this.NavAudio])
},
//逻辑层layer数据变化 返回
receiveName(newValue, oldValue, ownerVm, vm) {
console.log(newValue)
}
}
}
</script>
//逻辑层
<script>
//这里写js逻辑代码
export default {
data() {
return {
layer: '',//layer变化则会自动传递layer到视图层
};
},
mounted() {
// 接收renderjs发回的数据
receiveRenderData(val) {
console.log('receiveRenderName', val);
},
}
}
</script>
将视图层和逻辑层分开，因为在renderjs中无法使用uni方法，只能写在逻辑层，如果业务中有使用到了uni的方法，且视图层和这个方法存在交互的不建议使用renderjs。因为视图层和逻辑层的信息交流比较难搞，如果要频繁进行交互就会很卡。
比如我的项目使用到了uni.createInnerAudioContext() 播放mp3，点击地图上的点就会播放一段内容，光这一个还不会卡，但到后面又加了一个uni方法的时候，逻辑层的视图层的通信就更多了，就变得非常卡。
方法2 使用 webview
相当于在手机端内嵌了一个浏览器内核，即将功能都在web端调试好，再使用webview标签引入。
在web端写好后，选择发行->网站->发行
打包好后打开目录，复制文件到hybrid下的html中
则可以删除之前写的web端代码，直接用webview标签引入
<template><web-view src='/hybrid/html/index.html'></web-view></template>
