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

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

一、微信小程序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、瓦片栅格地图框架，地图只能一级级缩放。

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