javascript - 当我单击谷歌地图上的标记时，它会将地图移动到默认中心而不是显示信息窗口？

Question

因此，我一直在尝试通过添加多个标记并根据这些标记数据（如位置、描述、标题等）显示信息窗口来构建自己的谷歌地图。当我有一个变量保存虚拟数据时，它在打开信息窗口时工作正常，但是当我把它移到保存 props.data 时，我就像一个 excel 表一样，它不允许我点击标记。标记出现并且它们都在正确的位置但是当我单击标记时，我的地图会回到我的默认中心坐标所在的位置并且不会打开信息窗口。

我认为这可能是道具问题，所以我尝试设置一个 useeffect 挂钩以将传入的道具保存到状态，然后将标记保存在状态而不是变量中，但是当我单击标记时这也不起作用。我不确定它是否在我的代码中，或者我是否需要使其成为标记集群或其他东西，但我不明白为什么当我使用虚拟数据变量而不是道具数据时它会起作用。

import React, { useState, useEffect } from "react";
import {
  GoogleMap,
  LoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";
import apiKey from "../config.js";

export const MapContainer = (props) => {
  const [selected, setSelected] = useState({});

  const [accounts, setAccounts] = useState([]);

  useEffect((props) => {
    setAccounts(props.data);
  }, [props.data])

  const onSelect = (item) => {
    setSelected(item);
  };

  const mapStyles = {
    height: "50vh",
    width: "100%",
  };

  let defaultCenter = (selected.location) ? selected.location :  {lat: 37.9101, lng: -122.0652}

  return (
    <LoadScript googleMapsApiKey={apiKey.apiKey}>
      <GoogleMap mapContainerStyle={mapStyles} zoom={12} center={defaultCenter}>

        { accounts.length > 0 &&
                  accounts.map((item) => {
                    console.log(item)
                    return (
                      <Marker
                        key={item._id}
                        position={{lat: item.latitude, lng: item.longitude}}
                        onClick={() => onSelect(item)}>

                        {selected.location && (
                          <InfoWindow
                            position={selected.location}
                            clickable={true}
                            onCloseClick={() => setSelected({})}
                          >
                            <p>{selected.name}</p>
                            <p>{selected.description}</p>
                          </InfoWindow>
                        )}

                      </Marker>
                    );
                  })
        }
      </GoogleMap>
    </LoadScript>
  );
};

export default MapContainer;

提前感谢您的帮助，这让我完全难过。

标签： javascriptreactjsgoogle-mapsstate