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

如果要在微信小程序内部导航的话可以使用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…

react中使用监听

在 React 中&#xff0c;您可以使用 addEventListener 函数来监听事件。以下是一个示例&#xff1a; import React, { useRef, useEffect } from react;function App() {const inputRef useRef(null);useEffect(() > {inputRef.current.addEventListener(input, handleInp…

宝塔面板安装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…

0032【Edabit ★☆☆☆☆☆】【每秒帧数】Frames Per Second

0032【Edabit ★☆☆☆☆☆】【每秒帧数】Frames Per Second algorithms language_fundamentals math numbers Instructions Create a function that returns the number of frames shown in a given number of minutes for a certain FPS. Examples frames(1, 1) // 60 fra…

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

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

全景环视AVM标定

目录 一、前言 二、鱼眼模型 三、标定流程 四、角点提取 4.1 亚像素坐标计算

文件混淆-界面介绍

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

Go 怎么操作 OSS 阿里云对象存储

1 介绍 在项目开发中&#xff0c;我们经常会使用对象存储&#xff0c;比如 Amazon 的 S3&#xff0c;腾讯云的 COS&#xff0c;阿里云的 OSS 等。本文我们以阿里云 OSS 为例&#xff0c;介绍怎么使用 Go 操作对象存储。 阿里云 OSS 提供了 REST Api 和 OSS Go SDK&#xff0…

Day38 力扣动态规划 :70.爬楼梯 |322. 零钱兑换 |279. 完全平方数

Day38 力扣动态规划 :70.爬楼梯 &#xff5c;322. 零钱兑换 &#xff5c;279. 完全平方数 70. 爬楼梯 &#xff08;进阶&#xff09;第一印象看完题解的思路实现中的困难感悟代码 322. 零钱兑换第一印象dp数组递推公式初始化遍历顺序如果凑不出来返回 -1 看完题解的思路实现中…

【漏洞复现】酒店宽带运营系统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;