微信小程序如何利用接口返回经纬计算实际位置并且进行导航功能【下】

如果要在微信小程序内部导航的话可以使用wx.navigateToMiniProgram方法来打开腾讯地图小程序,并传递目的地的经纬度信息。 

目录

1.如何获取高精地址 

2.如何调起地图 

3.实现效果 

navigateToDestination: function() {let that = this;var latitude = parseFloat(that.data.latitude);var longitude = parseFloat(that.data.longitude);var address = that.data.address;// 打开腾讯地图小程序并传递目的地经纬度信息wx.navigateToMiniProgram({appId: '你的腾讯地图小程序AppID',path: 'pages/map/index', // 小程序内跳转到地图页面extraData: {latitude: latitude,longitude: longitude,name: address, // 目的地名称address: address // 目的地地址},success(res) {console.log('打开腾讯地图小程序成功');},fail(res) {console.log('打开腾讯地图小程序失败', res.errMsg);}});
}

需要自己去申请一个腾讯地图小程序,所以本文使用调起外部地图的方式进行路线导航。 

1.如何获取高精地址 

 wx.getLocation({type: 'wgs84',success: function(res) {var latitude = res.latitude; // 使用 res.latitude 获取经度值var longitude = res.longitude; // 使用 res.longitude 获取纬度值console.log('Latitude:', latitude);console.log('Longitude:', longitude);var location = latitude + ',' + longitude; // 构建经纬度字符串wx.request({url: 'https://apis.map.qq.com/ws/geocoder/v1/',data: {location: location, // 使用经纬度字符串作为参数key: 'OH6BZ-MKJHQ-2565Z-B7IP2-JD5N6-TYB54',get_poi: 0},success: function(res) {console.log('Geocoding API response:', res);var address = res.data.result.address;console.log('Address:', address);that.setData({address: address,kmnum: options.km});}});}});
  • wx.request():发起一个网络请求。

  • url: 'https://apis.map.qq.com/ws/geocoder/v1/':指定请求的URL,这里是腾讯地图的逆地理编码API接口。

  • data: {...}:设置请求的参数。

    • location: location:将经纬度字符串作为参数传递给API,以获取该位置的地址信息。
    • key: 'OH6BZ-MKJHQ-2565Z-B7IP2-JD5N6-TYB54':提供有效的腾讯地图API密钥。
    • get_poi: 0:设置是否返回周边POI(兴趣点)信息。这里设置为0表示不返回周边POI信息。

其中呢address是获取到的地址,因为下面调起导航需要,所以我们上面创建变量先进行存储 , kmnum: options.km的options.km是上文的距离,通过跳转传参得来,不明白的可看上文https://blog.csdn.net/m0_71966801/article/details/134083967

这里是跳转传参的方法: 

shops(e){console.log(e);console.log(e.currentTarget.dataset.id);console.log(e.currentTarget.dataset.km);wx.navigateTo({url: '/pages/countrystore/countrystore?id=' + e.currentTarget.dataset.id + '&km=' + e.currentTarget.dataset.km,})
},

2.如何调起地图 

 navigateToDestination: function() {let that = thisvar latitude =  parseFloat(that.data.latitude);var longitude =  parseFloat(that.data.longitude);var address = that.data.address;wx.openLocation({latitude: latitude,longitude: longitude,name: that.data.address, // 替换为实际的目的地名称address: address // 替换为实际的目的地地址});},//let that = this:将当前上下文对象保存到变量that中,以便在后续代码中使用。var latitude =  parseFloat(that.data.latitude);:从that.data中获取latitude属性的值,并通过parseFloat()函数将其转换为浮点数类型。这里假设latitude是一个经度值。var longitude =  parseFloat(that.data.longitude);:从that.data中获取longitude属性的值,并通过parseFloat()函数将其转换为浮点数类型。这里假设longitude是一个纬度值。var address = that.data.address;:从that.data中获取address属性的值,并将其保存到address变量中。这里假设address是目的地的地址信息。wx.openLocation():调用微信小程序的openLocation方法打开地图页面,并显示目标位置。latitude和longitude:指定目标位置的纬度和经度。
name: that.data.address:设置目标位置的名称,即目的地的名称。
address: address:设置目标位置的详细地址。
该函数通过调用wx.openLocation()方法实现了跳转到地图页面,并自动定位到指定的目的地位置。用户可以在地图页面查看目的地的位置信息,并进行导航操作。

3.实现效果 

QQ视频20231027215659

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/150960.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

流程引擎-自定义函数的应用

背景: 某些业务需求比较特殊,需要在表单中校验或实现一些功能,泛微流程表单配置时实现的方式多种多样:JS脚本、SQL语句、公式以及其他一些标准化拖拽功能,本次给大家分享一下流程表单中的公式实现的一些需求场景。泛微…

lunar-1.5.jar

公历农历转换包 https://mvnrepository.com/artifact/com.github.heqiao2010/lunar <!-- https://mvnrepository.com/artifact/com.github.heqiao2010/lunar --> <dependency> <groupId>com.github.heqiao2010</groupId> <artifactId>l…

【收藏】药物专利信息查询方法-经典实操案例!

生物医药领域在专利行业中&#xff0c;一直是独特的存在。药物专利在各国之间有不同的登记要求&#xff0c;如何在这种查询方式诸多局限的情况下&#xff0c;检索得更全更准呢&#xff1f; 作为一名医药行业的IPR&#xff0c;经常需要调研药物原研专利。 大家所熟知的最快捷的…

CSS 基础知识-02

CSS 基础知识-01 1. flex布局2.定位3.CSS精灵4.CSS修饰属性 1. flex布局 2.定位 3.CSS精灵 4.CSS修饰属性

哈希索引(PostgreSQL 14 Internals翻译版)

概览 哈希索引提供了根据特定索引键快速查找tuple ID (TID)的功能。粗略地说&#xff0c;它只是一个存储在磁盘上的哈希表。哈希索引唯一支持的操作是根据相等条件进行搜索。 当一个值插入到索引中时&#xff0c;将计算索引键的哈希函数。PostgreSQL哈希函数返回32位或64位整…

单位建数字档案室的意义和作用

单位建立数字档案室的意义和作用包括&#xff1a; 1.提高档案管理效率。数字档案室可以高效地收集、整理和存储电子文档&#xff0c;通过数字化处理&#xff0c;文档的查找和检索速度大幅提升。 2.降低管理成本。数字档案室可以通过节约空间和人力成本&#xff0c;降低管理成本…

3DMAX金属屋顶墙面铺设插件使用方法

3DMAX金属屋顶墙面铺设插件教程 3DMAX金属屋顶墙面铺设插件&#xff0c;一键生成金属板屋顶、金属外墙面板&#xff0c;是一款非常实用的建筑建模插件。 【适用版本】 3dMax7或更新版本 【使用方法】 1.启动3dMax软件&#xff0c;打开&#xff08;或创建&#xff09;场景文件…

CTF-Crypto学习记录-第三天 MD5加密算法(信息摘要算法)“ “

文章目录 0x1 MD5 基本介绍0x2 MD5 加密特点0x3 MD5 加密原理步骤0x01 对明文数据进行信息填充0x02 设置初始变量0x03 加密运算过程加密运算流程图&#xff1a;四个非线性函数&#xff1a;Mj表示消息的第j个子分组&#xff08;从0到15&#xff09;&#xff0c;<<&#xf…

计算机网络——理论知识总结(上)

开新番&#xff0c;因为博主备考的学校计网只考察1/6的分值&#xff0c;而且定位偏向于送分题&#xff0c;因此在备考时并没有很高强度的复习。本帖基于王道考研的教辅总结归纳&#xff0c;虽然是408的教材&#xff0c;但忽略其中有难度的部分&#xff0c;如计算题、画图题等&a…

基于SSM的点餐平台系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

python造测试数据存到excel

代码&#xff1a; from ExcelHandler import ExcelHandler from faker import Faker # 导入faker库的Faker方法 # ↓默认为en_US&#xff0c;只有使用了相关语言才能生成相对应的随机数据 fkFaker(locale"zh_CN")def create_date():m int(input(请输入要造的数据条…