react-google-maps：无法找到命名空间＆＃39; google＆＃39;

Question

我正在尝试使用此库＆＃34; react-google-maps＆＃34; 在我的应用程序中显示谷歌地图。从github页面跟踪教程后，我在第一次运行时遇到此错误（这是一个create-react-app + typescript应用程序）：

我有点迷失在这里。任何人之前都使用过这个库吗？这是我的代码：

import * as React from 'react';
import { GoogleMap, Marker, withGoogleMap, withScriptjs } from 'react-google-maps';
import { compose, withProps } from 'recompose';

const TerrMap: React.StatelessComponent<{
    isMarkerShown: boolean
}> = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=__my_api_key__&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />,
      }),
      withScriptjs,
      withGoogleMap
)( (props: any) => {

    return (
        <GoogleMap
            defaultZoom={8}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}
        >
            {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
        </GoogleMap>
    );
} ) as any;

Answer 1

如果尚未回答。这是解决此问题的方法。

1. 添加这两个键入"@types/googlemaps"和"@types/markerclustererplus"
2. 确保在项目中包括这些类型。您可以用不同的方法来做，但是最简单的方法是像这样在tsconfig.json文件中添加这两种类型。

-

{
    "compilerOptions":{
        ...,
        "types":[
            ...
            "googlemaps",
            "markerclustererplus"
        ] 
    }
}

这应该可以解决您的问题。

Answer 2

您必须在文件顶部添加此表示法

/*global google*/

我希望它适合你

Answer 3

如果您使用打字稿，则必须安装：

npm install --save-dev @types/googlemaps

可以在这里找到更好的描述： react-google-maps-cannot-find-namespace-google