微信小程序获取当前地图坐标，并测量指定地点距离
2024-05-22 11:32:05
获取当前坐标
wx.getLocation({type: 'gcj02',success: function (res) {console.log("当前坐标信息：", res) }
})
// 举个栗子验证一下distance方法的真实性和有效性标记坐标 当点击标记点时触发导航功能
markertap: function (e) {wx.openLocation({latitude: 39.915378,longitude: 116.403694,scale: 18,name: '天安门广场',address:'北京市东城区长安街'})
},测量两坐标点距离
distance: function (la1, lo1, la2, lo2) {var La1 = la1 * Math.PI / 180.0;var La2 = la2 * Math.PI / 180.0;var La3 = La1 - La2;var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));s = s * 6378.137;s = Math.round(s * 10000) / 10000;s = s.toFixed(2);return s;}使用
Page({/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;// 以北京故宫为例计算当前位置到其的距离，北京故宫坐标（116.403802, 39.915405）wx.getLocation({type: 'gcj02',success: function (res) {console.log("当前坐标信息：", res)var distance = that.distance(res.latitude, res.longitude,39.918034,116.415192);console.log("当前位置距离北京故宫：", distance, "千米")}})// 举个栗子验证一下distance方法的真实性和有效性// 北京故宫坐标（116.403802,39.915405），上海虹桥机场坐标(121.334421,31.200479),地图测距结果为1066.6±10var testdistance=that.distance(39.915405, 116.403802, 31.200479, 121.334421);//注意经纬度别混淆console.log("北京故宫-上海虹桥机场的距离为：",testdistance,"千米");//结果让人很满意},/*** @desc 由经纬度计算两点之间的距离，la为latitude缩写，lo为longitude* @param la1 第一个坐标点的纬度* @param lo1 第一个坐标点的经度* @param la2 第二个坐标点的纬度* @param lo2 第二个坐标点的经度* @return (int)s 返回距离(单位千米或公里)* @tips 注意经度和纬度参数别传反了，一般经度为0~180、纬度为0~90* 具体算法不做解释，有兴趣可以了解一下球面两点之间最短距离的计算方式*/distance: function (la1, lo1, la2, lo2) {var La1 = la1 * Math.PI / 180.0;var La2 = la2 * Math.PI / 180.0;var La3 = La1 - La2;var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));s = s * 6378.137;s = Math.round(s * 10000) / 10000;s = s.toFixed(2);return s;},
})综合应用（测试指定坐标到当前位置的距离）
页面代码
<button type="primary" bindtap="queryAddress"> 读取当前地址坐标并查询地址 </button>
<button type="warn" bindtap="selAddress"> 选地址计算距离 </button>JS代码
const WXAPI = require('apifm-wxapi')Page({data: {latitude: undefined,longitude: undefined},onLoad: function (options) {},onShow: function () {},queryAddress(){ // 读取当前定位坐标const _this = thiswx.getLocation({type: 'wgs84',success(res) {console.log(res)_this.setData(res)_this.mapQQAddress(res)}})},mapQQAddress(e){ // 坐标查地址const location = e.latitude + ',' + e.longitudeWXAPI.mapQQAddress(location, 1).then(res => {console.log('地址查看：', res)if (res.code == 0) {wx.showModal({title: '成功',content: res.data.result.address,showCancel: false})}})},selAddress(){ // 选择一个地址，读取坐标后计算距离const _this = thisif (!this.data.latitude || !this.data.longitude) {wx.showToast({title: '请先读取当前地址',icon: 'none'})return}wx.chooseLocation({success: (e) => {console.log(e)WXAPI.mapDistance(_this.data.latitude, _this.data.longitude, e.latitude, e.longitude).then(res => {console.log(res)if (res.code == 0) {wx.showModal({title: '成功',content: '距离:' + res.data + '公里',showCancel: false})}})}})}
})微信小程序获取当前地图坐标，并测量指定地点距离相关推荐
- 解决通过微信小程序获取的定位坐标在百度地图渲染误差过大问题
微信小程序可以获取两种坐标系的经纬度,分别为WGS84(大地坐标系)和GCJ02(国测局坐标系)而百度却是在其基础上进行加密形成了自己的一套坐标系bd09(百度坐标系),如果直接用微信小程序获取的经纬 ...
- uniapp 微信小程序获取map地图中心的经纬度地理位置
在页面上放置一个map组件 <map id="mapId" ref="mapId" style="width: 750rpx; height:c ...
- 微信小程序获取百度地图定位
1.指定按钮获取定位 <van-col class="playActive" @click="getLocal()" span="5" ...
- uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址
开发过小程序的都了解,我们在调用 uni.getLocation Api的时候,在微信小程序端,只会返给我们一个坐标系,当前位置的经纬度,当我们需要去知道当前位置的详细地址时,我们就需要进行反解析来获 ...
- 微信小程序获取个人头像和昵称，和地图选点功能
微信小程序获取个人头像和昵称,有技巧 1.可以直接获取 2.通过用户点击获取 过程中,有什么问题,可以加我微信号yizheng369探讨 先分析 这里面隐含了很多默认的规则,大家要注意: 1.可以直接 ...
- 微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置 咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿 首先我们需要引入腾 ...
- 微信小程序获取地区code
微信小程序获取地区code (接腾讯地图) 微信小程序官方文档中,有一个 wx.getLocation(点击跳转API) 接口,可以获取当前的地理位置.速度.如没有code/省市区等相关信息,我们可以 ...
- uniapp+Echarts微信小程序实现中国地图
uniapp+Echarts微信小程序实现中国地图 在uni-app项目引用Echarts 使用Echarts 地图实现: 最终效果 **项目源码**地址:[https://github.com/wa ...
- 微信小程序控制硬件 第14篇 微信小程序腾讯地图控制 4G Cat.1模组 ，安信可CA-01加载定位显示当前位置。
文章目录 一.前言 通讯协议 技术问题点 二.4G模组业务逻辑 上报基站信息 三.微信小程序控制 另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物 ...
最新文章
- anaconda与python的idle冲突吗_anaconda（python3）与python2共存
- pandas使用dt.day_name函数从dataframe(Series)中的日期数据列中抽取日期对应的星期信息生成新的数据列（Monday、Sunday）
- ThreadLocal是否会引发内存泄露的分析 good
- Ext2.2系列(50篇)
- codeforces——Little Pony and Expected Maximum
- SpringSecurity 案例之创建资源服务器准备工作
- android 360加固 例子,[原创]利用VirtualApp实现360加固的soHook简单例子
- ESXi主机管理内存资源的方式
- Git报错：The file will have its original line endings in your working directory
- fanuc机器人提示暂停_FANUC机器人学习——后台逻辑功能
- 测试用例--因果图、判定表法
- C++11中0与 NULL与nullptr之间的关系
- Xcode 12 导出ipa包
- Android ListView 代码1
- 12306为什么要安装根证书
- [转贴]比《同居密友》更搞笑的【阿奴与唐玉】陶海风格
- oidc_使用OIDC和Ionic for JHipster保护您的移动应用程序
- 判断QQ号码长度是否“合法”？让小白来告诉你
- 从零开始构建嵌入式实时操作系统5——设计延时功能
- Integer最大值2147483647