Zugreifen auf Kartenreferenz mit React-google-maps v6 +

Question

Die neuesten Änderungen an react-google-maps scheinen die mapHolderRef-Eigenschaft für den Zugriff auf die Karteninstanz entfernt zu haben. Wenn man sich die neuen Komponentenänderungen ansieht, sieht es so aus, als ob sie interne konstante Kontextreferenzen aufrufen, aber es scheint nicht so zu sein, als sollten diese leicht zugänglich gemacht werden.

Bevor die neueste Version konnte ich so etwas wie unten tun, um eine individuelle Steuerung der Karte hinzuzufügen:

paintControl(props) { 
    const { rendered } = this.state; 
    const position = props.position || google.maps.ControlPosition.TOP_CENTER; 
    const map = props.mapHolderRef.getMap(); // This no longer works 
    const controlElement = React.createElement(props.customControl, { map, ...props }); 

    ReactDOM.render(controlElement, this.customControlDiv); 
    this.customControlDiv.style.zIndex = this.props.zIndex || 1; 

    if (!rendered) { 
    this.setState({ rendered: true },() => { 
     map.controls[position].push(this.customControlDiv); 
    }); 
    } 
} 

Es Noten in der diese mapHolderRef Eigenschaft Erwähnens 6.0 Release war nicht mehr zugänglich ist durch Requisiten , aber stattdessen durch den Kontext. Ich habe versucht, das zur Arbeit zu bringen, aber ich kann es nicht herausfinden.

Ich verwende derzeit die onMapLoad Callback, um die React-Map-Instanz zu erhalten, aber die tatsächliche Google Map-Referenz zu bekommen scheint zu fehlen. Ich bin in der Lage gewesen, eine verwendbare Referenz zu erhalten, indem ich mache:

const map = props.mapHolderRef.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; 

Aber das scheint wirklich janky und falsch. Es erstellt auch mehrere Steuerelemente anstatt das eine zu verwalten, also ist etwas da draußen. Ich bin mir nicht sicher, ob etwas in den neuen Dokumenten fehlt oder ob dies in der neuen Version nicht verfügbar ist.

Hat jemand Glück gehabt, benutzerdefinierte Kontrollen oder Bestandteile zu erhalten, um mit der neuen react-google-maps Version zu arbeiten?

Danke für Ihre Hilfe!

Answer 1

Es scheint, dass es keine ideale Lösung für dieses Problem auch in v7.2 ist, aber es gibt ein list of constants als 7,0 eingeführt, die in einem eleganteren Weg zu den veralteten Referenzen verweisen:

import { MAP } from 'react-google-maps/lib/constants

Siehe this Github commment - es wurde vom Repo-Besitzer bestätigt.

Answer 2

Max Antwort hinzuzufügen, das ist, wie ich es immer am Ende in meinem Code arbeiten v7.2.0 mit:

import { MAP } from 'react-google-maps/lib/constants'; 

export default class CustomControl extends Component { 
    static contextTypes = { [MAP]: PropTypes.object }; 

    ... 

    // this.context[MAP] returns the google map instance object 
    if (this.context[MAP]) { 
    const map = this.context[MAP]; 
    map.controls[position].push(this.customControlDiv); 
    }