南京小程序开发,南京H5,南京公众号开发,南京网站建设,南京网站制作,南京网站设计,南京做网站,南京网站开发,南京网站建设公司,南京网站制作公司,南京网站设计公司
-->

电话:

400-885-7836

微信:

南京小程序开发,南京H5,南京公众号开发,南京网站建设,南京网站制作,南京网站设计,南京做网站,南京网站开发,南京网站建设公司,南京网站制作公司,南京网站设计公司

商务QQ:

923368187

南京小程序开发,南京H5,南京公众号开发,南京网站建设,南京网站制作,南京网站设计,南京做网站,南京网站开发,南京网站建设公司,南京网站制作公司,南京网站设计公司

联系我们

Slide
无需任何编程和设计经验,用户可在3分钟之内快速创建小程序,最快5分钟微信审核通过上线

操作步骤: 扫码登录 -> 创建店铺 -> 授权小程序 -> 选择适合的模板 -> 体验码体验 -> 发布小程序

当前位置:首页 > 微信小程序 > 腾讯位置服务 + 微信小程序

所有分类

腾讯位置服务 + 微信小程序

引言

1.1「腾讯位置服务」是什么?

立足生态,连接未来

腾讯位置服务平台依托庞大的数据生态,以定位、地图展示、地点搜索、路线规划、导航、室内图、海外图等位置服务能力和LBS大数据能力为基础,面向开发者提供方便、易用、高效的LBS服务产品。当前腾讯位置服务数据能力已覆盖10亿人的位置行为数据、日均超过600亿次的定位调用、每日支持1亿次位置检索。

1.2「腾讯位置服务」可应用的场景?

随着功能的日益完善,腾讯位置服务可适用的场景也越来越多,如 物流业务、智能出行、o2o业务、共享单车、运动健康、LBS游戏服务等行业均可见腾讯位置服务的身影。笔者也将通过此文展示下腾讯位置服务在 智能出行行业的应用与实践。

需求背景

自从2017年微信上线小程序以来,小程序已经迅速成长为一个巨大的生态,吸引各行各业的开发者或服务商参与其中。小程序与线下场景的结合也日益紧密,其中,乘车二维码微信小程序无疑让人们的出行服务变的更加简单、快捷。先乘车,后扣费,无论手机是否联网,是否有信号,都可以很顺畅的进行乘车。

2.2 完善「乘车二维码」微信小程序

有了最基本的「乘车二维码」功能对用户体验来说,还是远远不够的,为此,从用户体验的角度出发,我们逐渐新增了一些实用的功能,比如查询附近的公交信息、用户路线规划等。也正因为新增了这些实用性的功能,我们发现「乘车二维码」微信小程序在数据表现(如日活、留存、使用时长)方面更加出色了,「腾讯位置服务」也成为我们「乘车二维码」微信小程序内不可或缺的角色。

接下来,笔者将通过 公交地图、路线规划两个功能点更加详细的介绍「腾讯位置服务」中的微信小程序 Java SDK、微信小程序插件。

公交地图

3.1 效果预览

3.2 技术点分析

在上面的效果预览图中,我们不难发现,实现公交地图功能主要包含以下技术要点:

  • 获取用户当前位置信息
  • 通过坐标点获取附近公交信息
  • 地图展示、标注

3.3 技术点实现

3.3.1 获取用户当前位置信息

我们可以通过微信小程序官方提供的api:wx.getLocation,来获取用户的当前位置坐标点信息:

wx.getLocation({

type‘gcj02’,

success (res) {

const latitude = res.latitude

const longitude = res.longitude

}

})

这里我们将 type 指定为 gcj02 获取到的坐标点信息可在后续接口中直接使用,相对应的,如果将 type 指定为 wgs84,后续我们需要进一步进行坐标转换。

还有个需要注意的是,该接口需要经过用户授权同意才能调用,因此我们需要在 app.json 文件中新增相关配置:

// app.json

“permission”: {

“scope.userLocation”: {

“desc”“你的位置信息将用于查询公交信息”

}

}

3.3.2 获取附近公交信息

附近公交数据哪里来?

这里我们便用到了微信小程序原生LBS能力的最佳拍档– 微信小程序Java SDK。

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品。在此基础上,腾讯位置服务微信小程序Java SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务,让您的小程序更强大!

接下来笔者将展示如何通过微信小程序Java SDK获取附近公交的信息。

1. 开通「腾讯位置服务」:在微信小程序后台依次选择 开发->开发者工具->腾讯位置服务,然后点击开通按钮,按照提示为您的小程序开通「腾讯位置服务」

2. 申请开发者密钥(key):申请密钥(https://lbs.qq.com/dev/console/key/manage)

3. 安全域名设置:在在微信小程序后台依次选择设置->开发设置中设置request合法域名,添加 https://apis.map.qq.com

4. 下载微信小程序 Java SDK:微信小程序JavaSDK v1.2(http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip)

5. 小程序使用:

//index.js

// 引入 Java SDK 核心类

letQQMapWX = require‘../../libs/qqmap-wx-jssdk.js’);

letqqmapsdk;

Page({

function{

// 实例化API核心类

qqmapsdk = newQQMapWX({

key‘申请的key’

});

},

onShowfunction{

// 调用接口

qqmapsdk.search({

keyword‘公交车站’,

location‘28.636767,115.855820’,

filter‘category=公交站’,

successfunctionres{

console.log(res);

},

failfunctionres{

console.log(res);

},

completefunctionres{

console.log(res);

}

});

}

})

返回结果:

可以看到,我们已经拿到了我们想要的公交数据,接下来将公交数据在地图上标注展示出来。

3.3.3 地图展示、标注

公交信息的展示使用到了「腾讯位置服务」为小程序提供的 map 组件,我们需要将公交信息组装成 markers 从而绘制到地图组件上。

关于地图组件的具体使用可参考官方文档:map组件的使用(https://developers.weixin.qq.com/miniprogram/dev/component/map.html)

3.4 小结

可以看到,我们通过 微信小程序Java SDK可以很轻松的获取到附近的公交信息。当然, 微信小程序Java SDK的能力也远远不仅于此,它还提供很多实用性的功能满足多种使用场景:

方法 说明
search(options:Object) 地点搜索,搜索周边poi,比如:“酒店” “餐饮” “娱乐” “学校” 等等
getSuggestion(options:Object) 用于获取输入关键字的补完与提示,帮助用户快速输入
reverseGeocoder(options:Object) 提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表
geocoder(options:Object) 提供由地址描述到所述位置坐标的转换,与逆地址解析的过程正好相反
direction(options:Object) 提供驾车,步行,骑行,公交的路线规划能力
getCityList 获取全国城市列表数据
getDistrictByCityId(options:Object) 通过城市ID返回城市下的区县
calculateDistance(options:Object) 计算一个点到多点的步行、驾车距离

详细使用可参考官方文档:微信小程序Java SDK 使用方法(https://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html)

需要注意的是,每个key的每个服务接口的调用量都有日调用量:1万次/Key、并发数:5次/key/秒的限制,如若您的微信小程序使用量超出这个限制,可通过控制台->配额申请(https://lbs.qq.com/dev/console/quota/applyList)中免费申请你需要的配额。

路线规划

如果说,「乘车二维码」微信小程序让人们的出行变得更加简单、快捷。

那么,路线规划插件则为人们怎么出行提供了最优解。

4.1 效果预览

4.2 路线规划插件

腾讯位置服务路线规划插件 提供路线规划等功能,根据起终点,多种出行方式智能规划最佳出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里,实现路线规划功能。

可以看到,通过使用路线规划插件,我们可以很方便的在我们「乘车二维码」微信小程序内完成路线规划功能,接入步骤也较为简单,主要分为以下几步:

  1. 插件申请接入: 在微信小程序后台管理平台中,依次选择 设置->第三方服务->插件管理 里点击添加插件,搜索 腾讯位置服务路线规划 申请,审核通过后,小程序开发者可在小程序内使用该插件。
  2. 引入插件包:
  3. // app.json “plugins” : { “routePlan” : { “version” : “1.0.5” , “provider” : “wx50b5593e81dd937a” } } 设置定位授权: // app.json “permission” : { “scope.userLocation” : { “desc” : “你的位置信息将用于小程序定位” } }
  4. 使用插件: let key = ‘申请的key’ ; //使用在腾讯位置服务申请的key let referer = ” ; //调用插件的app的名称 let endPoint = JSON .stringify({ //终点 ‘name’ : ‘八一广场’ , ‘latitude’ : 28.673400 , ‘longitude’ : 115.904500 }); wx.navigateTo({ url : ‘plugin://routePlan/index?key=’ + key + ‘&referer=’ + referer + ‘&endPoint=’ + endPoint });

在集成路线规划插件后,进一步丰富了我们「乘车二维码」微信小程序的使用场景,现在,用户可以在不使用地图类App的情况下进行最优路线规划,躲避拥堵,方便又快捷。

4.3 小结

「腾讯位置服务」提供的微信小程序插件,可以说让微信小程序一步拥有地图功能,大大的减少了我们开发的工作量、提升用户体验、增加了小程序的使用场景。

目前,「腾讯位置服务」已经为我们提供了三款实用性插件:

  • 路线规划: 根据起点、终点,智能规划最佳出行路线,并支持多种出行方式。
  • 地铁图: 支持全国所有城市地铁线路静态展示、信息查询、线路检索及规划等功能。
  • 地图选点: 快速、准确地选择并确认自己的当前位置,并将相关位置信息回传给开发者。

具体可查看官方文档:微信小程序插件(https://lbs.qq.com/miniprogram_plugin/index.html)。

相信后续也会为我们提供更多功能的插件。

易企达10年行业沉淀!专业小程序、公众号H5、APP定制开发
拨打电话立享优惠

400-885-7836

点击获取报价

本文原地址:https://www.eqiday.com/331.html
郑重声明内容版权声明:除非注明,否则皆为本站原创文章。如有侵权联系进行删除!

无需任何编程和设计经验,用户可在10分钟之内快速创建小程序,所有功能免费!

操作步骤: 注册 -> 登录 -> 创建店铺 -> 授权小程序 -> 上传代码 -> 生成体验码体验 -> 发布小程序

免费制作小程序