0
170
ViewsNo se puede leer la propiedad de undefined (lectura de mapas)
Quería tomar la distancia entre varios puntos con DinstanceMatrixService de Google y aparece el siguiente error:
google.maps... varias veces y me dio el error de que google no está definido. Busqué en Internet y descubrí que si escribo window delante de google.maps... debería funcionar, pero no es así
function calculate_furthest_point() { var origin1 = new window.google.maps.LatLng(46.754516, 23.596608); var origin2 = new window.google.maps.LatLng(46.753906, 23.582223); var destinationA = new window.google.maps.LatLng(46.751362, 23.594867); var destinationB = new window.google.maps.LatLng(46.754986, 23.592378); var service = new window.google.maps.DistanceMatrixService(); service.getDistanceMatrix( { origins: [origin1, origin2], destinations: [destinationA, destinationB], travelMode: "DRIVING", transitOptions: TransitOptions, drivingOptions: DrivingOptions, unitSystem: UnitSystem, avoidHighways: Boolean, avoidTolls: Boolean, }, callback ); // callback() function callback(response, status) { if (status == "OK") { var origins = response.originAddresses; var destinations = response.destinationAddresses; for (var i = 0; i < origins.length; i++) { var results = response.rows[i].elements; for (var j = 0; j < results.length; j++) { var element = results[j]; var distance = element.distance.text; var duration = element.duration.text; var from = origins[i]; var to = destinations[j]; console.log( "DISTANCE : " + distance + " FROM: " + from + " TO: " + to ); } } } else console.log("ERROR"); } }y mis importaciones:
import logo from "./logo.svg"; import "./App.css"; import { GoogleMap, useLoadScript, Marker, InfoWindow, } from "@react-google-maps/api"; import { useEffect } from "react"; import { initializeApp } from "firebase/app"; import { getDatabase, ref, set, onValue, get, child, database, DataSnapshot, } from "firebase/database"; Estoy usando react-google-maps .
3 answers
Answer question0
Maibe necesita cargar el evento antes de usar window.google.
Desde el documento: si necesita acceso al objeto del mapa, en lugar de ref prop, debe usar la devolución de llamada onLoad en el componente.
0
Si usa la biblioteca en su módulo como una importación, no podrá acceder a window.google . Si llama a su función calculate_furthest_point el punto más lejano fuera del módulo, debe agregar la secuencia de comandos de Google Map en su etiqueta <head> :
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> De lo contrario, debe importar y usar métodos del paquete @react-google-maps .
0
En algún momento esto es undefind , por lo que mi recomendación es poner qm(?) después de window.google , var service = new window.google?.maps.DistanceMatrixService();