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

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

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

相关文章

Kubernetes 概述以及Kubernetes 集群架构与组件

目录 Kubernetes概述 K8S 是什么 为什么要用 K8S K8S 的特性 Kubernetes 集群架构与组件 核心组件 Master 组件 Node 组件 ​编辑 Kubernetes 核心概念 常见的K8S按照部署方式 Kubernetes概述 K8S 是什么 K8S 的全称为 Kubernetes,Kubernetes 是一个可移植、可扩…

记一次有趣的tp5代码执行

目录 0x00 前言 0x01 基础信息 0x02 突破 base64编码与php://filter伪协议 tp 5 method代码执行的细节 0x03 总结 免费领取安全学习资料包!(私聊进群一起学习,共同进步)​编辑 0x00 前言 朋友之前给了个站,拿了…

黑马 小兔鲜儿 uniapp 小程序开发- 微信登录用户模块- 06-07

黑马 小兔鲜儿 uniapp 小程序开发- 商品详情模块- day05-CSDN博客 小兔鲜儿 - 微信登录-06 涉及知识点:微信授权登录,文件上传,Store 状态管理等。 微信登录 微信小程序的开放能力,允许开发者获取微信用户的基本信息&#xff…

HBase理论与实践-基操与实践

基操 启动&#xff1a; ./bin/start-hbase.sh 连接 ./bin/hbase shell help命令 输入 help 然后 <RETURN> 可以看到一列shell命令。这里的帮助很详细&#xff0c;要注意的是表名&#xff0c;行和列需要加引号。 建表&#xff0c;查看表&#xff0c;插入数据&#…

Python Django 之全局配置 settings 详解

文章目录 1 概述1.1 Django 目录结构 2 常用配置&#xff1a;settings.py2.1 注册 APP&#xff1a;INSTALLED_APPS2.2 模板路径&#xff1a;TEMPLATES2.3 静态文件&#xff1a;STATICFILES_DIRS2.4 数据库&#xff1a;DATABASES2.5 允许访问的主机&#xff1a;ALLOWED_HOSTS 1 …

arcgis将合并(组合)要素拆分的方法

1、打开一幅图&#xff0c;发现两块区域被连接成一块区域&#xff0c;如下&#xff1a; 2、在可编辑状态下&#xff0c;进行拆分&#xff0c;先选中待拆分要素&#xff0c;如下&#xff1a; 3、拆分后&#xff0c;如下&#xff1a;

CSS3弹性布局

2009年&#xff0c;W3C提出一种崭新的布局方案—弹性盒(Flexbox)布局&#xff0c;使用该模型可以轻松地创建自适应窗口的流动布局&#xff0c;或者自适应字体大小的弹性布局。W3C的弹性盒布局分为旧版本、新版本及混合过渡版本3种不同的设计方案&#xff0c;其中混合过渡版本主…

idea 拉取代码

md老长时间 不用git 差点忘了 现在 演示 非常简单

【计算机网络】分层模型和应用协议

网络分层模型和应用协议 1. 分层模型 1.1 五层网络模型 网络要解决的问题是&#xff1a;两个程序之间如何交换数据。 四层&#xff1f;五层&#xff1f;七层&#xff1f; 2. 应用层协议 2.1 URL URL&#xff08;uniform resource locator&#xff0c;统一资源定位符&#…

基于深度学习的安全帽识别检测系统(python OpenCV yolov5)

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、研究的内容与方法二、基于深度学习的安全帽识别算法2.1 深度学习2.2 算法流程2.3 目标检测算法2.3.1 Faster R-CNN2.3.2 SSD2.3.3 YOLO v3 三 实验与结果分析3.1 实验数据集3.1.1 实验数据集的构建3.1.2 数据…

基于松鼠算法的无人机航迹规划-附代码

基于松鼠算法的无人机航迹规划 文章目录 基于松鼠算法的无人机航迹规划1.松鼠搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用松鼠算法来优化无人机航迹规划。 1.松鼠搜索算法 …

安装pytorch报错torch.cuda.is_available()=false的解决方法

参考文章&#xff1a; https://blog.csdn.net/qq_46126258/article/details/112708781 https://blog.csdn.net/Andy_Luke/article/details/122503884 https://blog.csdn.net/anmin8888/article/details/127910084 https://blog.csdn.net/zcs2632008/article/details/127025294 …

Linux内核是如何创建进程?

目录 1.Linux如何创建进程 2.fork函数原理 2.1 fork函数原型 2.2 fork函数实现原理 2.3 父子进程虚拟地址空间&#xff08;mm_struct&#xff09;之间的关系 2.4 写时拷贝&#xff08;copy-on-write&#xff09;技术 2.5 父子进程如何共享文件&#xff08;files_struct&…

IDEA优雅自动生成类注释和快捷键生成方法注释

生成类注释 Preferences->Editor->File and Code Templates-> Includes ->File Header 注释模板&#xff1a; /*** Classname ${NAME}* Description ${description}* Date ${DATE} ${TIME}* Created by ZouLiPing*/生成方法和字段注释 查看IDEA自动配置java快捷…

山西电力市场日前价格预测【2023-11-02】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-11-02&#xff09;山西电力市场全天平均日前电价为151.67元/MWh。其中&#xff0c;最高日前电价为280.23元/MWh&#xff0c;预计出现在22:15。最低日前电价为0.00元/MWh&#xff0c;预计出…

杂记 | 使用numpy计算欧氏距离和马氏距离示例

文章目录 一、欧氏距离与马氏距离二、使用numpy计算欧氏距离三、使用numpy计算马氏距离 一、欧氏距离与马氏距离 这里引用GPT4的回答&#xff1a; 二、使用numpy计算欧氏距离 import numpy as npp1 [1, 2, 3] p2 [4, 5, 6] point1 np.array(p1) point2 np.array(p2)euc…

Leetcode刷题---多数元素(计数、哈希表、摩尔投票)

题目描述&#xff1a; 思路一&#xff1a; 可以使用暴力破解来解决此问题&#xff0c;但是暴力破解的时间复杂度很高&#xff0c;在leetcode测试的时候爆出来超出时间限制的问题。 代码&#xff1a; class Solution {public int majorityElement(int[] nums) {int nnums.leng…

低代码,程序员提高生产力的开发工具

目录 一、什么是低代码&#xff1f; 二、低代码的本质是什么&#xff1f; 三、低代码平台的搭建能力 四、写在最后 一、什么是低代码&#xff1f; 简单来说&#xff0c;低代码是一种用于应用程序开发的模块化方法&#xff0c;它能有效减少应用程序的开发时间。基于可重用的、组…

新手小白如何自学制作电子画册并分享各大平台

一提到电子画册制作&#xff0c;相信很多人都开始头大了&#xff0c;毕竟对于新手小白来说还是比较难的&#xff0c;那么&#xff0c;新手小白要如何自学制作电子画册并快速分享出去呢&#xff0c;其实只需要一个在线电子画册制作平台FLBOOK就可以了 。 小白该怎样制作电子画册…

数据结构 | 顺序表专题

数据结构 | 顺序表专题 文章目录 数据结构 | 顺序表专题课前准备1. 目标2. 需要的储备知识3. 数据结构相关概念 开始顺序表1、顺序表的概念及结构2、顺序表分类3、动态顺序表的实现初始化顺序表顺序表的销毁顺序表的尾插顺序表的头插检查容量顺序表的尾删打印顺序表顺序表的头删…