template遍历数据，点击地图跳到高德地图中。_地图找不到template 的div内id-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43612234/article/details/86249079

本文介绍在使用高德地图API进行动态数据渲染时，遇到的点击定位BUG解决方案。通过为每个数据项绑定唯一ID，确保点击不同数据时能正确跳转至相应地点，避免了所有点击指向最后一个地址的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经常遇到一个问题就是在template渲染数据中遇到一个bug就是点击一个div，跳转到高德地图的时候，点击每一条的数据都是同一个地址，而这个地址就是数据的最后一条。

结合高德地图的开发文档

https://lbs.amap.com/api/uri-api/guide/mobile-web/point

需要的参数

1.经度
2.纬度
3.地址的名称

在这里插入图片描述

因为数据都是动态的生成的，每一条的数据的id都是不一样的，数据这个时候需要绑定ID，之前就是因为没有绑定ID。一直不行，但是知道要绑定ID，也需要想在页面哪一个部分绑定id，

ｈｔｍｌ代码

//因为是用template来渲染数据的，这里可以用到｛｛　｝｝
在你需要点击的元素上｛｛请求数据的ｉｄ｝｝
<li class="MapDistance{{id}}"
               style="min-height: 78px;height:auto;width: 96%;padding: 5px;margin-left: 2%;margin-bottom: 2px;">
               <div style="display:flex;margin-top: 16px;padding: 0px 10px;justify-content: center; align-items: center;">
                   <div class="jkLocation" style="width: 30px;">
                       <img class="jgDistance" src="${req.contextPath}/images/location@2x.png" alt=""
                            style="width: 22px;height: 27px;">
                   </div>
                   <div class="jkMessage" style="flex: 1;margin-left: 7px; margin-right: -7px;">
                       <div style="display: inline-block">
                           <span class="orgName" style="margin-bottom: 5px;display:  inline-block">
                           {{courseInfoDetail.orgInfo.name}}
                           </span>
                           <img src="${req.contextPath}/images/youzhiJK@2x.png" alt=""
                                style="width: 14px;height: 14px;display: inline-block">

                           <span class="orgAddress{{id}}" style="display: block;word-wrap:break-word"> {{courseInfoDetail.orgInfo.address}}
                               <span class="distance{{id}}"
                                     style="background-color: #26BF94;color:#FFFFFF;width: auto;height: 22px;display: inline-block;margin-left: 5px;border-radius: 4px;padding: 1px;">距您0m</span>
                           </span>
                       </div>
                   </div>
                   <div class="jkRight" style="width: 20px;float: right;position: relative;right: -10px">
                       <img src="${req.contextPath}/images/rightPut@2x.png" alt=""
                            style="width: 10px;height: 20px;">
                   </div>
               </div>
           </li>

ｊｓ代码


var lon = v.courseInfoDetail.orgInfo.longitude;
var lan = v.courseInfoDetail.orgInfo.latitude;
var orgName = v.courseInfoDetail.orgInfo.name;
  //点击地图跳转定位
                $(".MapDistance" + orderId).click(function (res) {
                    window.location.href = 'https://uri.amap.com/marker?position=' + lon + ',' + lan + '&name=' + orgName;
                });