GoogleMap JSX组件中未定义的变量

Undefined variable in GoogleMap JSX component

本文关键字：变量 未定义 JSX 组件 GoogleMap      更新时间：2023-09-26

在我的应用程序中，我的Google Map JSX组件（由其他人编写）的开头有以下代码片段：

import React from 'react';
import { Button } from 'react-bootstrap';
import {GoogleMapLoader, GoogleMap, Marker, InfoWindow, DirectionsRenderer} from 'react-google-maps';
import {
  default as canUseDOM,
} from "can-use-dom";
const DirectionsService = new google.maps.DirectionsService();

当我使用客户端呈现并在客户端上执行此代码时，它运行时不会出现预期行为的错误。然而，当我使用ReactDOM.renderToString（）切换到服务器端渲染时，我会遇到以下错误：

var DirectionsService = new google.maps.DirectionsService();
                            ^
ReferenceError: google is not defined

详细查看代码。变量"google"以前在我的代码中没有定义过。

我的问题是：

  1. 变量"google"在哪里定义
  2. 为什么客户端渲染执行正常，而服务器端抛出错误

非常感谢你的解释。

变量google来自客户端异步加载的https://maps.googleapis.com/maps/api/js。

在服务器上，这个脚本没有加载，事情就中断了。您使用的组件似乎不是完全同构的，因此它只能在客户端工作。

我过去使用过谷歌地图react，强烈推荐并且完全同构。

相关文章：