无法读取未定义的属性（读取地图）答案

【问题标题】：Cannot read property of undefined (reading maps)无法读取未定义的属性（读取地图）
【发布时间】：2022-01-12 12:00:23
【问题描述】：

我想用 Google 的DinstanceMatrixService 获取多个点之间的距离，但出现以下错误：

我多次使用google.maps...，它给了我关于google 未定义的错误。我在网上搜索，发现如果我在google.maps... 前面输入window，它应该可以工作，但它没有

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");
  }
}

还有我的进口：

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";

我正在使用react-google-maps。

【问题讨论】：

标签： javascript reactjs react-google-maps

【解决方案1】：

在使用 window.google 之前您可能需要加载事件。

来自文档：如果您需要访问地图对象，而不是 ref prop，则需要在组件上使用 onLoad 回调。

https://www.npmjs.com/package/@react-google-maps/api

【讨论】：

【解决方案2】：

如果您将模块中的库用作导入，您将无法访问window.google。如果你在模块外调用你的函数calculate_furthest_point，你应该在<head>标签中add谷歌地图脚本：

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

否则你应该从@react-google-maps包中导入和使用方法。

【讨论】：

【解决方案3】：

在某些时候这个东西是undefind，所以我的建议是把qm(?)放在window.google之后， var service = new window.google?.maps.DistanceMatrixService();

【讨论】：

如果我添加?，我会收到以下错误：Constructors in/after an Optional Chain are not allowed.，它引用window.googl?e.maps.DistanceMatrixService()中的()
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
来自文档：如果你想使用 window.google 对象，你需要在单独的模块中提取 GoogleMap，所以它是惰性执行的，然后 google-maps-api 脚本由。如果您在加载之前尝试使用 window.google，它将是未定义的，您将收到 TypeError。