"Google"未定义:在React JS中添加Google Maps API

bir*_*d03 3 javascript google-maps

在这里反应JS新手,所以请耐心等待.

我在我的index.html文件中添加了Google Maps API脚本,如下所示:

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

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

  </head>
  <body>

    <div id="root"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=MY-API-IS-HERE"></script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

然后,我安装google-maps-reactnpm所以我可以使用它的组件.我在我的组件中导入了这个库,如下所示:

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

class BaseMap extends Component {
    constructor() {
        super();
        this.state = {
            center: {lat: 42, lng: 14},
            zoom: 10
        }
    };

    render() {
        let location = {
            center: '',
            zoom: ''
        }

        return (
            <GoogleMapReact>
            </GoogleMapReact>
        );
    }

    myMethod(){
        let geocoder = new google.maps.Geocoder(); 
    }
}

export default BaseMap;
Run Code Online (Sandbox Code Playgroud)

但是,当我尝试使用时google.maps.Geocoder,我得到:

Line 30:  'google' is not defined  no-undef
Run Code Online (Sandbox Code Playgroud)

据我所知,google应该是一个全局的窗口对象,因为我在html文件中包含了Google Maps API脚本.但是,它没有定义.

有任何想法吗?Tnx提前!

bir*_*d03 8

好的,这似乎有效:

解决方案是google在类上面的变量中隐式定义,如下所示:

const google = window.google
Run Code Online (Sandbox Code Playgroud)

这里回答:

谷歌没有使用create-react-app在react应用程序中定义