it-swarm.com.de

Verwenden von Google Map in der React-Komponente

Ich versuche, Google Map in React Component zu verwenden, und es scheint nicht zu funktionieren. __ Ich beziehe mich derzeit auf https://developers.google.com/maps/documentation/javascript/adding-a-google -Karte

Hier ist der Code, den ich für meine Komponente habe:

class ContactBody extends React.Component {
  componentWillMount() {
    const script = document.createElement("script");
    const API = 'AIzaSyDbAz1XXxDoKSU2nZXec89rcHPxgkvVoiw';
    script.src = `https://maps.googleapis.com/maps/api/js?key=${API}&callback=initMap`;
    script.async = true;

    document.body.appendChild(script);
  };

  initMap() {
    const uluru = {lat: -25.363, lng: 131.044};
    const map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

  render() {
    
    this.initMap();
    
    return (
      <div>
        <h1>Contact</h1>
        <div id="map" style={{width: 400, height: 300}}></div>
      </div>
    )
  }
}

ReactDOM.render(
  <ContactBody />,
  document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react"></div>

Wenn ich das jedoch ausführen, erhalte ich "Unrecept ReferenceError: Google ist nicht definiert".

Kann mir jemand sagen, was mit meinem Code falsch ist?

Vielen Dank.

5
Eunicorn

Sie fügen Ihrem Dokument ein <script>-Tag hinzu, um das Google Maps-API zu laden. Sie warten jedoch nicht darauf, dass es tatsächlich geladen wird, bevor Sie Ihre initMap-Methode ausführen. Da es noch nicht geladen ist, existiert die Variable google noch nicht.

Sie haben der URL des Skripts callback einen Parameter mit dem Wert initMap hinzugefügt. Das Google Maps-API erkennt dies und führt eine Funktion mit dem Namen initMap aus, sobald es fertig ist. Die Methode " your initMap" ist jedoch nicht im globalen Bereich verfügbar und wird daher nicht ausgeführt.

Eine Möglichkeit, Ihren Code zu korrigieren, besteht darin, sich selbst ein Versprechen für die Google Maps-API zu machen und dieses Versprechen in einer (globalen) Callback-Funktion zu lösen, die die Google Maps-API ausführen kann. Dann warten Sie in Ihrem Komponentencode, bis das Versprechen aufgelöst wurde, bevor Sie fortfahren.

Das könnte ungefähr so ​​aussehen:

class ContactBody extends React.Component {
  getGoogleMaps() {
    // If we haven't already defined the promise, define it
    if (!this.googleMapsPromise) {
      this.googleMapsPromise = new Promise((resolve) => {
        // Add a global handler for when the API finishes loading
        window.resolveGoogleMapsPromise = () => {
          // Resolve the promise
          resolve(google);

          // Tidy up
          delete window.resolveGoogleMapsPromise;
        };

        // Load the Google Maps API
        const script = document.createElement("script");
        const API = 'AIzaSyDbAz1XXxDoKSU2nZXec89rcHPxgkvVoiw';
        script.src = `https://maps.googleapis.com/maps/api/js?key=${API}&callback=resolveGoogleMapsPromise`;
        script.async = true;
        document.body.appendChild(script);
      });
    }

    // Return a promise for the Google Maps API
    return this.googleMapsPromise;
  }

  componentWillMount() {
    // Start Google Maps API loading since we know we'll soon need it
    this.getGoogleMaps();
  }

  componentDidMount() {
    // Once the Google Maps API has finished loading, initialize the map
    this.getGoogleMaps().then((google) => {
      const uluru = {lat: -25.363, lng: 131.044};
      const map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
      const marker = new google.maps.Marker({
        position: uluru,
        map: map
      });
    });
  }

  render() {
    return (
      <div>
        <h1>Contact</h1>
        <div id="map" style={{width: 400, height: 300}}></div>
      </div>
    )
  }
}

ReactDOM.render(
  <ContactBody />,
  document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react"></div>

14
tremby

für diejenigen, die Fehler bekommen, wird Google nicht direkt über dem von Eslint genannten Fehler definiert 

const google = window.google;
3
Rida

So habe ich es gemacht:

import React from 'react';

export default class GoogleMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapIsReady: false,
    };
  }

  componentDidMount() {
    const ApiKey = 'XXXXXXXXXXXXXXXXXXXX';
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${ApiKey}`;
    script.async = true;
    script.defer = true;
    script.addEventListener('load', () => {
      this.setState({ mapIsReady: true });
    });

    document.body.appendChild(script);
  }

  componentDidUpdate() {
    if (this.state.mapIsReady) {
      // Display the map
      this.map = new window.google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 12,
        mapTypeId: 'roadmap',
      });
      // You also can add markers on the map below
    }
  }

  render() {
    return (
      <div id="map" />
    );
  }
}
2
Michael Yurin

Füge ein Skript zum head-Tag hinzu (ich empfehle reagiere-helm ) und gib dann window.initMap für die Funktion zum Initialisieren der Karte an, da im Skript src define (callback=initMap") eine globale Funktion namens 'initMap'.

import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';

const Map = () => {
  useEffect(() => {
    window.initMap = () => {
      new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      });
    };
  }, []);
  return (
    <>
      <Helmet>
        <script src="https://maps.googleapis.com/maps/api/js key=?key=YOUR_API_KEY&callback=initMap" async defer />
      </Helmet>
      <div style={{ height: "100%" }} id="map"></div>
    </>
  );
};

Wenn auf dem Server gerendert werden muss, überprüfen Sie dies in der Browser-Umgebung, da window in der node.js-Umgebung undefiniert ist:

... lang-js
if (process.browser) { // check browser environment
  window.initMap = (): void => {
    new google.maps.Map(document.getElementById('map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  };
}
...
1
Masih Jahangiri

Versuchen Sie, dies oben auf der Seite einzugeben (funktioniert für mich) -/* global google * /

0

Wenn Sie das Google API-Skript in Ihr index.html aufnehmen, müssen Sie createElement nicht angeben = in componentDidMount (). Sie können so etwas tun-

import React from 'react';
export default class GoogleMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapIsReady: false,
    };
  }

  componentDidMount() {
    //Load Map after DOM is loaded
    window.onload = this.setState({mapIsReady : true});
  }

  componentDidUpdate() {
    if (this.state.mapIsReady) {
      // Display the map
      this.map = new window.google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 12,
        mapTypeId: 'roadmap',
      });
      // You also can add markers on the map below
    }
  }

  render() {
    return (
      <div id="map"></div>
    );
  }
}
0
Parvez Siddiqi