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

需求:地图上有多个markes点,点击每一个获取对应的数据,再根据当前的坐标信息去调用导航。
出现的问题:每次点击的时候获取不到对应的坐标信息,获取到的信息显然不是想要的


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


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

wxml:

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

JS:

javascript 复制代码
//这里是遍历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);
      // 这里可以进一步处理坐标信息,例如打开详细信息页面等
    }
}

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

相关推荐
20岁30年经验的码农15 分钟前
Spring Cloud Gateway 网关技术文档
java
likuolei1 小时前
XML DOM 节点类型
xml·java·服务器
ZHE|张恒3 小时前
Spring Bean 生命周期
java·spring
q***38515 小时前
SpringCloud实战十三:Gateway之 Spring Cloud Gateway 动态路由
java·spring cloud·gateway
小白学大数据5 小时前
Python爬虫伪装策略:如何模拟浏览器正常访问JSP站点
java·开发语言·爬虫·python
程序员西西6 小时前
SpringBoot接口安全:APIKey保护指南
java·spring boot·计算机·程序员·编程·编程开发
wasp5206 小时前
Apache Hudi 项目总体分析
数据挖掘·apache·hudi·数据湖仓
summer_west_fish6 小时前
单体VS微服务:架构选择实战指南
java·微服务·架构
v***8576 小时前
Ubuntu介绍、与centos的区别、基于VMware安装Ubuntu Server 22.04、配置远程连接、安装jdk+Tomcat
java·ubuntu·centos
烤麻辣烫6 小时前
黑马程序员大事件后端概览(表现效果升级版)
java·开发语言·学习·spring·intellij-idea