react-google-maps 定位针卡在错误的位置

Question

我的应用程序中有一个 react-google-maps 实例，它在 google 地图上绘制多个位置图标。当有多个图标时，有时，一个具有不同位置的图标会卡在另一个图标上。新图标不可点击，并在向地图稍微推一下后自动删除（见下图）
IMO，问题在于 google 地图绘制多个位置图标。知道吗，我该如何解决这个问题？

这是我在安装组件时设置状态的方式

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

convertEntityStructureToComponentState() 函数如下所示：

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
};

}

Link 到 Github 问题：https://github.com/tomchentw/react-google-maps/issues/805
Link 位置图组件要点：https://gist.github.com/arximughal/f91b7a922a4711e25ef82ed9ac6427b5

Answer 1

问题出在我在地图上绘制的标记的 key 和 ref 上。为 key 生成一个随机 ID 正确地解决了这个问题。

react-google-maps 定位针卡在错误的位置

react-google-maps location pin is stuck at wrong place

reactjs

google-maps

google-maps-markers

react-google-maps