谷歌 map 反應

Question

 {?loading, ( <GoogleMapReact defaultZoom={isEqual(latLong? USLatLong): 4. 18} defaultCenter={latLong.lat && latLong?lng: latLong: USLatLong} bootstrapURLKeys={{ key. process.env:REACT_APP_GMP_API_KEY }} yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded={handleApiLoaded} hoverDistance={20} onTilesLoaded={() => setLoading(false)} /> ) : ( <Loader />)}

我有一個 state 變量加載。 如果是這樣，那么我想展示 Loader。 如果它是假的，那么我想顯示谷歌 map。

現在的問題是，在 map 加載完成后，如何在 google-map-react 中設置變量。

 const [loading, setLoading] = useState(false);

Answer 1

我的代碼看起來像這樣。

我定義const [mapApiLoaded, setMapApiLoaded] = React.useState(false); ，類似於您loading state 變量。

注意下面我有一個屬性onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)} 。 apiHasLoaded是我在 map 加載后設置變量的地方。

      <GoogleMapReact
        center={center}
        zoom={zoom}
        draggable={draggable}
        onChange={onChange}
        onChildMouseDown={onMarkerInteraction}
        onChildMouseUp={onMarkerInteractionMouseUp}
        onChildMouseMove={onMarkerInteraction}
        onChildClick={onStoreMarkerClick}
        onClick={onClick}
        bootstrapURLKeys={{
          key: process.env.REACT_APP_GOOGLE_MAP_API_KEY!,
          libraries: ["places", "geometry"],
        }}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)}
      >

我的 apiHasLoaded function 定義如下：

  const apiHasLoaded = (map: any, maps: any) => {
    console.log("apiHasLoaded");
    setMapApiLoaded(true);
    setMapInstance(map);
    setMapApi(maps);
    generateAddress();
  };