微信小程序地图生态概述

背景

地图是对现实世界地理信息的可视化表达。从早期的纸质地图，到现如今的电子地图，地图的存储介质已经发生了巨大的转变。从表现内容来看，地图也不仅仅局限于反映地形地貌或地区边界，而是转向民生（外卖）、文化（艺术设计）及城市管理（智慧城市）。多元的地图需求正在促使地图的发展与创新。

近年来，越来越多的互联网公司逐渐重视地图产业的布局及业务推进。百度的智慧城市、智慧交通及无人驾驶，高德的车道级高精地图，腾讯的微信小程序地图，美团的无人配送，拼多多、华为等都入局地图行业。

本文主要讲述微信小程序地图功能，分享个人的使用体验和一些坑。如需体验腾讯位置服务，可从以下专属邀请链接进入：https://lbs.qq.com?lbs_invite=SVQ2FLS

微信小程序地图生态

小程序地图功能官方示例

可以看到分为Map组件、Map API、小程序插件、个性化地图和接口能力五个部分。总体来说整个生态已经比较完善，基础功能已经具备，但是功能并不齐全。当然这需要一个迭代的过程，不可能短期内和web端、移动端的服务一样齐全。下面我主要从个人使用角度来展开介绍五个部分。

Map组件

Map组件分为六类：地图显示、地图视野控制、地图控件、标注点、覆盖物、触发事件。
这里着重讲下几个不足：

1. 缺乏地图缩放控件
2. 标注（label）和气泡窗口（callout）的区分度不足
3. 文字和图标居中难以实现
4. map组件同层渲染存在重大缺陷

第一点，缩放控件目前是缺失的，而这也是比较基础和重要的一个控件。实际上地图组件上的scale属性，也存在问题，就是不能自动更新，需要用户根据接口手动获取。另外，早期scale还存在机型反应不一致的情况，例如精度问题。看了下2.13.1版本才开始支持scale的小数。

第二点，我认为label和callout很多用户都觉得是很类似的功能，从二者的属性值也可以看出，callout只比label多了一个display属性，也就是说如果callout的display设置为’ALWAYS’，那两者就完全一致了。这样就体现label的多余。

第三点，目前label和callout在样式层面可配置的余地很少。而新出的customCallout（自定义气泡）也许可以解决这个问题，我自己没有测试过，不确定表现是否稳定。前期要实现点聚合图标和文字完全居中就难以实现，给出的解决方案也是一个hack，就是默认数字的宽是高的一半，从而根据fontSize的不同来控制anchorX左移的距离。这只是一个折衷方案。

第四点，因为之前微信小程序官方说已经支持同层渲染，就是一些原生组件（map、canvas之类）可以和view这种按照正常的显示层级来显示。所以我讲一些cover-view组件都替换成普通的view标签，但是会出现偶尔移动端控件被map压盖的情况。同时pc端打开的小程序，也会出现被压盖的情况。可见同层渲染功能目前并不是很健全。

Map API

Map API实际上并不止图中所示的5个，这5个只是最具特色的api，我看了下官方文档， 地图类api应该有23个（包括创建地图对象）。比较新的API有以下几个：

1. MapContext.addCustomLayer
2. MapContext.addGroundOverlay
3. MapContext.fromScreenLocation
4. MapContext.initMarkerCluster
5. MapContext.moveAlong
6. MapContext.on
7. MapContext.MapContext.openMapApp
8. MapContext.removeCustomLayer
9. MapContext.removeGroundOverlay
10. MapContext.removeMarkers
11. MapContext.toScreenLocation
12. MapContext.translateMarker
13. MapContext.updateGroundOverlay

比较吸引我的是点聚合功能（MarkerCluster）。我看了下是2.13.1开始支持的，是2020.9.7，而我自己实现的前端点聚合功能正好是2020.10.3，当时没有注意到官方已经实现了这个功能，哈哈。这里贴一个自己做的点聚合功能的帖子链接

此外，api提供了轨迹动画（translateMarker），也是比较有趣的点。

小程序插件

示例提供了三个插件：路线规划、地图选点和地铁图。我自己用过路线规划插件，使用起来也十分方便。就是有个缺点：插件版本更新之后需要自己在代码中更新，不能自动更新。

个性化地图

个性化地图算是比较常见的一种地图服务了。因为目前地图渲染很多都是基于矢量数据，加一个样式配置文件就可以自定义地图样式，非常好推广，并且有实用价值。配出一张吸引人、突出重点的地图是非常难的，需要一定的经验，以及不断地尝试（本人也画过图，所以深有体会）。

只需要到腾讯位置服务中选择或者自定义样式，用layer-style就可以在小程序中展示个性化地图，并且已经支持动态切换样式。

接口能力

提供了逆地址解析和地点搜索。比较少，我相信以后会开放更多接口能力。

案例

我以自己开发的一款小程序——约球online来分解地图相关的功能。小程序码如下：

简介

这是一款基于地图的，专为篮球爱好者提供的实时约球小程序。

功能

整个小程序分“附近”和“我的”两个页面。

附近里分“球友”、“球场”、“广播”三个子页面，都是以地图为载体，在上面叠加不同的目标元素。如图



我的页面是辅助功能模块，如图

从以上案例可以看出，微信小程序的地图生态，是可以支撑开发者产生无穷无尽的新点子的。所有与地理有关联的场景，都可以借由地图来实现数据可视化。因此，地图是非常重要的基础功能。

结语

微信小程序由于其开发的便捷性以及便于传播，大量的app都已经开发出相应的小程序版本。整体来看，微信小程序的地图功能虽然可以满足小程序场景的大部分需求，但还不够完善。开发者在地图功能开发过程中，容易碰到一些web前端少见的bug，而官方修复bug效率又相对较低，容易丧失开发热情。另一方面，微信小程序的地图组件性能上也存在一定的缺陷，特别是应对地理大数据时的表现，还有很大的优化空间。当然，地图这种基础功能，始终是需要融入新技术，来进行性能优化以及技术创新的，这个过程不会停滞。

总体而言，微信小程序的地图生态正在逐步完善。