微信小程序获取定位、通过地点文本获取经纬度进行导航

您所在的位置:网站首页 输入经纬度定位的 微信小程序获取定位、通过地点文本获取经纬度进行导航

微信小程序获取定位、通过地点文本获取经纬度进行导航

2024-07-12 19:02| 来源: 网络整理| 查看: 265

近期有个需求为进入小程序获取到用户定位、并且通过搜索地址查询经纬度进行导航的需求,自己尝试了一下结果如下

目录

一、全局配置

requiredPrivateInfos:全局配置 | 微信开放文档

二、接入腾讯位置服务sdk

三、权限设置

四、地理位置方法

1、wx.getLocation(需要获取权限)

(1)点击弹起授权窗口

(1-1)允许状态

(1-2)拒绝状态(自己写的弹框)

2、wx.chooseLocation (需要权限)

 3、wx.openLocation

 4、wx.choosePoi

 五、腾讯位置服务

1、search

 2、getSuggestion

 3、reverseGeocoder(可配合wx.getLocation做定位解析)

 4、geocoder

5、其他接口

 六、完整代码

1、wxml

2、js

3、wxss

4、json

5、弹框组件参考博文

一、全局配置 requiredPrivateInfos:全局配置 | 微信开放文档

申明需要使用的地理位置相关接口,类型为数组。目前支持以下项目:

getFuzzyLocation: 获取模糊地理位置getLocation: 获取精确地理位置onLocationChange: 监听试试地理位置变化事件startLocationUpdate: 接收位置消息(前台)startLocationUpdateBackground: 接收位置消息(前后台)chooseLocation: 打开地图选择位置choosePoi: 打开 POI 列表选择位置chooseAddress: 获取用户地址信息

如:app.json

{ "pages": ["pages/index/index"], "requiredPrivateInfos": [ "getLocation", "onLocationChange", "startLocationUpdateBackground", "chooseAddress", "chooseLocation", "choosePoi" ] }

注:若使用以上接口,均需在小程序管理后台,「开发」-「开发管理」-「接口设置」中自助开通该接口权限。

二、接入腾讯位置服务sdk

文档地址:微信小程序JavaScript SDK | 腾讯位置服务

根据步骤注册,申请密钥

引入sdk.js文件

微信公众平台-开发-开发管理-开发设置配置域名https://apis.map.qq.com

三、权限设置

 微信公众平台-开发-开发管理-接口设置 去申请权限

四、地理位置方法 1、wx.getLocation(需要获取权限)

功能:获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。

地址:wx.getLocation(Object object) | 微信开放文档

(1)点击弹起授权窗口

(1-1)允许状态

成功获取定位城市

(1-2)拒绝状态(自己写的弹框)

2、wx.chooseLocation (需要权限)

功能:打开地图选择位置

地址: wx.chooseLocation(Object object) | 微信开放文档

 3、wx.openLocation

功能:使用微信内置地图查看位置

地址:wx.openLocation(Object object) | 微信开放文档

 

 4、wx.choosePoi

功能:打开 POI 列表选择位置,支持模糊定位(精确到市)和精确定位混选。

地址:wx.choosePoi(Object object) | 微信开放文档

开发助手不支持调试

 五、腾讯位置服务 1、search

功能:地点搜索,搜索周边poi,比如:“酒店” “餐饮” “娱乐” “学校” 等等

地址:微信小程序JavaScript SDK | 腾讯位置服务

 2、getSuggestion

功能: 用于获取输入关键字的补完与提示,帮助用户快速输入

地址:微信小程序JavaScript SDK | 腾讯位置服务

返回结果 

 3、reverseGeocoder(可配合wx.getLocation做定位解析)

功能: 本接口提供由坐标到坐标所在位置的文字描述的转换,输入坐标返回地理位置信息和附近poi列表。

地址:微信小程序JavaScript SDK | 腾讯位置服务

拿到定位的经纬度做定位解析处理 拿到当前位置

 4、geocoder

功能:提供由地址描述到所述位置坐标的转换,与逆地址解析reverseGeocoder()的过程正好相反。

微信小程序JavaScript SDK | 腾讯位置服务

通过传入名称去查询经纬度从而进行导航处理

5、其他接口

微信小程序JavaScript SDK | 腾讯位置服务

 六、完整代码 1、wxml 点击获取定位城市


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3