网站开发工程师,win7优化软件,wordpress外网打开慢,html5手机网站 源码目录
1.配置位置权限
2.获取当前自身经纬度
3. 请求接口拿到返回经纬
4. 循环取每一项的经纬
5.如何判断是否打开了定位权限
6.进行距离计算操作
7.运行效果
8.完整代码 首先在使用小程序时#xff0c;请求的接口一定要去配置合法域名#xff0c;才能够进行接下来…
目录
1.配置位置权限
2.获取当前自身经纬度
3. 请求接口拿到返回经纬
4. 循环取每一项的经纬
5.如何判断是否打开了定位权限
6.进行距离计算操作
7.运行效果
8.完整代码 首先在使用小程序时请求的接口一定要去配置合法域名才能够进行接下来的操作。 1.配置位置权限
在app.json中添加如下代码 permission: {scope.userLocation: {desc: 你的位置信息将用于小程序位置接口的效果展示},}
2.获取当前自身经纬度
我们通过wx.getLocation这个api进行获取 wx.getLocation({type: gcj02,success(res) {that.setData({currentLatitude: res.latitude,currentLongitude: res.longitude});
})
在这里我们使用了变量来存放当前经纬度并且使用that.setData({})方法来赋值因为this的指向可能不明确配置如下 data: {currentLatitude:,currentLongitude:,
}onLoad(options) {let that this;
} 除了gcj02还有以下几种地理位置坐标系类型可以选择 wgs84表示使用WGS84坐标系也是全球卫星定位系统GPS所采用的坐标系。bd09表示使用百度坐标系在国内常用的一种坐标系适用于百度地图。bd09ll表示使用百度经纬度坐标系与bd09相似但在经度上更接近真实的经度值。 3. 请求接口拿到返回经纬
wx.request({url: 自己所使用的接口,method: POST,data: {},success: function(res) {console.log(res);that.setData({list: res.data.data.list});
}
})
上述代码呢list是我在data中的一个变量用来存放我包含经纬度数据的数组声明方式为list[]
4. 循环取每一项的经纬 list数据格式如下 for (let i 0; i that.data.list.length; i) {let item that.data.list[i];let lat parseFloat(item.latitude);let lon parseFloat(item.longitude);}that.setData({list: that.data.list});
将item.latitude和item.longitude转换为浮点数parseFloat()的目的是将字符串转换为数值型数据。这是因为经纬度通常以字符串的形式存储在进行距离计算等数值操作时需要将其转换为数值类型进行计算。通过使用parseFloat()函数可以将字符串解析成浮点数以便后续的数值计算。
5.如何判断是否打开了定位权限 在每一次打开此页面的时候都进行一次权限排查如果没有打开定位权限则会调起设置打开权限
checkLocationPermission() {let that this;wx.getSetting({success(res) {if (!res.authSetting[scope.userLocation]) {wx.showModal({title: 提示,content: 您还没有启用定位权限是否前往设置开启,success(res) {if (res.confirm) {// User confirmed opening settingswx.openSetting({success(res) {if (res.authSetting[scope.userLocation]) {// User granted location permission in settingsthat.onLoad(); // Reload the page to fetch data with location permission} else {// User did not grant location permission in settingswx.showToast({title: 您还未开启定位权限,icon: none});}}});} else if (res.cancel) {console.log(res.cancel);// User canceled opening settingswx.showToast({title: 您还未开启定位权限,icon: none});}}});}}});},
因为此代码是排查权限信息所以单独写了个函数你可以选择在onshow或者onload中调用 onShow() {this.checkLocationPermission();},
6.进行距离计算操作 getDistance: function(lat1, lon1, lat2, lon2) {var R 6371;var dLat (lat2 - lat1) * Math.PI / 180;var dLon (lon2 - lon1) * Math.PI / 180;var a Math.sin(dLat / 2) * Math.sin(dLat / 2) Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *Math.sin(dLon / 2) * Math.sin(dLon / 2);var c 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));var distance R * c; return distance.toFixed(2);}, 详解代码 var R 6371;定义地球的半径单位为公里。这是用于计算两点间距离的基准。 var dLat (lat2 - lat1) * Math.PI / 180;计算两点纬度差值并将其转换为弧度值。 var dLon (lon2 - lon1) * Math.PI / 180;计算两点经度差值并将其转换为弧度值。 var a Math.sin(dLat / 2) * Math.sin(dLat / 2) Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);根据Haversine公式计算两点间的距离。 Math.sin(dLat / 2) * Math.sin(dLat / 2)计算纬度差值的一半的正弦平方。Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180)计算两点纬度的余弦乘积。Math.sin(dLon / 2) * Math.sin(dLon / 2)计算经度差值的一半的正弦平方。将上述三个部分相加得到a的值表示两点间的角距离。 var c 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));根据球面三角学公式计算角距离对应的弧长。 Math.sqrt(a)计算a的平方根。Math.sqrt(1 - a)计算1 - a的平方根。Math.atan2()计算给定坐标的反正切值。 var distance R * c;将弧长乘以地球半径得到两点间的直线距离单位为公里。 return distance.toFixed(2);返回计算得到的距离并将其保留两位小数。 最后需要调用函数到接口操作中上述的for循环
for (let i 0; i that.data.list.length; i) {let item that.data.list[i];let lat parseFloat(item.latitude);let lon parseFloat(item.longitude);let distance that.getDistance(that.data.currentLatitude, that.data.currentLongitude, lat, lon);item.distance distance;}that.setData({list: that.data.list});
7.运行效果 8.完整代码
Page({/*** 页面的初始数据*/data: {list:[],currentLatitude:,currentLongitude:,},/*** 生命周期函数--监听页面加载*/handleImageError(e){onLoad(options) {let that this;wx.getLocation({type: gcj02,success(res) {that.setData({currentLatitude: res.latitude,currentLongitude: res.longitude});wx.request({url: ,method: POST,data: {},success: function(res) {console.log(res);that.setData({list: res.data.data.list});for (let i 0; i that.data.list.length; i) {let item that.data.list[i];let lat parseFloat(item.latitude);let lon parseFloat(item.longitude);let distance that.getDistance(that.data.currentLatitude, that.data.currentLongitude, lat, lon);item.distance distance;}that.setData({list: that.data.list});},});},fail(res) {wx.showModal({title: 提示,content: 您还没有启用定位权限是否前往设置开启,success(res) {if (res.confirm) {wx.openSetting({success(res) {if (res.authSetting[scope.userLocation]) {that.onLoad(options); } else {wx.showToast({title: 您还未开启定位权限,icon: none});}}});} else if (res.cancel) {console.log(res.cancel);wx.showToast({title: 您还未开启定位权限,icon: none});}}});}});},onShow() {this.checkLocationPermission();},checkLocationPermission() {let that this;wx.getSetting({success(res) {if (!res.authSetting[scope.userLocation]) {wx.showModal({title: 提示,content: 您还没有启用定位权限是否前往设置开启,success(res) {if (res.confirm) {wx.openSetting({success(res) {if (res.authSetting[scope.userLocation]) {that.onLoad(); } else {wx.showToast({title: 您还未开启定位权限,icon: none});}}});} else if (res.cancel) {console.log(res.cancel);wx.showToast({title: 您还未开启定位权限,icon: none});}}});}}});},getDistance: function(lat1, lon1, lat2, lon2) {var R 6371; var dLat (lat2 - lat1) * Math.PI / 180;var dLon (lon2 - lon1) * Math.PI / 180;var a Math.sin(dLat / 2) * Math.sin(dLat / 2) Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *Math.sin(dLon / 2) * Math.sin(dLon / 2);var c 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));var distance R * c;return distance.toFixed(2);},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
}) 微信小程序如何利用接口返回经纬计算实际位置并且进行导航功能【下】https://blog.csdn.net/m0_71966801/article/details/134084525?spm1001.2014.3001.5502
