reagieren-google-maps funktioniert nicht

Question

Ich baue diese Wetteranwendung. Alles scheint zu funktionieren, aber ich kann Google Maps nicht zum Laufen bringen. Ich habe gesehen, dass API-Schlüssel benötigt wird, ich importierte ihn. Dann folgte die Dokumentation von react-google-maps während der Installation in meinem Projekt, aber es funktioniert immer noch nicht, aber ich habe keine Fehler mehr in meiner Konsole.

Können Sie bitte schauen, was ist hier falsch? Fühlen Sie sich frei, es zu klonen. https://github.com/garstikaitis/weather-app/blob/master/src/components/google_map.js

http://arsti.net/weather-app/

Answer 1

Für die spezifische Anwendung in der Frage verwiesen, ich bin in der Lage, die Karte zu sehen, wenn ich die app lokal ausgeführt. Es ist jedoch sehr, sehr eng. Dies scheint kein Problem mit Google Maps zu sein, sondern ein HTML-Tabellenlayout, bei dem die Breite der Karte angepasst werden muss.

Ein weiteres Problem, ein allgemeines Problem, wenn Sie überhaupt keine Karte sehen, könnte an der height der Karte "100%" sein. Sie würden nach 100% der Höhe des übergeordneten Containers fragen, was leicht ein kollabierter div von null Höhe sein könnte, so dass Sie im Wesentlichen nach 100% von nichts fragen würden.

Hier ist ein Beispiel für die @next Version von react-google-maps mit (derzeit 7.0.0 während ich dies schreibe) und Reagieren 15.6.1:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { withGoogleMap, GoogleMap } from "react-google-maps"; 
import withScriptjs from "react-google-maps/lib/async/withScriptjs"; 

const GettingStartedGoogleMap = withScriptjs(withGoogleMap(props => (
    <GoogleMap 
    defaultZoom={3} 
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }} 
    /> 
))); 

ReactDOM.render(
    <div style={{ height: '600px' }}> 
    <GettingStartedGoogleMap 
     googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.28" 
     loadingElement={<div></div>} 
     containerElement={ <div style={{ height: `100%` }} /> } 
     mapElement={<div style={{ height: `100%` }} />} 
    /> 
    </div>, 
    document.getElementById('root') 
); 

Wenn Sie die äußere div ‚s feste Höhe von 600px entfernt oder Ersetzt durch 100% würde die div zusammenbrechen und Sie würden die Karte überhaupt nicht sehen. Hoffe das hilft.