reactjs - react-google-maps 定位销卡在错误的地方

Question

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

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

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

}

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

Answer 1

问题在于我在地图上绘制的标记的key和。ref生成随机 ID 以key正确解决问题。