1
Ich habe erfolgreich Google Maps in meine React-App implementiert (get's User Location und erlaubt Marker zu bewegen), aber ich ' Ich bekomme einen zufälligen Fehler 'TypeError: Kann die Eigenschaft' maps 'von' undefined 'nicht lesen. Manchmal funktioniert alles perfekt, zu anderen Zeiten, wenn ich auffrische, bekomme ich diesen Fehler. Ich bin mir nicht sicher, welchen Teil des Codes soll ich mir meine volle Kartenkomponente und index.js so vielleicht liefern werdeGoogle Maps wirkt seltsam (zufällig funktioniert oder wirft Fehler) (TypeError: Kann 'Karten' von undefined nicht lesen)
Map-Datei schreiben:
import React from 'react';
class GoogleMap extends React.Component {
constructor(props) {
super(props);
//const getCoords = this.props.getCoords;
this.handleLocationError = this.handleLocationError.bind(this);
this.state = {
lat: '',
lon: ''
}
}
getCoords() {
const lat = this.state.lat;
const lon = this.state.lon;
this.props.getCoords(lat, lon)
}
componentDidMount() {
var map, infoWindow;
map = new window.google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 15
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var marker = new window.google.maps.Marker({
position: {
lat: position.coords.latitude,
lng: position.coords.longitude
},
map: map,
draggable: true,
title: 'Hello World!'
})
this.setState({
lat: position.coords.latitude,
lon: position.coords.longitude
})
this.getCoords();
document.getElementById('test').innerHTML = '<p>Want to export: Current Lat: ' + position.coords.latitude + ' Current Lng: ' + position.coords.longitude + '</p>';
map.setCenter(pos);
//marker listeners
window.google.maps.event.addListener(marker, 'dragstart', function() {
console.log('marker dotkniety');
document.getElementById('test').innerHTML = '<p>Currently dragging marker...</p>';
});
window.google.maps.event.addListener(marker, 'dragend', (e) => {
console.log('marker upuszczony');
document.getElementById('test').innerHTML = '<p>Want to export: Current Lat: ' + e.latLng.lat().toFixed(3) + ' Current Lng: ' + e.latLng.lng().toFixed(3) + '</p>';
console.log(this, 'this inside the event listener');
this.setState(({
lat: e.latLng.lat(),
lon: e.latLng.lng()
}))
this.getCoords();
});
},() => {
this.handleLocationError(true, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
this.handleLocationError(false, map.getCenter());
}
console.log('DID MOUNT');
console.log(this);
console.log(this.state);
}
handleLocationError(browserHasGeolocation, pos, map) {}
render() {
return (
<div>
<div id='map' />
<div id='test' />
</div>
)
}
}
export default GoogleMap
und index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHek4tQK4jSQhVSoxw4s4c8tz_1z3xuNI&callback=initMap">
</script>
<title>App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
Ich bin dankbar für Lösungen/Tipps oder Gründe, warum es so handelt.
try "map" Variable als globale Variable –
Didnt Arbeit zu erklären (es sei denn, Ich habe es falsch gemacht), bekomme immer noch Fehler nach der Aktualisierung – MazMat
Es gibt keinen Fehler für die Variable "map", die Sie erstellt haben. Es gibt Fehler für die Eigenschaftenzuordnung. bedeutet für eine Zeile mit 'window.google.map'. componentDidMount bedeutet nicht, dass alle Skripte geladen sind. – bennygenel