微信小程序嵌入MapBox地图方法研究

最近微信小程序比较火,MapBox在地图前端框架里也比较热门,微信小程序内置的map是腾讯地图,这对于一个GIS开发者来说是远远不能满足的。自己也想了一下Mapbox与微信小程序集成的几种方法

1.直接放到微信小程序中

肯定不行,因为小程序里没有div标签

2.借助第三方框架

腾讯的WePy的框架肯定不行,同样不支持div。美团的mpvue框架,亲自测试了一下,同样不行,虽说mapvue可以用原生html和vue开发,但是在编译成的时候,还是将div转换成了view,转换后小程序直接运行错误,移除MapBox就正常

3.WebView的开发方式

类似Android WebView的开发,但是小程序的WebView接口受限,只能访问基于https或ws协议的网页地址,而且要配置到域名白名单,但作为测试的时候还是可以用http地址的网页的。测试了一下,在手机上市可以展示的

微信小程序嵌入MapBox地图方法研究

注意这种方式有以下限制

  1. Android5.0以下版本不支持WebGL,MapBox就不会显示(测试时有一个5.1.1的手机也没有显示)
  2. 配置低的手机会有卡顿现象,毕竟WebView的绘制能力有限
  3. 配置高的手机会比较流畅,但当有大量矢量瓦片时,也会有轻微卡顿

在支付宝小程序测试模拟器可以显示,真机网页一直被阻拦,这里就没法告诉大家结果了