微信小程序获取当前位置并根据经纬度跳转地图导航

方式一

  <view><map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" show-location></map></view>

  data = {//当前定位位置latitude: '',longitude: '',
}methods = {
//这个函数是一开始点击事件触发的：async authorization() {let self = thistry {await this.getWxLocation() //等待} catch (error) {wx.showModal({title: '温馨提示',content:'获取权限失败，需要获取您的地理位置才能为您提供更好的服务！是否授权获取地理位置？',success: function(res) {self.toSetting()},fail: function(res) {},})return}},
}getWxLocation() {wx.showLoading({title: '定位中...',mask: true,})return new Promise((resolve, reject) => {let _locationChangeFn = (res) => {console.log('location change', res)// Storage.set('userLocation', res)this.latitude = res.latitudethis.longitude = res.longitudewx.stopLocationUpdate(_locationChangeFn); // 关闭监听 不关闭监听的话，有时获取位置时会非常慢wx.hideLoading()wx.offLocationChange(_locationChangeFn)}wx.startLocationUpdate({success: (res) => {console.log(res, 'startLocationUpdate')wx.onLocationChange(_locationChangeFn)resolve()},fail: (err) => {console.log('获取当前位置失败', err)wx.hideLoading()reject()},})// 可以指定经纬度30.333882，120.115576wx.openLocation({latitude: Number(this.storeInfo.latitude), //要去的纬度，这里需要数字类型不然会报错longitude: Number(this.storeInfo.longitude), //要去的经度address:this.storeInfo.province +this.storeInfo.city +this.storeInfo.district +this.storeInfo.address, //要去的详细地址name: this.storeInfo.name, //要去的建筑名称})})}toSetting() {let self = thiswx.openSetting({success(res) {console.log(res)if (res.authSetting['scope.userLocation']) {// res.authSetting["scope.userLocation"]为trueb表示用户已同意获得定位信息，此时调用getlocation可以拿到信息self.authorization()}},})}

思路主要是这样的：首先事件触发authorization函数，等待getWxLocation函数里面的结果处理，看文档知道在调用onLocationChange前先调用startLocationUpdate

等待startLocationUpdate的成功回调打印一下内容，说明开启小程序进入前台时接收位置消息成功了

成功之后，在回调里面就可以调用onLocationChange去监听实时地理位置变化（注意：目前只有真机开启调试模式打印才能看到返回的坐标等参数，电脑调试暂时不行）
获取之后要记得关闭实时监听wx.offLocationChange(_locationChangeFn)，不然就会一直去获取坐标，可能会导致手机耗电严重。
如果是startLocationUpdate是失败回调的话：就去调用wx.openSetting申请用户的定位权限（scope.userLocation）

微信小程序获取当前位置并根据经纬度跳转地图导航相关推荐

uniapp微信小程序获取当前位置信息、经纬度转换、导航地图实现
1.调用接口,官网文档是这样写的 uni.getLocation({type: 'wgs84',success: function (res) {console.log('当前位置的经度:' + re ...
微信小程序获取当前位置和城市名
这篇文章主要介绍了微信小程序获取当前位置和城市名的思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下目录一.授权并获取经纬度腾讯地图API **简介** Hello world! 一. ...
微信小程序-获取用户位置（经纬度+所在城市）
微信小程序-获取用户位置(经纬度+所在城市) 文章目录微信小程序-获取用户位置(经纬度+所在城市) 一.目标二.实现思路三.实现步骤 3.1 用到的接口函数 3.2 具体步骤 3.2.1 创建界 ...
微信小程序获取当前位置及地图选点功能
标题小程序获取当前位置----逆地址解析----地图选点实现功能:小程序首页定位当前城市类似于某宝: 某团: 获取当前位置: 在小程序首页创建getLocation函数并在onLoad调用首先需 ...
微信小程序获取用户位置信息并显示到地图上
1.配置地理位置用途说明在app.json中的大括号内输入 "permission": {"scope.userLocation": {"desc& ...
微信小程序获取当前位置的省、市、区等信息
出了趟差,回来的机票路过南京禄口机场转机,结果遇到疫情,被隔离了.刚好趁这个机会把最近搞的一个小项目记录一下,用到微信小程序需要获取当前用户位置的省市区等信息,虽然只有几行代码,但当时查阅了很多大佬的 ...
微信小程序获取用户位置信息
1.在 app.json 里面增加 permission 属性配置小程序配置 | 微信开放文档 "permission": {"scope.userLocation&qu ...
微信小程序—获取用户位置信息
一.使用 wx.getLocation 获取经纬度信息 1.1 在 app.json 中加入如下配置 "permission": {"scope.userLocation ...
微信小程序自带地图_微信小程序获取当前位置并调用微信内置地图打开
图示: index.wxml 定位 index.js //index.js //获取应用实例 const app = getApp() Page({ data: { }, map:function() ...

微信小程序获取当前位置并根据经纬度跳转地图导航

微信小程序获取当前位置并根据经纬度跳转地图导航相关推荐

最新文章

热门文章