map undefined但仍打印到控制台

Question

尝试在我的反应应用中使用谷歌地图。

这是我的Map.jsx组件

import React, { Component } from 'react';
import key from '../key';

class Map extends Component {

  componentDidMount() {
    let script = document.createElement('script')

    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', `https://maps.googleapis.com/maps/api/js?key=${key.API_KEY}&callback=initMap`);
    document.getElementsByTagName('head')[0].appendChild(script);

    window.initMap = () => {
      console.log('initMap');
      console.log(google);
      this.map = new google.maps.Map(this.refs.map, {
      });
    }
  }

  render() {
    const mapStyle = {
      height: "400px",
      width: "100%"
    };

    return <div ref="map" style={mapStyle} />;
  }

}

export default Map;

和index.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Match } from 'react-router';
import GoogleMapsLoader from 'google-maps';
import 'semantic-ui-css/semantic.css';

import App from './App';
import StakeCreator from './components/StakeCreator';

const Root = () => {
  return (
    <Router>
      <div>
        <Match exactly pattern="/" component={StakeCreator} />
        <Match pattern="/stake/:stakeId" component={App} />
      </div>
    </Router>
  )
}
GoogleMapsLoader.load(function(google) {
    render(
        <Root />,
       document.getElementById('root')
    );
})

什么是非常不寻常的是console.logs打印。但我还是得到了

  

错误＆＃39; google＆＃39;未定义

我注意到错误来自webpackHotDevClient

关于它的github有一个大问题

https://github.com/webpack/webpack/issues/2145

但似乎没有明确的解决方法。

Answer 1

好的，我已经在这里得到你的修复......首先，在index.js处理API密钥，如下所示：

import key from './key.js'
GoogleMapsLoader.KEY = key.API_KEY

然后在Map.jsx中，将componentDidMount()设置为：

componentDidMount() {
    let google = window.google
    this.map = new google.maps.Map(this.refs.map, {
      center: {lat: 33.7065883 , lng: -117.9818307},
      zoom: 8 //YOU HAVE TO SET A ZOOM LEVEL
    })
}

它适用于我，我已经显示了地图，看起来很棒！