javascript - 映射未定义但仍打印到控制台

Question

尝试让谷歌地图在我的 React 应用程序中工作。

这是我的 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 打印。但我仍然得到一个

error 'google' is not defined

我确实注意到错误来自webpackHotDevClient

github上有一个关于它的大问题

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

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

Answer 1

好的，我已经在这里解决了您的问题...首先，在 index.js 中处理 API key ，如下所示:

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
    })
}

它对我有用，我已经显示了 map ，看起来很棒!