google map react herunterladen - google map react Quellcode herunterladen

google map react

Anderer Quellcode

Support for React 18

Herunterladen

Google Map React ·

google-map-react ist eine Komponente, die über einen kleinen Satz der Google Maps-API geschrieben wurde. Damit können Sie jede React-Komponente auf der Google Map rendern. Es ist vollständig isomorph und kann auf einem Server gerendert werden. Darüber hinaus können Kartenkomponenten im Browser gerendert werden, auch wenn die Google Maps API nicht geladen ist. Es verwendet einen internen, anpassbaren Hover-Algorithmus – jedes Objekt auf der Karte kann mit der Maus bewegt werden.

Sie können damit Schnittstellen wie in diesem Beispiel erstellen (Sie können in der Tabelle scrollen, die Karte zoomen/verschieben, mit der Maus über Markierungen fahren/klicken und auf Tabellenzeilen klicken).

Erste Schritte

Im einfachen Fall müssen Sie lediglich lat und lng -Requisiten zu jedem untergeordneten Element der GoogleMapReact Komponente hinzufügen.

Sehen Sie es in Aktion bei jsbin

 import React from "react" ;
import GoogleMapReact from 'google-map-react' ;

const AnyReactComponent = ( { text } ) => < div > { text } < / div > ;

export default function SimpleMap ( ) {
  const defaultProps = {
    center : {
      lat : 10.99835602 ,
      lng : 77.01502627
    } ,
    zoom : 11
  } ;

  return (
    // Important! Always set the container height explicitly
    < div style = { { height : '100vh' , width : '100%' } } >
      < GoogleMapReact
        bootstrapURLKeys = { { key : "" } }
        defaultCenter = { defaultProps . center }
        defaultZoom = { defaultProps . zoom }
      >
        < AnyReactComponent
          lat = { 59.955413 }
          lng = { 30.337844 }
          text = "My Marker"
        / >
      < / GoogleMapReact >
    < / div >
  ) ;
}

Meine Karte wird nicht angezeigt!

Stellen Sie sicher, dass das Containerelement Breite und Höhe hat. Die Karte versucht, den übergeordneten Container zu füllen. Wenn der Container jedoch keine Größe hat, wird die Karte auf eine Breite/Höhe von 0 reduziert. Dies ist keine Voraussetzung für Google-Map-React, sondern eine Voraussetzung für Google-Maps im Allgemeinen.

Installation

npm:

 npm install --save google-map-react

Garn:

 yarn add google-map-react

Merkmale

Funktioniert mit Ihren Komponenten

Anstelle der standardmäßigen Google Maps-Markierungen, Sprechblasen und anderen Kartenkomponenten können Sie Ihre coolen animierten Reaktionskomponenten auf der Karte rendern.

Isomorphes Rendering

Es wird auf dem Server gerendert. (Willkommen bei den Suchmaschinen) (Sie können Javascript in den Entwicklungstools des Browsers deaktivieren und eine beliebige Beispielseite neu laden, um zu sehen, wie es funktioniert.)

Komponentenpositionen werden unabhängig von der Google Maps API berechnet

Es rendert Komponenten auf der Karte, bevor (und auch ohne) die Google Maps-API geladen wird.

Google Maps API wird bei Bedarf geladen

Es ist nicht erforderlich, oben auf der Seite ein <script src= -Tag zu platzieren. Die Google Maps API wird bei der ersten Verwendung der GoogleMapReact Komponente geladen.

Verwenden Sie die Google Maps-API

Sie können auf Google Maps- map und maps zugreifen, indem Sie onGoogleApiLoaded verwenden. In diesem Fall müssen Sie yesIWantToUseGoogleMapApiInternals auf true setzen

...

const handleApiLoaded = ( map , maps ) => {
  // use map and maps objects
} ;

...

< GoogleMapReact
  bootstrapURLKeys = { { key : /* YOUR KEY HERE */ } }
  defaultCenter = { this . props . center }
  defaultZoom = { this . props . zoom }
  yesIWantToUseGoogleMapApiInternals
  onGoogleApiLoaded = { ( { map , maps } ) => handleApiLoaded ( map , maps ) }
>
  < AnyReactComponent
    lat = { 59.955413 }
    lng = { 30.337844 }
    text = "My Marker"
  / >
< / GoogleMapReact >

PST: Denken Sie daran, yesIWantToUseGoogleMapApiInternals auf „true“ zu setzen.

Beispiel hier

Interner Hover-Algorithmus

Jetzt kann jedes Objekt auf der Karte mit der Maus bewegt werden (Sie können jedoch weiterhin CSS-Hover-Selektoren verwenden, wenn Sie möchten). Wenn Sie in diesem Beispiel versuchen, herauszuzoomen, können Sie den Mauszeiger immer noch über fast jede Kartenmarkierung bewegen.

Beispiele

Platzieren von Reaktionskomponenten auf der Karte: einfach (Quelle)
Benutzerdefinierte Kartenoptionen: Beispiel (Quelle)
Hover-Effekte: einfaches Hover (Quelle); Entfernung schweben (Quelle)
GoogleMap-Ereignisse: Beispiel (Quelle)
Beispielprojekt: main (Quelle); balderdash (gleiche Quelle wie main)
Clustering-Beispiel mit Hooks ( neu : Quelle, Artikel) Clustering-with-Hooks
Clustering-Beispiel (Quelle) google-map-clustering-example
So rendern Sie Tausende von Markierungen ( neu : Quelle) google-map-thousands-markers
Beispiele: Beispiele Alte Beispiele
jsbin-Beispiel jsbin-Beispiel
Webpackbin-Beispiele ( neu ) Dokumente mit Webpackbin-Beispielen (in Bearbeitung)
lokales Entwicklungsbeispiel (neues) Entwicklungsbeispiel

Dokumentation

Die Dokumentation finden Sie hier:

API-Referenz
NEUE DOCS (in Bearbeitung)

Beitragen

Die lokale Entwicklung ist in zwei Teile unterteilt (idealerweise mithilfe von zwei Registerkarten).

Führen Sie zunächst rollup aus, um Ihr src/ -Modul zu überwachen und es automatisch in dist/ neu zu kompilieren, wenn Sie Änderungen vornehmen.

npm start # runs rollup with watch flag

Im zweiten Teil wird die example/ create-react-app ausgeführt, die mit der lokalen Version Ihres Moduls verknüpft ist.

 # (in another tab)
cd example
npm start # runs create-react-app dev server

Wenn Sie jetzt eine Änderung an Ihrer Bibliothek in src/ oder am example/src der Beispiel-App vornehmen, lädt create-react-app Ihren lokalen Entwicklungsserver live neu, sodass Sie Ihre Komponente in Echtzeit iterieren können.

Manuelle Linkinstallation

Wenn beim Versuch, die Beispiel-App auszuführen, die Fehlermeldung Module not found: Can't resolve 'google-react-map'... müssen Sie Ihr lokales Entwicklungsmodul manuell verknüpfen. Führen Sie die folgenden Schritte aus: