在微信小程序中实现手绘文旅地图的方法

小程序 0

​本文根据个人经验,罗列下在微信小程序中,实现手绘文旅地图的几种方法,以及它们的优缺点。

一、微信小程序map组件+微信个性化图层

优势:

1、拥有较为完善的文档

2、切图工具齐全

3、使用简单方便。

劣势:

1、需要腾讯地图商KEY,一年五万起步,收费较高

2、图层数据无法动态更新

二、微信小程序组件+addGroundOverlay

即使用imageoverlay图层

优势:

1、相比个性化图层,不需要腾讯地图商key

2、使用简单方便

缺点:

1、图片不能太大,加载慢,有可能导致小程序崩溃

2、受图片加载速度和大小的限制,覆盖区域不可以太大。

3、图片无法遮挡地图上的POI点

优化方法:

1、将大图片切成几个小图,分别显示。

三、webview+openlayers/leafletjs/arcgis js

优势:

1、依托web强大的性能和生态,功能实现上无所不能。

劣势:

1、个人小程序无法使用

2、强制铺满屏幕,强制页面最上层,无法定制导航栏样式

3、无法响应手机的返回键或返回手势

4、可调用微信接口受限

5、webview容器内部与小程序无法事实通信传参,无法实时响应内部操作的问题。

6、第三方业务域名的问题

四、卓伙小程序地图插件

由于微信小程序无法进行DOM操作,导致像openlayers、leaflet这种常用的js库无法在微信小程序内使用。卓伙小程序地图插件,是基于leaflet库开发,独立于官方map组件的一款地图插件。
优势:

1、可以加载百度、高德、天地图、谷歌等第三方瓦片地图服务。

2、无需腾讯地图的商KEY,就可以加载自定义瓦片图层

3、瓦片图片使用image组件拼接,没有图片大小的限制

4、非webview方式,没有其webview的图层覆盖等等各种问题

5、可以进行二次开发。

劣势:

1、polyline、polygon、circle等源leaflet canvas元素,目前不支持动画

2、瓦片栅格地图框架,地图只能一级级缩放。


以上就是目前小程序开发常用的方法,各位可以根据自己的需求自行选用。

也许您对下面的内容还感兴趣: