uniapp引用leaflet地图实现方案

文章讲述了在uniapp移动端应用中遇到GIS地图显示问题,尝试了uniapp的map组件和mars2d,但遇到真机运行时的错误。作者发现将leaflet地图组件放在components顶层目录可解决此问题,并且需使用renderjs引入依赖。这是一个关于uniapp集成GIS地图的特殊解决方案。
摘要由CSDN通过智能技术生成

最近在做uniapp实现的移动端app,其中一些模块需要gis地图,在最开始的时候我尝试了使用uniapp官方自带的map组件,但是非常不好用。
后来又引用了mars2d来实现,但是发现这种引用方式会出现一个bug,在浏览器当中使用的时候是没有问题的,但是一旦真机运行,就会弹出来一个报错,印象中应该是报了 requestAnimationFrame is not defined 这样一个错误。
这个问题困扰了我挺久,查了国内国外的都没有什么解决方案,并且到官方平台上去看人家官方竟然说这个问题他们也没有办法解决,最后就想着真的不行了用webview来实现吧,可是webview使用起来要用原生js去写,我又懒得去用感觉很复杂,最后我自己去调来调去,发现了一个比较特别的解决方案。

在这里插入图片描述
这里使用的是leaflet,这里我们只需要注意唯一的也是最重要的一点,就是这里的目录结构,其中的mapContainer.vue 是引用leaflet的gis地图组件,它一定要放在components文件夹最外层,一定不能放在components下的某个文件夹下,不然就会报上边所说的那个错误。

在这里插入图片描述
然后就是组件内部了,这里注意它只能使用renderjs的方式来引入leaflet的各种依赖文件,而renderjs模板的使用方法和注意事项这里就不展开了,uniapp的官网是有例子的。

那么这些就是该方案的一个总结,其实也很简单,就是文件目录的问题,但是挺难发现。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值