Question

在这里反应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>

然后，我使用google-maps-react安装了npm，因此我可以使用它的组件。我在我的组件中导入了这个库，如下所示：

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;

但是，当我尝试使用google.maps.Geocoder时，我得到：

Line 30:  'google' is not defined  no-undef

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

有什么想法吗？ Tnx提前！

Answer 1

好的，这似乎有效：

解决方案是在类上面的变量中隐式定义@javax.inject.Singleton，如下所示：

google

在这里回答：

google is not defined in react app using create-react-app

＆＃39;谷歌＆＃39;未定义：在React JS中添加Google Maps API

1 个答案: