uniapp中引入使用leaflet地图

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绑定的事件来操作,当数据改变时可以监听到,然后触发绑定的事件,以此来操作地图功能交互
在这里插入图片描述

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
uniapp可以使用leafletwx这个开源地图组件来集成leaflet地图功能。leafletwx是基于leaflet使用微信原生组件开发的一套开源地图组件,旨在替换小程序内的原生map组件。你可以在uniapp使用leafletwx来调用leaflet地图功能。具体的使用方法可以参考leafletwx的官方文档和示例代码。\[1\]在uniapp使用leafletwx,你需要将leafletwx组件目录从"components"移动到"wxcomponents",并将依赖的js文件移动到"/static/lib"的对应目录。然后,你可以在uniapp的页面引入leafletwx组件,并在mounted生命周期函数使用leaflet的API来创建地图和添加图层。\[2\]总的来说,uniapp可以很方便地使用leafletwx来实现leaflet地图功能,并且可以跨平台使用。 #### 引用[.reference_title] - *1* *3* [用uniapp开发的微信小程序,如何使用开源地图组件leafletwx](https://blog.csdn.net/whbke/article/details/130834579)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp引入使用leaflet地图](https://blog.csdn.net/weixin_44090753/article/details/119383948)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值