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

news2024/11/24 14:38:03

 

需求:地图上有多个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);
      // 这里可以进一步处理坐标信息,例如打开详细信息页面等
    }
}

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

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

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

相关文章

线上虚拟纪念馆的便利与优势,全天候开放的数字化历史体验

一、搭建线上虚拟纪念馆的意义 在现代社会中&#xff0c;线上虚拟纪念馆越来越受到人们的关注和欢迎。传统纪念馆需要大量的物理空间和资源&#xff0c;而线上虚拟纪念馆则突破了这些限制&#xff0c;提供了更多的可能性和优势。首先&#xff0c;线上虚拟纪念馆能够更好地保存和…

【有手就行】使用你自己的声音做语音合成,CPU都能跑,亲测有效

此文介绍在百度飞桨上一个公开的案例&#xff0c;亲测有效。 厌倦了前篇一律的TTS音色了吗&#xff1f;打开短视频听来听去就是那几个声音&#xff0c;快来试试使用你自己的声音来做语音合成吧&#xff01;本教程非常简单&#xff0c;只需要你能够上传自己的音频数据就可以(建议…

Mac虚拟机工具 CrossOver 24.0.0 Beta3 Mac中文版

CrossOver是一款在Mac上运行Windows应用程序的软件&#xff0c;无需安装虚拟机或重启计算机&#xff0c;简化了操作过程&#xff0c;提高了工作效率&#xff0c;为用户带来便捷体验。前往Mac青桔下载&#xff0c;享受前所未有的便利和高效。摘要由作者通过智能技术生成 CrossOv…

JVM严镇涛版笔记【B站面试题】

前言 2023-06-19 18:49:33 出自B站 灰灰的Java面试 枫叶云链接&#xff1a;http://cloud.fynote.com/s/4976 JVM面试题大全 Lecturer &#xff1a;严镇涛 1.为什么需要JVM&#xff0c;不要JVM可以吗&#xff1f; 1.JVM可以帮助我们屏蔽底层的操作系统 一次编译&#xff0c…

当代人工智能三教父——深度学习三巨头

文章目录 引言 人物介绍 突出贡献 专业名词解释 引言 今天下午闲来无事翻阅了一下csdn首页的头条文章——《27 岁天才创始人 Joel Hellermark 分享了自己和“AI 教父” Geoffery Hinton 的最新采访》 感觉挺有意思&#xff0c;就从头到尾的看了一遍&#xff0c;里面有很多…

6.1 if语句

计算机语言和人类语言类似&#xff0c;人类语言是为了解决人与人之间交流的问题&#xff0c;而计算机语言是为了解决程序员与计算机之间交流的问题。程序员编写的程序就是计算机的控制指令&#xff0c;控制计算机的运行。借助于编译工具&#xff0c;可以将各种不同的编程语言的…

免费分享一套微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】,帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序旅游推荐(智慧旅游)系统(SpringBoot后端Vue管理端) Java毕业设计…

谷歌B端独立站建站推广,外贸建站训练营,傻瓜式教学

做外贸方法重要&#xff0c;工具更重要&#xff0c;而这些背后的规则和套路&#xff0c;身边的人往往不会告诉你&#xff0c;成功的人更不会教给你。本套课程主要内容包括&#xff1a;一套体系化的独立站建站方法&#xff0c;学会“高效学习”避免无效努力&#xff0c;拥有独立…

144.栈和队列:有效的括号(力扣)

题目描述 代码解决 class Solution { public:bool isValid(string s) {// 如果字符串长度为奇数&#xff0c;不可能是有效的括号字符串if(s.size() % 2 ! 0) return false;// 使用栈来存放括号stack<char> st;// 遍历字符串中的每一个字符for(int i 0; i < s.size();…

redis小知识

AOF与RDB的区别 AOF (Append Only File) 和 RDB (Redis Database) 都是Redis中的持久化机制&#xff0c;但有以下几点不同之处&#xff1a; 内容格式&#xff1a;AOF 以日志的形式记录所有写操作命令&#xff0c;而 RDB 则是在指定的时间间隔内对数据库进行快照&#xff0c;将数…

柏拉图式表征:人工智能深度网络模型是否趋于一致?

人工智能模型是否正在向现实的统一表征演进&#xff1f;柏拉图表征假说认为&#xff0c;人工智能模型正在趋同。 麻省理工学院最近的一篇论文引起了我的注意&#xff0c;因为它提出了一个令人印象深刻的观点&#xff1a;人工智能模型正在趋同&#xff0c;甚至跨越了不同的模态…

GeoScene产品学习视频收集

1、易智瑞运营的极思课堂https://www.geosceneonline.cn/learn/library 2、历年易智瑞技术公开课视频资料 链接&#xff1a;技术公开课-易智瑞信息技术有限公司&#xff0c;GIS/地理信息系统&#xff0c;空间分析-制图-位置智能-地图 3、一些关于GeoScene系列产品和技术操作的…

计算机-编程相关

在 Linux 中、一切都是文件、硬件设备是文件、管道是文件、网络套接字也是文件。 for https://juejin.cn/post/6844904103437582344 fork 进程的一些问题 fork 函数比较特殊、一次调用会返回两次。在父进程和子进程都会返回。 每个进程在内核中都是一个 taskstruct 结构、for…

微软MSBuild大会发布Copilot+PC:技术革新还是隐私噩梦?

微软在最近的MSBuild 2024大会上发布了全新的CopilotPC概念&#xff0c;这一技术结合了高通骁龙X Elite芯片&#xff0c;将人工智能与PC紧密结合。此次发布引起了广泛关注&#xff0c;不仅是因为其技术创新&#xff0c;还因为潜在的隐私问题。甚至连Elon Musk也对此表示担忧&am…

第197题|奇偶性的四则运算,你掌握了吗?|函数强化训练(四)|武忠祥老师每日一题 5月22日

解题思路&#xff1a;这道题如果我们会21号的题的话&#xff0c;简直是小菜一碟&#xff01;主要就是要用到下面这个结论&#xff1a; &#xff08;A&#xff09; 直接看奇偶性我们不好看&#xff0c;我们需要拆项&#xff1a; 我们先看前一项的奇偶性&#xff0c;x是奇函数&a…

自动化测试用例结构

标准的用例结构&#xff1a; 用力标题前提条件用例步骤预期结果实际结果 测试用例对比&#xff1a;

高稳定数显芯片防干扰抗噪数码屏驱动高亮LED驱动IC-VK16K33A/AA 最大13×3的按键扫描

产品型号&#xff1a;VK16K33A/AA 产品品牌&#xff1a;永嘉微电/VINKA 封装形式&#xff1a;SOP28/SSOP28 原厂&#xff0c;工程服务&#xff0c;技术支持&#xff01; 概述 VK16K33A/AA是一种带按键扫描接口的数码管或点阵LED驱动控制专用芯片&#xff0c;内部集成有数据…

MoonDream2微调指南【最小VLM】

在本指南中&#xff0c;我们将探讨如何使用计算机视觉数据集对完全开源的小型视觉语言模型 Moondream2 进行微调&#xff0c;以计数项目&#xff08;这是 GPT-4V 一直表现不一致的任务&#xff09;&#xff0c;并以一种可以依赖输出用于生产应用程序的方式进行微调。 视觉语言…

k8s之yaml文件详解

文章目录 k8s之yaml文件详解一、关于yaml文件1、k8s支持的文件格式2、YAML语言格式3、查看api资源版本标签4、编写nginx-test.yaml资源配置清单4.1 编写资源配置清单4.2 创建资源对象4.3 查看创建的pod资源 5、创建service服务对外提供访问并测试5.1 编写nginx-svc-test.yaml5.…

ImportError: urllib3 v2.0 only supports OpenSSL 1.1.1+解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…