微信小程序嵌入MapBox地图方法研究
最近微信小程序比较火,MapBox在地图前端框架里也比较热门,微信小程序内置的map是腾讯地图,这对于一个GIS开发者来说是远远不能满足的。自己也想了一下Mapbox与微信小程序集成的几种方法1.直接放到微信小程序中肯定不行,因为小程序里没有div标签2.借助第三方框架腾讯的WePy的框架肯定不行,同样不支持div。美团的mpvue框架,亲自测试了一下,同样不行,虽说mapvue可...
·
最近微信小程序比较火,MapBox在地图前端框架里也比较热门,微信小程序内置的map是腾讯地图,这对于一个GIS开发者来说是远远不能满足的。自己也想了一下Mapbox与微信小程序集成的几种方法
1.直接放到微信小程序中
肯定不行,因为小程序里没有div标签
2.借助第三方框架
腾讯的WePy的框架肯定不行,同样不支持div。美团的mpvue框架,亲自测试了一下,同样不行,虽说mapvue可以用原生html和vue开发,但是在编译成的时候,还是将div转换成了view,转换后小程序直接运行错误,移除MapBox就正常
3.WebView的开发方式
类似Android WebView的开发,但是小程序的WebView接口受限,只能访问基于https或ws协议的网页地址,而且要配置到域名白名单,但作为测试的时候还是可以用http地址的网页的。测试了一下,在手机上市可以展示的
注意这种方式有以下限制
- Android5.0以下版本不支持WebGL,MapBox就不会显示(测试时有一个5.1.1的手机也没有显示)
- 配置低的手机会有卡顿现象,毕竟WebView的绘制能力有限
- 配置高的手机会比较流畅,但当有大量矢量瓦片时,也会有轻微卡顿
在支付宝小程序测试模拟器可以显示,真机网页一直被阻拦,这里就没法告诉大家结果了
更多推荐
已为社区贡献12条内容
所有评论(0)