「腾讯地图」小程序插件
上期,我们在《「腾讯视频」小程序插件》一文中介绍了「腾讯视频」小程序插件的意义、使用场景以及使用方法。
今天我们会与大家分享一款同样优秀的小程序插件——「腾讯地图」插件,从使用场景到使用方法,都将作出详细的介绍。
「腾讯地图」插件能做什么?
顾名思义,「腾讯地图」插件由腾讯地图官方出品,旨在为开发者提供简单的路线多方案规划服务,可在插件中显示指定位置间的路线方案,支持驾车、公交、步行的路线规划能力及 ETA 等基础路线信息。
如果你想像「腾讯地图+」小程序一样实现地图的基础功能,使用「腾讯地图」插件是你的最佳选择。
作为首批推出的小程序插件,「腾讯地图」插件经过了多个版本的优化,从最初的显示目标位置信息以及提供附近地图功能,到现在已经支持路线规划等能力,地图的功能几乎已经全部配备齐全。
「腾讯地图」插件的使用场景
场景一:收到小程序的婚礼请柬,但是请柬上的地址找不到?怎么办?
如果你开发的是请柬邀请类的小程序,就会遇到上述场景。在传统开发模式中,引入完整的地图选点、路线规划组件,开发成本非常高,更多开发者选择让用户直接输入文字地址进行展示,以此作为降低开发成本的妥协方案。这样的设计不可点击,更没有路线规划的能力,用户还需手动输入去查询地址和交通路线。
但如果开发者选择使用腾讯地图提供的同名小程序插件,开发成本将大幅降低,用户体验也能直线上升。我们在这里以婚庆请柬小程序为例进行说明:
用户在编辑请柬小程序的过程中,提前设置好婚礼举办地点;
当婚礼宾客收到请柬,点击地点,「腾讯地图」插件就能根据其宾客当前位置和目的地坐标,自动生成精准的导航路线。
场景二:会议服务小帮手——提前了解参会路线
与会者应该如何从高铁站、机场、火车站前往会议地点,一直都是各类会议邀请的必备内容。但长期以来,此类信息都习惯以纯文字形式进行发布,体验上存在不便理解、记忆难的问题。
如果小程序能够使用「腾讯地图」插件,这类场景的体验将发生质的改变: 会议组织方在小程序中提前设置多组起终点(如:机场 - 会议中心、高铁站 - 会议中心),与会者收到会议邀请后点击指定线路,就能在地图插件中查看到精确的参会路线。
这样是不是比枯燥的文字多了几分智能呢?
如何接入「腾讯地图」插件?
「腾讯地图」的功能强大,使用起来却十分简单:
**1.申请使用插件。**在「小程序管理后台 - 设置 - 第三方服务 - 插件管理」中查找插件名称「腾讯地图」 (目前最新版本:1.0.6,appid:wx5bc2ac602a747594),并申请使用。
2.引入插件代码后修改配置文件 JSON:
{"usingComponents": {"map-route": "plugin://myPlugin/mapRoute"}}
复制代码
3.使用地图插件。在相应的 WXML 文件中添加以下标签:
<map-route route-info="{{routeInfo}}"></map-route>
复制代码
4.最后,按需求在 JS 文件中处理传入插件数据,数据包括:起点,终点经纬度及名称,路线算路方式,封装在 routeInfo 结构中:
let plugin = requirePlugin("myPlugin")let routeInfo = {startLat: 39.90469, // 起点纬度 选填startLng: 116.40717, // 起点经度 选填startName: "我的位置", // 起点名称 选填endLat: 39.94055, // 终点纬度必传endLng :116.43207, // 终点经度 必传endName:"来福士购物中心", // 终点名称 必传mode:"car" //算路方式 选填}Page({data: {routeInfo: routeInfo}
})
复制代码
参数说明:
起点:不填写或 startName="我的位置" 或 startName="当前位置" 或 startName="currentLocation" 则插件会获取当前的定位位置作为起点位置发起算路,若正确填写起点信息,则以传入的起点信息发起算路。
终点:必传参数,不正确传入则不会发起算路或者算路失败。
算路方式:
mode,目前支持三种算路方式,分别是:驾车(car),公交(bus),步行(walk);不传则默认发起驾车算路。
注意:数据要在 data 中初始化,不要在 onLoad 中直接 setData,因为 onLoad 中直接 setData,properties 的 routeInfo 的 observer: function (newVal, oldVal),newVal 接收不到参数,导致参数报错,之后可以通过 bind 其他事件 setData 更新 routeInfo 达到变更起终点参数的效果。
「腾讯地图」插件使用效果图
如果你想了解更多「腾讯地图」插件详情,欢迎访问开发者社区插件版块相应页面(建议电脑访问):
? developers.weixin.qq.com/community/d…
内容来自:微信开放社区《小程序·小故事》栏目
原作者:熊明钧
任何问题,欢迎前往微信开放社区:developers.weixin.qq.com
了解更多微信小程序开发者内容,欢迎扫码关注微信公众号-微信极客WeGeek
「腾讯地图」小程序插件相关推荐
- 「腾讯地图」微信小程序插件:提供简单的路线多方案规划服务
上期,我们在<「腾讯视频」微信小程序插件介绍>一文中介绍了「腾讯视频」小程序插件的意义.使用场景以及使用方法. 今天我们会与大家分享一款同样优秀的小程序插件--「腾讯地图」插件,从使用场景 ...
- 「极点日历」小程序插件
上期,我们在<「wxParser」小程序插件>一文中介绍了知晓云团队出品的「wxParser」小程序插件,对其意义.作用以及应用作出了说明.而在此之前,我们还介绍过「腾讯地图」.「腾讯视频 ...
- 「微信同声传译」小程序插件:快速实现语音转文字、文本翻译、语音合成等能力...
上期,我们在<「医院 LBS 位置服务」插件:输出LBS室内位置能力,为改善就医服务提供解决方案>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为 ...
- 「初探」小程序插件功能
「初探」小程序插件功能 3月13日,小程序发布了新功能-- 小程序插件.即,在小程序基础库 1.9.6 版本上,允许开发者开发插件,同时将插件提供给其它小程序使用.微信小程序在构建自己生态的征程上,又 ...
- 「微信同声传译」小程序插件
上期,我们在<「医院 LBS 位置服务」小程序插件>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为大家推荐的插件是「微信同声传译」,如果你想在小 ...
- 腾讯地图微信小程序JavaScript SDK
简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
- 「名度控股」小程序的社群裂变营销方法
所有开发小程序的客户,都希望自己的小程序可以一天为自己吸个几万粉丝,可是真正能做到的又有多少呢?上次说过小程序的一些推广方法,今天说一些小程序在社群营销中的几个主要方法或开发方向. 其实推动传播最有效 ...
- 「腾讯视频」微信小程序插件介绍
上期,我们在<从原理到应用,一文带你了解小程序插件能力>一文中介绍了小程序插件的意义.作用以及应用.今天开始,我们会每期与大家分享一款优秀的小程序插件,从使用场景到使用方法,都将作出详细的 ...
- 微信小程序插件引入,地铁图插件、地图选点插件、地图选点插件
如果用微信小程序插件需要开发者秘钥:申请秘钥 第一步:记住下面内容一定要写在app.json这个文件里 "plugins": {"subway": {" ...
- 小程序插件引入(地铁图/路线规划/地图选点/城市选择器)
小程序插件官方地址–腾讯 初始化 这边使用的是腾讯家的插件,所以我们要按照他家的要求一步一步来. 首先我们要申请一个key值(申请key值是去腾讯地图开发平台去找) 然后在小程序里面添加插件 (这2步 ...
最新文章
- 写入时复制(Copy-on-write)机制
- 随机森林和决策树区别_第六讲 决策树与随机森林
- UDP千兆以太网FPGA_verilog实现(一、知识搜集)
- mysql在linux下的安装_mysql在linux下的安装
- 阿里高级技术专家张建飞:深度剖析领域模型vs数据模型的用法
- 我的js函数库(持续更新)
- ios模拟器键盘不弹出
- tomcat ng mysql 集成_整合nginx,tomcat,mysql的安装与配置
- 串行通信(一):I2C
- 开启弹窗_【电脑优化】面对电脑开机“弹窗”雨,你也很无奈呀!
- oracle wm_concat(column)函数的使用
- PADS Layout 滴泪、敷铜和删除
- win10关闭计算机休眠,小编教您win10怎么关闭休眠 win10关闭系统休眠方法
- SQL语句实现增删改查(1)
- HTTP(超文本传输协议)详细解析
- 服务器30hz显示器240hz,液晶电视高达240Hz甚至480/960Hz的刷新率是怎么回事?
- 【031902238崔佳雪】
- 大学物理学(第5版)下(第14章)课后习题答案
- UGUI-ContentSizeFitter之最简单实现maxSize限制
- 【深度学习】步态识别-论文阅读:(T-PAMI-2021)综述:Deep Gait Recognition
热门文章
- java 枚举嵌套枚举_java – 如何使用枚举与分组和分组层次/嵌套
- flutter系列之flutter工程如何与android混编
- 仿百篮应用市场(已开源)
- Java基础---Java---网络编程---TCP的传输、客户端和服务端的互访、建立一个文本转换器、编写一个聊天程序
- 层次聚类 簇数_聚类(一):K-means、层次、DBSCAN、均值漂移、K-Means 与 KNN
- php增加html元素,使用php将appendChild($ element)添加到现有的html元素中
- 大一c语言期末课程总结,大一下学期期末自我总结
- ping,python实现批量ping包工具--小案例
- openfeign seata事务不回滚_Spring,你为何中止我的事务?
- 线程结束后会自动关闭_多线程学习之如何中断线程