J'ai intégré google maps dans mon site Web et je souhaite ajouter un marqueur avec l'emplacement de l'utilisateur. Le premier fichier est Map.js et le second MapContainer.js. Dans MapContainer.js dans ce fichier, j'ai toutes les données pour la carte ...

0
Vali Talpas 16 mars 2021 à 20:50

1 réponse

Meilleure réponse

Placez simplement le composant Marker dans GoogleMap de la même manière que vous ajoutez des cercles.

const Map = (props) => {
  return (
    <GoogleMap defaultZoom={props.zoom} defaultCenter={props.center}>
      <Marker position={{ lat: 45.764288, lng: 21.209806 }} />
      /* circles */
    </GoogleMap>
  );
};

Vous pouvez également ajouter un autre accessoire au composant Carte et passer le marqueur avec d'autres accessoires.

<Map marker={ props.marker } style={ /* etc. */ }/>

//inside GogleMap
<Marker position={ props.marker } />

MISE À JOUR

Utilisez ma réponse précédente mais ajoutez également un nouvel état à MapContainer qui sera transmis à Map. Cet état sera la position de l'utilisateur tirée de l'API de géolocalisation.

const Map = (props) => {
    return (
         <GoogleMap defaultZoom={props.zoom} defaultCenter={props.center}>
             <Marker position={{ lat: 45.764288, lng: 21.209806 }} />
             /* circles */
          </GoogleMap>
     );
};
export default function MapContainer() {
    const [ marker, setMarker ] = useState(null)

    useEffect(() => {
        navigator.geolocation.getCurrentPosition(
            ( location ) => setMarker({ 
               let: location.coords.latitude,
               lng: location.coords.longitude
            })
        )
    }, [])

    return (
        <div>
            <Map
                marker={ marker }
                style={{ borderRadius: "25px" }}
                /* etc. */
            />

        </div>
    );
}

Ensuite, vous pouvez passer le marqueur comme accessoire à la carte.

0
Tomasz Kisiel 16 mars 2021 à 19:01