赞
踩
1.只获取定位方法:控制台实现
https://blog.csdn.net/weixin_44593720/article/details/1089975822
2.在wxml页面显示经纬度以及城市位置信息:
微信小程序-获取用户位置(经纬度+所在城市)_微信小程序根据经纬度获取详细地址_Mocode的博客-CSDN博客
3.获取当前定位与指定位置的差值:(方法一可用)
3分钟搞定微信小程序类美团用户商家距离计算 | 微信开放社区
4.坐标拾取器:
5.计算当前距离到指定距离的直线距离:(首先要实现第二步的配置信息)
①js代码:
- Page({
- data:{
- s:''
- },
- onLoad: function() {
- var _this = this;
- _this.findXy() //查询用户与商家的距离
- },
-
- findXy() { //获取用户的经纬度
- var _this = this
- wx.getLocation({
- type: 'gcj02',
- success(res) {
- distance : _this.getDistance(res.latitude, res.longitude, 23.152354,113.341697)
- }
- })
- },
-
- Rad: function(d) { //根据经纬度判断距离
- return d * Math.PI / 180.0;
- },
- getDistance: function(lat1, lng1, lat2, lng2) {
- // lat1用户的纬度
- // lng1用户的经度
- // lat2商家的纬度
- // lng2商家的经度
- var radLat1 = this.Rad(lat1);
- var radLat2 = this.Rad(lat2);
- var a = radLat1 - radLat2;
- var b = this.Rad(lng1) - this.Rad(lng2);
- var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
- s = s * 6378.137;
- s = Math.round(s * 10000) / 10000;
- s = s.toFixed(2) + '公里' //保留两位小数
- // console.log('经纬度计算的距离:' + s)
- console.log('您距离学校中心的距离:' + s)
- //回调渲染到前端页面
- this.setData({
- s:s
- })
- return s
- },
- })
![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)
②wxml代码:
<view bind:tap="getDistance" style="background-color: rgb(222, 221, 135);height: 100px;font-size: 30px;">您当前距离学校中心的距离为:{{s}}</view>
③app.json中:
- "permission": {
- "scope.userLocation": {
- "desc": "你的位置信息将用于小程序位置接口的效果展示"
- }
- },
6.如果在项目中不显示内容,可以在app.json文件中加入以下代码进行授权:
主要是对“getLocation”进行授权
- "requiredPrivateInfos": [
- "getLocation",
- "onLocationChange",
- "startLocationUpdateBackground",
- "chooseAddress",
- "chooseLocation",
- "choosePoi"
- ]
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。