循环遍历 bm-marker 当数组发生变化时 marker 携带的数据错乱

[ThinkerK]

[BUG 反馈] 循环遍历 bm-marker 当数组发生变化时 marker 携带的数据错乱

浏览器版本号

谷歌

Vue 版本号

2.0+

组件库版本号

0.21.18

现象描述

循环遍历 bm-marker 当数组发生变化时 marker 携带的数据错乱

完整异常信息

想做的效果是  当地图拖动或者缩放时   不清除地图上的 覆盖物     
直接把新可视区域的数据 赋值给 之前的循环数组  
（目的是想拖动或者缩放时，地图上的覆盖物不闪那么一下）  
可是这样做 marker 携带的数据就会错乱  

在线示例 / 仓库 URL

https://codesandbox.io/embed/k3127ovoj7

复现用例

无

预期输出

希望 marker 携带的数据  不会乱

实际输出

先行感谢 ，

[ThinkerK]

label 的content 是正确的 因为 源码中 label content 是被监听的 label.vue 代码

如果我想给 marker 添加一个 data 属性 应该如何去监听？ this.originInstance 的扩展 是在哪里写，没找到

[xiaogaofudao]

同问，根据数据遍历生成 bm-marker。当 数据有变动，比如删除其中一个。地图剩余的点。绑定的点击事件拿到的当时的数据有错误。会拿到已经删除的 点绑定的数据。

[xiaogaofudao]

还有就是希望 加一个不自动 监听 dom 更新的开关。现在是判断支持 MutationObserver。强行刷新了，会造成弹窗闪烁。让用户自己决定是否启用这个功能

[xiaogaofudao]

多谢大佬了静等更新

[wangjunfeng1991]

用index去取值可以解决这个问题！

<bm-marker v-for="(marker,index) of markList" :key="index" @click="infoWindowOpen(index)" :position="{lng: markList[index].lng, lat: markList[index].lat}" :icon="{url:markList[index].icon, size: {width: 40, height: 50}}"> <bm-label :content="markList[index].plateNumber" :position="{lng: markList[index].lng, lat: markList[index].lat}" :offset="labelOffset" :labelStyle="{color: 'blue', fontSize : '12px'}"/>

infoWindowOpen (index) { // console.log(e,this.markList,3); // debugger; var that=this; var e=that.markList[index]; that.infoPoints.lng = e.lng; that.infoPoints.lat = e.lat;

  var point = new BMap.Point(e.lng, e.lat);
  var myGeo = new BMap.Geocoder();
  // 根据坐标得到地址描述
  myGeo.getLocation(point, function (result) {
    e.location = result.address;
    that.infoData.lat=e.lat;
    that.infoData.lng=e.lng;
    that.infoData.icon=e.icon;
    that.infoData.entityType=e.entityType;
    that.infoData.speed=e.speed;
    that.infoData.location=e.location;
   
    that.isShow = true;
  });
}

[hioak]

用index去取值可以解决这个问题！

<bm-marker v-for="(marker,index) of markList" :key="index" @click="infoWindowOpen(index)" :position="{lng: markList[index].lng, lat: markList[index].lat}" :icon="{url:markList[index].icon, size: {width: 40, height: 50}}">

infoWindowOpen (index) { // console.log(e,this.markList,3); // debugger; var that=this; var e=that.markList[index]; that.infoPoints.lng = e.lng; that.infoPoints.lat = e.lat;

  var point = new BMap.Point(e.lng, e.lat);
  var myGeo = new BMap.Geocoder();
  // 根据坐标得到地址描述
  myGeo.getLocation(point, function (result) {
    e.location = result.address;
    that.infoData.lat=e.lat;
    that.infoData.lng=e.lng;
    that.infoData.icon=e.icon;
    that.infoData.entityType=e.entityType;
    that.infoData.speed=e.speed;
    that.infoData.location=e.location;
   
    that.isShow = true;
  });
}

请问下你的BMap是怎么引用的我的老是报BMap not defined

[xiaose-A]

v-for="item in markList" :key="item.id" item添加一个id