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

如果要在微信小程序内部导航的话可以使用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.mzph.cn/news/121447.shtml

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

相关文章

springboot+vue基于协同过滤算法的私人诊所管理系统的设计与实现【内含源码+文档+部署教程】

博主介绍:✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久,选择我们就是选择放心、选择安心毕业✌ 🍅由于篇幅限制,想要获取完整文章或者源码,或者代做&am…

Kafka - 异步/同步发送API

文章目录 异步发送普通异步发送异步发送流程Code 带回调函数的异步发送带回调函数的异步发送流程Code 同步发送API 异步发送 普通异步发送 需求&#xff1a;创建Kafka生产者&#xff0c;采用异步的方式发送到Kafka broker 异步发送流程 Code <!-- https://mvnrepository…

数据结构与算法之矩阵: Leetcode 48. 旋转矩阵 (Typescript版)

旋转图像 https://leetcode.cn/problems/rotate-image/ 描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1 输入&…

【Unity数据交互】JsonUtility的“爱恨情仇“

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

宝塔面板安装Python和Flask(新版Python项目)

&#xff08;一&#xff09;宝塔面板的项目菜单&#xff0c;打开Python项目的“项目版本管理” 安装Python版本3.10.0。 会创建一个Python版本的文件夹www/server/pyproject_evn/versions/ 会创建一个Python虚拟环境的文件夹www/server/pyproject_evn/python_venv/ &#xf…

USB学习(3):USB描述符和USB类设备

文章目录 1 USB描述符(Descriptors)1.1 设备描述符(Device Descriptor)1.2 配置描述符(Configuration Descriptor)1.3 接口关联描述符(Interface Association Descriptor)1.4 接口描述符(Interface Descriptor)1.5 端点描述符(Endpoint Descriptor)1.6 字符串描述符(String Des…

极米科技H6 Pro 4K、H6 4K高亮定焦版——开启家用投影4K普及时代

智能投影产业经过几年发展&#xff0c;市场规模正在快速扩大。洛图数据显示&#xff0c;预计今年中国投影出货量有望超700万台&#xff0c;2027年达950万台&#xff0c;可见智能投影产业规模将逐渐壮大&#xff0c;未来可期。2023年&#xff0c;投影行业呈现出全新面貌&#xf…

【观察】Dell APEX云平台:引领多云时代上云新范式

毫无疑问&#xff0c;过去十多年是云计算发展的黄金十年&#xff0c;云计算理念不断被市场所接受&#xff0c;但随着企业上云深入和认知度的不断增加&#xff0c;摆在很多企业面前的选择题也发生了新变化&#xff0c;即从过去企业上云或不上云的纠结&#xff0c;转变成今天如何…

文件混淆-界面介绍

目录 文件混淆-界面介绍 顶部介绍 中间文件列表区介绍 底部功能介绍 介绍文件混淆界面功能选项和操作流程 文件混淆-界面介绍 文件混淆功能区域包括3个功能区&#xff1a;顶部显示过滤区、中间文件列表区、底部的是否混淆开关 顶部介绍 显示控制区域&#xff0c;这个区…

【漏洞复现】酒店宽带运营系统RCE

漏洞描述 安美数字 酒店宽带运营系统 server_ping.php 远程命令执行漏洞 免责声明 技术文章仅供参考&#xff0c;任何个人和组织使用网络应当遵守宪法法律&#xff0c;遵守公共秩序&#xff0c;尊重社会公德&#xff0c;不得利用网络从事危害国家安全、荣誉和利益&#xff…

一文了解GC垃圾回收

一文了解GC垃圾回收 1 判断一个对象为垃圾对象的方法 引用计数法(弃用) 可达性分析算法 是否有指向GC root 的引用链&#xff0c;如果有&#xff0c;不是垃圾对象 ---->GC roo:即rt.jar包中内容 2 内存泄漏与内存溢出区别 泄漏&#xff1a;原本需要被回收的对象&#…

C++系列之list的模拟实现

&#x1f497; &#x1f497; 博客:小怡同学 &#x1f497; &#x1f497; 个人简介:编程小萌新 &#x1f497; &#x1f497; 如果博客对大家有用的话&#xff0c;请点赞关注再收藏 &#x1f31e; list的节点类 template struct list_Node { public: list_Node* _prev; list_…

关于本地项目上传到gitee的详细流程

如何上传本地项目到Gitee的流程&#xff1a; 1.Gitee创建项目 2. 进入所在文件夹&#xff0c;右键点击Git Bash Here 3.配置用户名和邮箱 在gitee的官网找到命令&#xff0c;注意这里的用户名和邮箱一定要和你本地的Git相匹配&#xff0c;否则会出现问题。 解决方法如下&…

linux上java -jar方式运行项目及输出文件nohup.out的清理, linux上定时器的用法

linux上java -jar方式运行项目及输出文件nohup.out的清理&#xff0c; linux上定时器的用法 linux上java -jar方式运行定期自动清理nohup.out文件的内容**验证**定时器crontab使用时注意事项 linux上java -jar方式运行 参考&#xff1a;https://blog.csdn.net/qq_42169450/arti…

2023 MathorCup(妈妈杯) 数学建模挑战赛B题完整解题思路+模型+代码

2023妈妈杯数学建模B题完整版思路、模型代码已出&#xff01;&#xff01;&#xff01; 云顶数模最新完整版解题思路、模型代码&#xff0c;供大家参考~~ B题目 解题思路 详细模型解析&#xff1a;

开启CETOS 裸奔了一年的服务器开启firewall防火墙

记录一下关于firewall&#xff0c;博主非运维专家或服务器专家。 背景 客户有一台裸奔运行了一年多的系统有公网但发现没有开防火墙&#xff0c;iptables和firewall均是关闭状态&#xff0c;通过扫描发现很多漏洞。根据客户要求对端口进行重新梳理且关闭不必要或有潜在风险的…

ubuntu安装nps客户端

Ubuntu安装nps客户端 1.什么是nps内网穿透&#xff1f;2.设备情况3.下载客户端3.链接服务端3.1、无配置文件模式3.2、注册到系统服务(启动启动、监控进程) 1.什么是nps内网穿透&#xff1f; nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。目前支持tcp、udp流量转发…

云端代码编辑器Atheos

什么是 Atheos &#xff1f; Atheos是一个基于 Web 的 IDE 框架&#xff0c;占用空间小且要求最低&#xff0c;构建于 Codiad 之上&#xff0c;不过 Atheos 已从原始 Codiad 项目完全重写&#xff0c;以利用更现代的工具、更简洁的代码和更广泛的功能。 注意事项 群晖内核版本太…

浅谈中国汽车充电桩行业市场状况及充电桩选型的介绍

安科瑞虞佳豪 车桩比降低是完善新能源汽车行业配套的一大重要趋势&#xff0c;目前各国政府都在努力推进政策&#xff0c;通过税收减免、建设补贴等措施提升充电桩建设速度&#xff0c;以满足新能源汽车需求。 近年来&#xff0c;在需求和技术的驱动下&#xff0c;充电桩的平…

Mac怎么删除文件和软件?苹果电脑删除第三方软件方法

Mac删除程序这个话题为什么一直重复说或者太多人讨论呢&#xff1f;因为如果操作不当&#xff0c;可能会导致某些不好的影响。因为Mac电脑如果有太多无用的应用程序&#xff0c;很有可能会拖垮Mac系统的运行速度。或者如果因为删除不干净&#xff0c;导致残留文件积累在Mac电脑…