完美解决原生小程序点击地图markers上的点获取不到对应的坐标信息

 

需求:地图上有多个markes点,点击每一个获取对应的数据,再根据当前的坐标信息去调用导航。

 出现的问题:每次点击的时候获取不到对应的坐标信息,获取到的信息显然不是想要的

原因: 因为你的id不是number类型,官方要求你的markes列表中的id必须是number类型

解决办法:在获取到markes列表时,将id转成number类型,因为我这直接给的是index,因为我这的id不需要,所以没给,所以直接给一个index,index本身就是number类型,所以可以完美解决

wxml:

<map bindmarkertap="goNavigation"
        longitude="{{longitude}}" latitude="{{latitude}}"
        scale="{{scale}}" data-lat="{{latitude}}" data-lon="{{longitude}}" markers="{{markers}}" show-location>
    </map>

JS: 

//这里是遍历markes数组的
var list = []
          res.data.list.forEach((item,index) => {
            var mapObj = {
              id:index,
              state:item.state,
              name:item.pointName,
              latitude:item.coordinate.split(',')[1],
              longitude:item.coordinate.split(',')[0],
              iconPath:item.state=='0'?'../../assets/images/state0.png':'../../assets/images/state1.png',
              distance:item.distance.toFixed(2),
              width:24,
              height:28,
              callout:{
                  content:item.pointName,color:'#666',fontSize:12,borderRadius:4,bgColor:'#fff',display:'ALWAYS',padding:5,anchorX:0,anchorY:-4,
              },
            }
            list.push(mapObj)
          });


//这个是点击方法
 goNavigation:function(e){
    console.log('点击了',e)
    const markerId = e.detail.markerId;
    console.log('markerId',markerId)
    const marker = this.data.markers.find(marker => marker.id === markerId);
    console.log('marker',this.data.markers)
    if (marker) {
      console.log('点击的坐标信息:', marker.latitude, marker.longitude);
      // 这里可以进一步处理坐标信息,例如打开详细信息页面等
    }
}

最终的结果        (#^.^#) ✿✿ヽ(°▽°)ノ✿

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

阿里云手机adb远程连接出现adb问题unauthorized解决

执行adb shell出现下面错误 adb.exe: device unauthorized. This adb servers $ADB_VENDOR_KEYS is not set Try adb kill-server if that seems wrong. Otherwise check for a confirmation dialog on your device.解决&#xff1a;导入和绑定adb的密钥 重启云手机

[Redis]常见数据和内部编码

相关命令 type (key) type 命令实际返回的就是当前键的数据结构类型&#xff0c;它们分别是&#xff1a;string&#xff08;字符串&#xff09;、list&#xff08;列 表&#xff09;、hash&#xff08;哈希&#xff09;、set&#xff08;集合&#xff09;、zset&#xff08;有…

[36#]私有化部署地图套装(全球版)

私有化部署地图套装&#xff08;全球版&#xff09;&#xff0c;是由全球高清卫星影像与100%全球水陆覆盖高程数据组成的全球三维地图套装。 私有化部署地图套装&#xff08;全球版&#xff09; 我们在《难以置信&#xff0c;谁还会用离线地球》一文中&#xff0c;为大家分享…

7 Series FPGAs Integrated Block for PCI Express IP核 Advanced模式配置详解(三)

1 TL Settings Transaction Layer (TL)设置只在Advanced模式下有效。 Endpoint: Unlock and PME_Turn_Off Messages: 与端点的电源管理相关&#xff0c;允许发送解锁和电源管理事件关闭消息。 Root Port: Error Messages: Error Correctable&#xff08;错误可纠正&#xff09…

IO游戏设计思路

1、TCP ,UDP ,KCP ,QUIC TCP 协议最常用的协议 UDP协议非常规的协议&#xff0c;因为需要在线广播&#xff0c;貌似运营商会有一些影响 KCP 基于UDP的协议&#xff0c;GitHub - l42111996/java-Kcp: 基于java的netty实现的可靠udp网络库(kcp算法)&#xff0c;包含fec实现&am…

增强版 Kimi:AI 驱动的智能创作平台,实现一站式内容生成(图片、PPT、PDF)!

前言 基于扣子 Coze 零代码平台&#xff0c;我们从零到一轻松实现了专属 Bot 机器人的搭建。 AI 大模型&#xff08;LLM&#xff09;、智能体&#xff08;Agent&#xff09;、知识库、向量数据库、知识图谱&#xff0c;RAG&#xff0c;AGI 的不同形态愈发显现&#xff0c;如何…

GEO数据挖掘-PCA、差异分析

From 生物技能树 GEO数据挖掘第二节 文章目录 探针注释自主注释流程(了解)PCA图、top1000基因热图探针注释查看示例代码 top 1000 sd 热图离散基因热图&#xff0c;top1000表达基因&#xff0c;只是看一下&#xff0c;不用放文章里 差异分析火山图差异基因热图转换id富集分析-K…

安装mpi4py与dlio_profiler_py的总结

安装mpi4py mpi4py是一个Python库&#xff0c;它提供了与MPI&#xff08;Message Passing Interface&#xff09;兼容的接口&#xff0c;使得Python程序能够利用MPI实现并行计算。mpi4py 的核心是基于MPI标准的C/C实现&#xff0c;它能够在高性能计算环境下进行高效的并行处理…

网页版收银系统比安装板收银系统的四大优势

在当今竞争激烈的零售市场中&#xff0c;高效的收银系统对于连锁实体店的管理至关重要。随着科技的不断发展&#xff0c;网页版收银系统成为越来越多零售企业的首选。网页版收银系统以其灵活性、可定制性和便利性&#xff0c;成为现代零售业的利器。本文将探讨网页版收银系统相…

pycharm 关闭项目卡死

PyCharm2023.3.4 关闭一直卡在 closing projects 解决办法&#xff1a; 打开PyCharm&#xff0c; 选择 Help -> Find Action -> 输入 Registry -> 禁用ide.await.scope.completion

MYSQL 集群

1.集群目的:负载均衡 解决高并发 高可用HA 服务可用性 远程灾备 数据有效性 类型:M M-S M-S-S M-M M-M-S-S 原理:在主库把数据更改(DDL DML DCL&#xff09;记录到二进制日志中。 备库I/O线程将主库上的日志复制到自己的中继日志中。 备库SQL线程读取中继日志…

51cto已购买的视频怎么下载到电脑上?

在数字学习的浪潮中&#xff0c;51CTO已成为众多专业人士和爱好者的知识宝库。但购买了视频课程后&#xff0c;如何将其下载到电脑上以便离线学习呢&#xff1f;这不仅是技术问题&#xff0c;更是时间管理和学习效率的关键。本文将为您揭示简单而高效的步骤&#xff0c;无论您使…

前端面试项目细节重难点(已工作|做分享)

面试官提问&#xff1a;需求场景&#xff1a;页面上有一个单选框&#xff0c;有是否两个选项&#xff1a;当用户选择是&#xff0c;出现一个输入框&#xff0c;用户可以输入内容&#xff0c;给后端的保存接口传入参数radio和content这两个字段&#xff0c;值分别是用户选项和输…

西门子WINCC8.0VBS脚本学习讲解

WinCC VBS脚本置位/复位/取反 二进制变量 "TAG1_BOOL1" 进行置位复位取反操作 步骤&#xff1a;按钮-->对象属性-->事件-->单击鼠标VBS动作填入代码如下: 对二进制变量进行复位 对二进制变量进行置位 对二进制变量进行取反 VBS脚本数学运算/读写批处理 …

百度智能云参与信通院多项边缘计算标准编制,「大模型时代下云边端协同 AI 发展研讨会」成功召开

1 中国信通院联合业界制定、发布多项标准化成果&#xff0c;推动产业发展 大模型开启了 AI 原生时代&#xff0c;云边端协同 AI 构建了「集中式大规模训练」、「边缘分布式协同推理」新范式&#xff0c;有效降低推理时延和成本&#xff0c;提升数据安全和隐私性&#xff0c;也…

安卓App封装全攻略:利用小猪APP分发提升应用发布效率

在快速迭代的移动应用市场&#xff0c;高效且安全地分发安卓应用程序是开发者面临的一大挑战。安卓App封装技术&#xff0c;作为这一挑战的解决方案之一&#xff0c;不仅能够提升应用的安全性&#xff0c;还能简化分发流程。本文将深入探讨安卓App封装的核心概念&#xff0c;以…

小型发电机不发电原因和解决方法

小型发电机不发电可能由多种原因造成&#xff0c;以下是一些常见原因及其解决方法&#xff1a; 1.电池电量不足&#xff1a;小型发电机通常需要电池来启动。如果电池电量不足&#xff0c;可能导致发电机无法启动。此时&#xff0c;您可以使用充电设备对电池进行充电&#xff0…

2025秋招深度学习基础面试题(一)

01. 卷积和BN如何融合提升推理速度 Conv和BN的融合:在网络的推理阶段,可以将BN层的运算融合到Conv层中,减少运算量,加速推理。本质上是修改了卷积核的参数,在不增加Conv层计算量的同时,略去了BN层的计算量。def fuse_conv_bn(conv, bn):std = (bn.running_var + bn.eps).…

深入解读TuGraph计算引擎模型推理系统

作者&#xff1a;李文凯 TuGraph计算引擎模型推理系统将基于迭代计算的图计算框架与模型推理系统相结合&#xff0c;推理系统可自定义推理依赖环境&#xff0c;图迭代计算与推理链路实现隔离。基于共享内存的跨进程通信方式&#xff0c;提高了推理数据交换效率&#xff0c;满足…