标签：uniapp return renderjs map script leaflet export 引入 methods

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

renderjs官方描述

<view class="warp">
		<view id="map" class='map'>
		
		</view>
	</view>
	<script module="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: {}
	};
</script>

这样子一个最基本的地图就出来了。

关于功能交互

官方描述中注意事项里有这么几句话

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

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

<template>
    <div>
      <view :layers="layers" :change:layers="leaflet.changeLayers">

      </view>
    </div>
</template>
<script module="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);
            
        },
    }
}
</script>
<script>
export default {
    data() {
      return{
          layers:null
      }
    },
    mounted(){},
    methods:{}
}
</script>
<script>
export default {
    data() {
      return{}
    },
    mounted(){},
    methods:{}
}
</script>
<style scoped>

</style>

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

标签：uniapp,return,renderjs,map,script,leaflet,export,引入,methods
来源： https://blog.csdn.net/weixin_44090753/article/details/119383948

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。