Question

我正在使用与Google Map的React进行一个小项目，并且我使用了google-maps-react library。

每当我从服务器获取数据并提取纬度和经度信息并将其传递给HandleGoogleMap作为props并将其设置为initialCenter的子组件时，就会发生问题。，则地图会用latitude:0和longitude:0渲染一个位置。

但是，当我将initialCenter值更改为数字时，它将正确显示位置。但是，我还记录了纬度和经度道具，以确保它们不是数字。这是代码：

const HandleGoogleMap = props => {
  const { lat, lng } = props;

  // lat contains information of latitude
  // lng contains infromation of longitude

  console.log(lat);
  console.log(lng);

  return (
    <Map
      google={props.google}
      // when I change the value of lat and lng properties as numbers, it renders correctly 
      //but when I set values as props that the component passed by parent component, 
      //map renders lat: 0, lng:0 location
      initialCenter={{ lat: lat, lng: lng }}
      zoom={12}
    />
  );
};

export default GoogleApiWrapper({
  apiKey: "141423124123123123"
})(HandleGoogleMap);

Answer 1

我认为问题在于从api提取经纬度的异步特性。您正在将InitialCenter与这些值一起使用，这可能是问题所在。

initalCenter：获取包含经度和纬度的对象   坐标。加载时设置地图中心。

center：获取包含纬度和经度坐标的对象。   如果要在初始渲染后重新渲染地图，请使用此选项。

使用“ center”属性代替来自api的数据，因为操作是异步的，一旦收到数据，您将需要重新渲染地图

<Map
  google={props.google}
  center={{ lat: lat, lng: lng }}
  zoom={12}
/>

Answer 2

问题在于道具没有被加载，这就是它的工作方式。使用props.loaded，然后google={props.google}，如下所示：

const HandleGoogleMap = props => {
  if (!props.loaded) return <div>Loading...</div>;


  return (
    <Map
      google={props.google}
      // when I change the value of lat and lng properties as numbers, it renders correctly 
      //but when I set values as props that the component passed by parent component, 
      google={props.google}
      zoom={12}
    />
  );
};

export default GoogleApiWrapper({
  apiKey: "141423124123123123"
})(HandleGoogleMap);

Google-maps-react：父组件传递的道具的价值

2 个答案: