每次重繪時將GoogleMapsApiZoom反應為最大

我正在嘗試在我的專案中實作 Google Maps Api，并且我正在關注 NPM 包中的檔案：https ://www.npmjs.com/package/@react-google-maps/api

這在我嘗試呼叫我的谷歌地圖組件時有效，但是在每次重繪 時，即使縮放正確傳遞給地圖，我的地圖也會以最大級別縮放。

當我是 console.logging(map) 時，它說縮放設定為 22..

你有什么想法可能來自哪里嗎？

非常感謝！

:)

這是代碼

import React from 'react'
import { GoogleMap, useJsApiLoader, Marker } from '@react-google-maps/api';

export interface Props {
    location: {
        lat: number,
        lng: number
    },
    //zoom: number,
}

const containerStyle = {
  width: '600px',
  height: '400px'
};

const GoogleMapComponent: React.FC<Props> = ({
 location,
// zoom = 12,
}: Props) => {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: process.env.GOOGLE_MAP_API_KEY
  })

  const [map, setMap] = React.useState(null)
  console.log(location)

  const onl oad = React.useCallback(function callback(map) {
    const bounds = new window.google.maps.LatLngBounds(location);
    map.fitBounds(bounds);
    setMap(map)
  }, [])

  const onUnmount = React.useCallback(function callback(map) {
    setMap(null)
  }, [])

  return isLoaded ? (
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={location}
        onLoad={onLoad}
        onUnmount={onUnmount}
        zoom={12}
      >
        { /* Child components, such as markers, info windows, etc. */ }
        {/* <Marker position={location}/> */}
      </GoogleMap>
  ) : <></>
}

export default React.memo(GoogleMapComponent)

import React, { ReactElement, useState, useEffect, useMemo } from "react";
import { IPark } from "../../../types/park";
import parkService from "../../../services/Parks/park-service";
import { CContainer, CRow, CCol  } from '@coreui/react';
import GoogleMap from "../../../components/Map/GoogleMap";

const DashboardPark = (props: any): ReactElement => {
  
  const [park, setPark]: [any, (park: IPark) => void] =
    useState();
  const [isLoading, setIsLoading]: [boolean, (loading: boolean) => void] =
    useState<boolean>(true);
  const [isError, setIsError]: [string, (error: string) => void] = useState("");
  useEffect(() => {
    parkService.getPark(props.match.params.id).
      then((response) => {
        console.log(response)
        setPark(response.data);
        setIsLoading(false);
      })
      .catch((ex) => {
        console.log(ex.response)
        const error =
          ex.code === "ECONNABORTED"
            ? "A timeout has occurred"
            : ex.response.data
        setIsError(error);
        setIsLoading(false);
      });
  }, []);

  return (
    <CContainer>
      <CRow>
        <h2>List</h2>
      </CRow>
      <CRow>
        {isLoading ? (
          <p>Loading</p>
        ) : (
          <div>
            {/* <GoogleMap location={{lat: park.location[0],lng: park.location[1]}}/> */}
          </div>
          
        )}
        {isError ? (
          <p>{isError}</p>
        ) : ''}
      </CRow>
      <CRow>
        
      </CRow>
    </CContainer>
  );
};

export default DashboardPark;

uj5u.com熱心網友回復：

我發現它來自

const bounds = new window.google.maps.LatLngBounds(location);
map.fitBounds(bounds);

所以我簡單地將它替換為

map.setZoom(zoom)

uj5u.com熱心網友回復：

在這里使用 API 遇到同樣的問題，我在GitHub 上找到了這個臨時解決方案：

const OPTIONS = {
  minZoom: 4,
  maxZoom: 18,
}

....
render() { 
....
<GoogleMap
   options = {OPTIONS}
...
};

uj5u.com熱心網友回復：

我有一個臨時解決方案，但我不太喜歡它。

初始值和結束值必須不同。

const [zoom, setZoom] = useState(14)
 
...
 
useEffect(() => {
  setTimeout(() => {
      setZoom(15)
  }, 300);
}, [])
    
 return (
  ...
  <GoogleMap
    zoom={zoom}
    ...
  >
  ...
 )

標籤：javascript 反应 打字稿 谷歌地图 谷歌地图 api-3

上一篇：如何在使用c#將excel轉換為Google表格時復制樣式？

下一篇：在javascript中渲染地圖宣告