Recherche de site Web

javascript - React Google Maps Api Zoomer au maximum à chaque actualisation

J'essaie d'implémenter l'API Google Maps dans mon projet et je suis la documentation du bundle NPM : https://www.npmjs.com/package/@react-google-maps/api

Cela fonctionne lorsque j'essaie d'appeler mon composant Google Map, mais à chaque actualisation, ma carte est zoomée au niveau maximum même avec le zoom correctement passé à la carte.

Quand je fais console.log(map), il indique que le zoom est réglé sur 22..

As-tu des idées d'où cela pourrait venir ?

Merci beaucoup !

:)

Voici le code

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 onLoad = 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;

Réponse n°1

J'ai découvert que ça venait de

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

Alors je l'ai simplement remplacé par

map.setZoom(zoom)

Réponse n°2

Je fais face au même problème ici avec une API, j'ai trouvé cette solution temporaire sur GitHub :

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

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

Articles connexes