Reactjs 反应谷歌地图位置pin卡在错误位置

我的应用程序中有一个实例，它在谷歌地图上绘制了多个位置图标。当有多个图标时，有时，一个位置不同的图标会卡在另一个图标上。新图标不可单击，在稍微推动地图后会自动删除。请参见下图 在我看来，问题在于谷歌地图绘制了多个位置图标。 有什么好主意，我怎么能解决这个问题

下面是我在安装组件时如何设置状态

this.state = this.convertEntityStructureToComponentState(props.entities, props.hideInfoInitially, props.showDirections);

ConvertEntityStructureTomponentState函数如下所示：

convertEntityStructureToComponentState(entities, hideInfoInitially, showDirections=false) {
if (!entities || entities.length === 0) {
  // send seattle longitude and latitude and set markers as null
  const center =  {
    lat: 47.602743,
    lng: -122.330626
  };

  return {
    center: center,
    markers: []
  };
}

const markers = [];
let firstEntityReadings = null;
let destinationPosition = null;
let selectedEntityPosition = null;
let showPathLine = true;


for (let i = 0; i < entities.length; i++) {
  if (entities[i].location) {
    if (!firstEntityReadings) {
      firstEntityReadings = {
        lat: entities[i].location.lat,
        lng: entities[i].location.lng
      };
    }

    let showLocation = true;

    if (entities[i].type === 'customer') {
      destinationPosition = i;
    } else {
      if (this.isTimeInOnlineRange(entities[i].time)) {
        selectedEntityPosition = i;
      } else if (this.props.customerView) {
        showLocation = false;
        showPathLine = false;
      }
    }

    if (showLocation) {
      markers.push({
        position: new google.maps.LatLng(entities[i].location.lat, entities[i].location.lng),
        showInfo: false,
        data: {
          name: entities[i].name,
          address: entities[i].address,
          id: entities[i].id,
          time: entities[i].time,
          color: entities[i].type === 'customer' ? entities[i].color : '#ccc',
          type: entities[i].type,
          image_path: entities[i].image_path
        }
      });
    }
  }
}

//Optimize where we get previous location and don't call direction if it's the same
if (showDirections && destinationPosition != null && selectedEntityPosition != null && showPathLine) {
  const DirectionsService = new google.maps.DirectionsService();
  DirectionsService.route({
    origin: new google.maps.LatLng(entities[selectedEntityPosition].location.lat, entities[selectedEntityPosition].location.lng),
    destination: new google.maps.LatLng(entities[destinationPosition].location.lat, entities[destinationPosition].location.lng),
    travelMode: google.maps.TravelMode.DRIVING,
  }, (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      this.setState({
        directions: result
      });
    }
  });
} else {
  this.setState({
    directions: null
  });
}

return {
  center: firstEntityReadings,
  markers: markers
};

}

链接到Github问题： 链接到位置图组件的要点：

---

问题在于我在地图上画的标记的键和参考号。为密钥生成随机ID正确修复了该问题

我们不是透视者。请分享你的代码的相关部分，这样我们就可以对可能出现的问题做出有根据的猜测。@trixn我用一些代码更新了我的问题。很难理解你的代码，因为它是一个很长的嵌套ifs。仍然缺少渲染谷歌地图的相关部分。您是否尝试在渲染方法中记录this.state.markers，并查看它在多次渲染期间是否包含预期的元素？我已经记录了this.state.markers，并且它恰好包含三个贴图管脚，这是应该的。但是，在这里可以看到的，并通过一点轻推被移除的，不在状态中。这有点像是地图上美国某处的第三个地图图钉的影子。@trixn我已经用渲染地图的完整组件的要点更新了这个问题。它很凌乱，但我希望它能让你了解整个情况！