小程序下的地图还能这么玩,你知道吗?

摘要:
同时,我们也始终在与微信紧密配合,不断夯实丰富我们在小程序下的地图能力,升级开发者的“工具箱”和“武器库”,满足小程序开发者在不同业务场景下对地图能力的需求。目前此功能可以完美解决该问题,用户可以直接在自己的小程序拉起地图App并展现从起点至终点的路线规划。腾讯位置服务会持续打磨好产品,开放更多小程序场景下的地图能力,为开发者提供强有力的支持。

​近几年来小程序生态的飞速发展大家都有目共睹,随着小程序与线下场景的结合日益紧密,地图类功能已经成为越来越多小程序的“标配”。

腾讯位置服务一直在为微信和小程序提供底层的地图支持。同时,我们也始终在与微信紧密配合,不断夯实丰富我们在小程序下的地图能力,升级开发者的“工具箱”和“武器库”, 满足小程序开发者在不同业务场景下对地图能力的需求。

小程序下的地图还能这么玩,你知道吗?第1张

Map API功能全新升级

近期小程序在Map API中新增多项功能,其中包含moveAlong、initMarkerCluster等。

moveAlong

moveAlong 帮助开发者实现指定路径移动 Marker,并且Marker朝向可以配合路线朝向旋转的效果,主要应用于轨迹回放、出行司乘同显等场景。若动画进行中,对同一 marker 再次调用 moveAlong 方法,前一次的动画将被打断。同时还可以通过设置平滑移动的时间 duration,实现轨迹回放快慢的设置。

小车平移

initMarkerCluster

initMarkerCluster 即点聚合能力,当地图上需要展示的 marker 过多,可能会导致界面上 marker 出现压盖,展示不全,并导致整体性能变差、用户使用卡顿的情况。针对此类问题,推出点聚合能力,将大量Maker 通过聚合的方式进行展示。比如大型连锁店场景,当用户查找区域甚至是一座城市的某品牌连锁店时,当地图放大层级总览全城时,点聚合能力可以使地图上的点位自动相邻合并达到最佳展示效果。

点聚合能力

openMapApp

openMapApp 用来直接调起用户安装的地图App列表,类似微信发送位置时的场景,实现用户跳转其他地图App完成路线规划或导航的需求。以往的使用场景中,用户无法直接通过小程序跳转地图APP,需要先前往微信选点再跳转app,不仅步骤繁琐同时跳转到地图App时并没有携带起终点位置,根本无法实现路线规划。目前此功能可以完美解决该问题,用户可以直接在自己的小程序拉起地图App并展现从起点至终点的路线规划。

小程序—>调起地图App列表

fromScreenLocation 与 toScreenLocation

小程序提供一组新的api,帮助开发者实现屏幕坐标和经纬度的互相转换。fromScreenLocation可以获取屏幕上的点对应的经纬度,toScreenLocation可以获取经纬度对应的屏幕坐标。

includePoints

includePoints 即缩放视野展示所有POI。当地图存在多个 POI 点位、地图只显示了部分点位时,通过 includePoints 能力即可完成地图视野级别自动缩放包含所有点位的效果,并且可以通过 padding 设置坐标点形成的矩形边缘到地图边缘的距离,达到最佳显示效果。

缩放视野展示所有POI

Map组件优化

地图视野控制

小程序Map组件的地图视野控制支持缩放、俯仰、3D楼快等控件,还支持通过向左向右、放大缩小等传统手势控制地图视野变化。同时近期新增的“缩放级别”功能,可以控制 3-20 级别的视野缩放范围,避免用户过大或过小的改变地图视野导致地图展示效果不佳,影响用户体验。

缩放视野级别

覆盖物-彩虹线

新增了彩虹线能力。在路线规划场景,开发者可以通过运用该能力反馈道路拥堵情况,红色拥堵、黄色缓行、绿色畅通。彩虹线作为线条属性与实线、虚线三者相互冲突。

彩虹线

地图检索全面上架

要想搭建完整的LBS应用,除了地图展示功能外还离不开地图检索能力。我们在微信开放社区的服务平台上线了一系列服务,包含4个POI数据类(逆地址解析、地址解析、地点搜索、关键词输入提示)、2个路线规划类(驾车路线规划、步行路线规划)、1个坐标工具类(坐标转换),覆盖了绝大部分地图应用场景。

小程序下的地图还能这么玩,你知道吗?第8张

考虑到众多开发者有拓展微信小程序海外市场的需求,我们也在腾讯位置服务官网提供了海外位置接口服务,包含了地图、定位、地址解析、逆地址解析、地点搜索、周边搜索、周边推荐、路线规划八种海外服务能力。开发者一次接入即可享受海内外地图无缝切换的极致体验,做到“一次接入、通达全球”。

小程序下的地图还能这么玩,你知道吗?第9张

路线规划插件优化升级

路线规划插件近期迭代了导航、实时公交、主题色等多项能力。

导航: 如果说路线规划是为了“看路线”,那么导航就是为了“用路线”。新增的导航能力完善了路线规划只能看不能用的尴尬地位,打通了输入目的地—>选择最优路线—>跳转导航的常规驾车流程,用户点击导航可以拉起地图App,实现小程序与地图App的无缝链接。

支持导航

实时公交: 目前在腾讯位置服务对外开放的产品中,只有路线规划插件提供了实时公交能力。开发者可以帮助用户了解最近一辆公交到站时间和所剩站数。实时公交提升了插件在公共出行领域的服务能力,让用户不再“等公交”。

支持实时公交

主题色: 开发者可以通过设置主题色的方式,整体更改插件中的字体、线条、按钮、色块等颜色。更改后的插件风格能够完美融入开发者的小程序中,使其整体风格保持一致,再也不会因为插件颜色的突兀而降低用户体验感受。

默认主题 VS 自定义主题

个性化底图支持动态切换

个性化底图切换能力上线,可以实现在小程序内使用同一subkey,通过 layer-style(地图官网设置的样式 style 编号)属性选择不同的底图风格,并可以动态切换样式。比如白天使用浅色系地图,夜晚使用微信深色地图。以下面的Demo为例,可以实现四种style风格动态切换,style1-出行、style2-微信深色、style3-澹月、style4-玉露。

个性化底图动态切换

示例中心小程序 - 小程序地图开发的最佳助手

为了帮助小程序开发者更好的了解并且使用这些地图能力,我们专门开发了一个示例中心小程序,它有两大作用:

展示地图能力:针对小程序下所有地图相关能力分门别类,梳理出目录架构,逐个进行详细解释;同时每个能力都配有demo示例,让开发者能够体验实际效果,加深理解。

降低开发成本:针对每个demo示例,我们还提供了高质量的源代码,开发者点击首页的“查看源代码”即可跳转至GitHub。其中的文档目录是按照示例中心的结构展示,方便直接拷贝代码在本地进行调试,让开发者实现零成本开发。

对于这么一个贴心的小助手,赶快扫码下方的小程序码立即体验吧!

小程序下的地图还能这么玩,你知道吗?第14张

腾讯位置服务会持续打磨好产品,开放更多小程序场景下的地图能力,为开发者提供强有力的支持。我们为小程序开发者打造了包括从服务API、基础地图组件、插件、行业方案等在内的完整的产品能力矩阵,期待与150万+小程序开发者一起拥抱生态,见证繁荣!

小程序下的地图还能这么玩,你知道吗?第15张

免责声明:文章转载自《小程序下的地图还能这么玩,你知道吗?》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇JUC之StampedLock读写锁增强辅助类Django学习系列之django restframework下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

mpVue小程序全栈开发

1、微信小程序,mpVue和wepy的对比  2、  3、es6中关于数组的一些方法 1 <script> 2 let arr = [1,2,3,4] 3 // 遍历 4 arr.forEach(v => { 5 console.log(v) 6 })...

小程序框架之视图层 View

(1)视图层View 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language) 用于描述页面的结构。 WXS(WeiXin Script) 是小程序的一套脚本语言,结合WXML,可以构建出页面的结构。 WXSS(WeiXin Sty...

【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gcaufy 导语 Bugly 之前发了一篇关于微信小程序的开发经验分享(点击阅读),小伙伴们在公众账号后台问了很多关于小程序开发方面的问题,精神哥在查阅相关内容...

微信小程序嵌套h5页面,h5页面返回小程序,小程序和h5的页面和交互方法,h5点击分享小程序页面

相信大家在做小程序的时候有些需求会需要嵌套h5页面正常的h5页面嵌套很简单就是一个web-view然后放入h5链接就可以了 <web-view src="http://www.google.cn?id=1&type=2"/> 如果当前的h5页面需要分享直接点击分享是不能调用微信小程序分享的但是可以点击后跳转到小程序页面从小程序的方法中...

微信小程序 WePY 2 框架入门教程

WePY 2 的设计思想 非侵入式设计 WePY 2 运行于小程序之上,是对小程序原有能力的封装和优化,并不会对原有小程序框架有任何改动或者影响。 兼容原生代码 能够兼容原生代码,即部分页面为原生,部分页面为 WePY。同时做到无需任何改动即可引用现有原生开发的小程序组件。 基于小程序原生组件实现组件化开发 小程序原生组件在性能上相较之前有了很大的提升。...

我是如何学习小程序的

前段时间和大家一起分享了一篇关于学习方法内容《大牛与搬运工的差距——学习方法的力量》。我们将学习过程分成八步,并借鉴了敏捷开发的迭代思想,以达到自我迭代学习的效果。行胜于言,理论结合实践才是王道,所以本文我将基于前面的学习方法,分享我是如何学习微信小程序的。 关于小程序 小程序是继订阅号、服务号、企业号后,16年腾讯新推出的又一种开发能力。小程序无需下载安...