背景
地图是对现实世界地理信息的可视化表达。从早期的纸质地图,到现如今的电子地图,地图的存储介质已经发生了巨大的转变。从表现内容来看,地图也不仅仅局限于反映地形地貌或地区边界,而是转向民生(外卖)、文化(艺术设计)及城市管理(智慧城市)。多元的地图需求正在促使地图的发展与创新。
近年来,越来越多的互联网公司逐渐重视地图产业的布局及业务推进。百度的智慧城市、智慧交通及无人驾驶,高德的车道级高精地图,腾讯的微信小程序地图,美团的无人配送,拼多多、华为等都入局地图行业。
本文主要讲述微信小程序地图功能,分享个人的使用体验和一些坑。如需体验腾讯位置服务,可从以下专属邀请链接进入:https://lbs.qq.com?lbs_invite=SVQ2FLS
微信小程序地图生态
小程序地图功能官方示例
可以看到分为Map组件、Map API、小程序插件、个性化地图和接口能力五个部分。总体来说整个生态已经比较完善,基础功能已经具备,但是功能并不齐全。当然这需要一个迭代的过程,不可能短期内和web端、移动端的服务一样齐全。下面我主要从个人使用角度来展开介绍五个部分。
Map组件
Map组件分为六类:地图显示、地图视野控制、地图控件、标注点、覆盖物、触发事件。
这里着重讲下几个不足:
- 缺乏地图缩放控件
- 标注(label)和气泡窗口(callout)的区分度不足
- 文字和图标居中难以实现
- 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有以下几个:
- MapContext.addCustomLayer
- MapContext.addGroundOverlay
- MapContext.fromScreenLocation
- MapContext.initMarkerCluster
- MapContext.moveAlong
- MapContext.on
- MapContext.MapContext.openMapApp
- MapContext.removeCustomLayer
- MapContext.removeGroundOverlay
- MapContext.removeMarkers
- MapContext.toScreenLocation
- MapContext.translateMarker
- MapContext.updateGroundOverlay
比较吸引我的是点聚合功能(MarkerCluster)。我看了下是2.13.1开始支持的,是2020.9.7,而我自己实现的前端点聚合功能正好是2020.10.3,当时没有注意到官方已经实现了这个功能,哈哈。这里贴一个自己做的点聚合功能的帖子链接
此外,api提供了轨迹动画(translateMarker),也是比较有趣的点。
小程序插件
示例提供了三个插件:路线规划、地图选点和地铁图。我自己用过路线规划插件,使用起来也十分方便。就是有个缺点:插件版本更新之后需要自己在代码中更新,不能自动更新。
个性化地图
个性化地图算是比较常见的一种地图服务了。因为目前地图渲染很多都是基于矢量数据,加一个样式配置文件就可以自定义地图样式,非常好推广,并且有实用价值。配出一张吸引人、突出重点的地图是非常难的,需要一定的经验,以及不断地尝试(本人也画过图,所以深有体会)。
只需要到腾讯位置服务中选择或者自定义样式,用layer-style就可以在小程序中展示个性化地图,并且已经支持动态切换样式。
接口能力
提供了逆地址解析和地点搜索。比较少,我相信以后会开放更多接口能力。
案例
我以自己开发的一款小程序——约球online来分解地图相关的功能。小程序码如下:
简介
这是一款基于地图的,专为篮球爱好者提供的实时约球小程序。
功能
整个小程序分“附近”和“我的”两个页面。
附近里分“球友”、“球场”、“广播”三个子页面,都是以地图为载体,在上面叠加不同的目标元素。如图
我的页面是辅助功能模块,如图
从以上案例可以看出,微信小程序的地图生态,是可以支撑开发者产生无穷无尽的新点子的。所有与地理有关联的场景,都可以借由地图来实现数据可视化。因此,地图是非常重要的基础功能。
结语
微信小程序由于其开发的便捷性以及便于传播,大量的app都已经开发出相应的小程序版本。整体来看,微信小程序的地图功能虽然可以满足小程序场景的大部分需求,但还不够完善。开发者在地图功能开发过程中,容易碰到一些web前端少见的bug,而官方修复bug效率又相对较低,容易丧失开发热情。另一方面,微信小程序的地图组件性能上也存在一定的缺陷,特别是应对地理大数据时的表现,还有很大的优化空间。当然,地图这种基础功能,始终是需要融入新技术,来进行性能优化以及技术创新的,这个过程不会停滞。
总体而言,微信小程序的地图生态正在逐步完善。