web-dev-qa-db-fra.com

Ajouter un marqueur à Google Maps dans google-map-react

J'utilise le google-map-react Package NPM pour créer une carte Google et plusieurs marqueurs.

Question: Comment pouvons-nous ajouter les marqueurs Google Maps par défaut à la carte?

De ce problème Github , il semble que nous devons accéder à l'API Google Maps interne en utilisant la fonction onGoogleApiLoaded .

En se référant à n exemple des documents de l'API JS de Google Maps , nous pouvons utiliser le code suivant pour rendre le marqueur, mais comment définir les références à map?

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
});

Code actuel: 

renderMarkers() {
    ...
}

render() {
    return (
        <div style={{'width':800,'height':800}}>
            <GoogleMap
                bootstrapURLKeys={{key: settings.googleMapApiKey}}
                defaultZoom={13}
                defaultCenter={{ 
                    lat: this.props.user.profile.location.coordinates[1], 
                    lng: this.props.user.profile.location.coordinates[0]
                }}
                onGoogleApiLoaded={({map, maps}) => this.renderMarkers()}
                yesIWantToUseGoogleMapApiInternals
            >
            </GoogleMap>
        </div>
    );
}
javascriptgoogle-mapsreactjsmeteorgoogle-maps-api-3
21
Nyxynyx

Cela peut ne pas être tout à fait clair d'après la description du fichier Lisez-moi, mais l'argument maps est en fait l'objet API maps (et map est, bien sûr, l'instance actuelle de Google Map) . Par conséquent, vous devez passer les deux à votre méthode:

onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)}

et utilisez-les:

renderMarkers(map, maps) {
  let marker = new maps.Marker({
    position: myLatLng,
    map,
    title: 'Hello World!'
  });
}
16
MasterAM

Ajouter un marqueur sur votre carte n'est pas aussi facile que nous le souhaiterions, principalement parce que les documents confus mais ici vous avez un exemple super simple:

const Map = props => {
  return (
    <GoogleMapReact
     bootstrapURLKeys={{ props.key }}
     defaultCenter={{lat: props.lat, lng: props.lng}}
     defaultZoom={props.zoom}>

       {/* This is the missing part in docs:
         *
         * Basically, you only need to add a Child Component that
         * takes 'lat' and 'lng' Props. And that Component should
         * returns a text, image, super-awesome-pin (aka, your marker).
         *
         */}
       <Marker lat={props.lat} lng={props.lng}} />
    </GoogleMapReact>
  )
}

const Marker = props => {
  return <div className="SuperAwesomePin"></div>
}
7
Jobsamuel

Basé sur la réponse de MasterAM .

Si vous utilisez des crochets React, celui-ci pourrait faire l'affaire:

import React, { useMemo, useEffect } from 'react';

const createControlledPromise = () => {
  let resolver;
  let rejector;
  const promise = new Promise((resolve, reject) => {
    resolver = resolve;
    rejector = reject;
  });
  return { promise, resolver, rejector };
};

const useMarker = ({ lat, lng }) => {
  const { 
    promise: apiPromise, 
    resolver: handleGoogleApiLoaded 
  } = useMemo(
    createControlledPromise,
    []
  ).current;

  useEffect(
    () => {
      let marker;
      apiPromise.then(api => {
        const { map, maps } = api;
        marker = new maps.Marker({ position: { lat, lng }, map });
      });
      return () => {
        if (marker) {
          marker.setMap(null);
        }
      };
    },
    [lat, lon],
  );
  return { handleGoogleApiLoaded };
};

const Location = ({
  location: { locationName, lat, lng }
}) => {
  const { handleGoogleApiLoaded } = useMarker({ lat, lng });
  return (
    <section>
      <h1>{locationName}</h1>
      <p>
        <GoogleMapReact
          bootstrapURLKeys={{ key: __GOOGLE_MAP_API_KEY__ }}
          center={{ lat, lng }}
          defaultZoom={11}
          onGoogleApiLoaded={handleGoogleApiLoaded}
        />
      </p>
    </section>
  );
};
0
Gleb Lobastov