Estoy usando el google-mapa-reaccionar MECANISMO nacional de prevención paquete para crear un Mapa de Google y varios marcadores.

Pregunta: ¿Cómo se puede añadir el valor predeterminado de Google Maps marcadores al mapa?

A partir de este Github problema, parece que necesitamos para acceder a la interna de la API de Google Maps mediante la onGoogleApiLoaded función.

Refiriéndose a un ejemplo de los Mapas de Google maps API de JS docs, podemos utilizar el siguiente código para mostrar el marcador, pero ¿cómo podemos definir las referencias para map?

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

Código Actual:

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>
    );
}
InformationsquelleAutor Nyxynyx | 2016-12-31

3 Comentarios

  1. 16

    Esto puede no ser totalmente evidente de la descripción en el Readme, pero la maps argumento es, de hecho, la API de google maps objeto (y map es, por supuesto, el actual Mapa de Google de instancia). Por lo tanto, debe pasar a través de su método:

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

    y uso de ellos:

    renderMarkers(map, maps) {
      let marker = new maps.Marker({
        position: myLatLng,
        map,
        title: 'Hello World!'
      });
    }
    • ¿usted también sabe cómo agregar el infowindow? Estoy teniendo dificultades para implementar este
    • Realmente he utilizado el raw del API de google Maps con este paquete, sino declarativo de Reaccionar de la API. No la ejemplo de Google en la documentación de la API de trabajo para usted? Si no, probablemente debería crear una nueva pregunta con su código y explicaciones.
    • ¿cómo podría usted volver a renderizar el marcador cada vez que el mapa de los cambios?
  2. 7

    La adición de un marcador en el mapa no es tan fácil como nos gustaría, sobre todo porque la confuso docs pero aquí tienes un sencillo ejemplo:

    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>
    }
    • Puede publicar su SuperAwesomePin clase?
    • ¿Cómo importar Marker?
    • usted no necesita. Marker es sólo un Componente personalizado. Algo así como const Marker = props => <div className="pin"></div>
    • aquí tienes @newman gist.github.com/jobsamuel/56496033bfb4d0f3e316aeb88341ed16 (lo Siento por la ultra-super-mega tardanza en responderte)
  3. 0

    Basadas en la respuesta por MasterAM.

    Si el uso de reaccionar ganchos, este podría hacer el truco:

    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>
    );
    };

Dejar respuesta

Please enter your comment!
Please enter your name here