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

最近微信小程序比较火，MapBox在地图前端框架里也比较热门，微信小程序内置的map是腾讯地图，这对于一个GIS开发者来说是远远不能满足的。自己也想了一下Mapbox与微信小程序集成的几种方法1.直接放到微信小程序中肯定不行，因为小程序里没有div标签2.借助第三方框架腾讯的WePy的框架肯定不行，同样不支持div。美团的mpvue框架，亲自测试了一下，同样不行，虽说mapvue可...

GIS开发者

5636人浏览 · 2019-04-12 17:54:16

GIS开发者 · 2019-04-12 17:54:16 发布

最近微信小程序比较火，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的绘制能力有限
配置高的手机会比较流畅，但当有大量矢量瓦片时，也会有轻微卡顿

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^