uniapp|uniapp中引入使用leaflet地图 javascript|leaflet

leaflet地图本身支持移动端，但对原生更友好，在uniapp中就较为复杂
如果是直接引入，在h5端是正常的，但真机运行后就会发现，地图加载不出来，需要用到uniapp的renderjs
renderjs官方描述

="leaflet" lang="renderjs"> import L from 'leaflet' export default { data() { return {}; }, components: {}, created() {}, mounted() {var map = L.map('map', { center: [29.09508, 119.07214], zoom: 13, minZoom: 1, maxZoom: 24, zoomControl: false, }); L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { }).addTo(map); }, computed: {}, methods: {} };

这样子一个最基本的地图就出来了。
关于功能交互
官方描述中注意事项里有这么几句话

文章图片

在renderjs里的script是拿不到正常的this对象的，包括uni的接口也用不了，比如你在renderjs的mouted中打印一个storage信息

文章图片

结果就是h5端正常打印，但在真机上就会报错，导致连地图也出不来
所以可以写两个script，一个逻辑层，一个视图层，
两个script之间的交互则需要这么写

="leaflet" lang="renderjs"> import L from 'leaflet' export default { data() { return{} }, mounted(){ var map = L.map('map', { center: [29.09508, 119.07214], zoom: 13, minZoom: 1, maxZoom: 24, zoomControl: false, }); L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { }).addTo(map); }, methods:{ changeLayers(newValue, oldValue, ownerInstance, instance){ console.log(newValue, oldValue, ownerInstance, instance); }, } } > export default { data() { return{ layers:null } }, mounted(){}, methods:{} } > export default { data() { return{} }, mounted(){}, methods:{} } >

【uniapp|uniapp中引入使用leaflet地图】在view标签上绑定正常script的数据，通过:change绑定的事件来操作，当数据改变时可以监听到，然后触发绑定的事件，以此来操作地图功能交互