港口定位项目开发笔记1·微信小程序端
作者:互联网
港口定位项目开发笔记1·微信小程序端
最近在和组员开发一个港口定位的项目,我目前主要负责微信小程序端实时获取人员位置的功能,在此写这个笔记既是为了帮助自己温故知新,也希望可以帮助到需要的码友
Demo1:手动点击按钮获取当前位置
index.wxml
<view class="longitude info">当前经度:{{locInfo.longitude}}</view>
<view class="latitude info">当前纬度:{{locInfo.latitude}}</view>
<view class="speed info">当前速度:{{locInfo.speed}}</view>
<view class="accuracy info">位置精度:{{locInfo.accuracy}}</view>
<button type="primary" bindtap="getLoca">获取当前位置</button>
index.wxss
.info{ border: 1px solid red; padding: 20rpx 20rpx; margin: 10rpx 10rpx; }
index.js
getLoca(){
const that = this;
wx.getLocation({
type: 'wgs84',
isHighAccuracy: true,
success (res) {
const latitude = res.latitude //纬度,范围为 -90~90,负数表示南纬
const longitude = res.longitude //经度,范围为 -180~180,负数表示西经
const speed = res.speed
const accuracy = res.accuracy //位置的精确度
that.setData({
locInfo:res
})
}
})
}
点击获取当前位置
在开发这个demo的过程也出现了下面的问题
获取位置时“提醒getLocation需求在app.json中声明permission字段”
在app.json文件中加入下面的代码即可.
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
使用wx.getLocation定位不准确问题
我在上边开发工具中获取的位置与我所在的位置偏差是很大的,这是因为我们使用开发工具定位模拟时使用的是IP定位,这在getgetLocation开发文档下也有提醒,改为真机调试即可
wx.getLocation开发文档
利用setData函数回调值问题
想要把获取的位置信息res回调到前台页面,在代码中使用
this.setData({
locInfo:res
})
无法实现回调
这是因为success返回的是闭包,所以我们需要在其中加入一行语句
const that = this;
然后在下面使用
that.setData({
locInfo:res
})
即可实现回调
标签:定位,getLocation,const,locInfo,微信,位置,笔记,获取,res 来源: https://blog.csdn.net/zjlwdqca/article/details/112116156