Question

我在我的项目中使用webpack和reactjs，现在我想整合google map api。首先，我添加了＃34; react-google-maps＆＃34;：＆＃34; ^ 4.9.1＆＃34;在我的package.json文件上。下面是我的组件类。

import React, {PropTypes, Component} from 'react';

import { GoogleMap, Marker, SearchBox } from "react-google-maps";
import shouldPureComponentUpdate from 'react-pure-render/function';

const greatPlaceStyle = {
  // initially any map object has left top corner at lat lng coordinates
  // it's on you to set object origin to 0,0 coordinates
  position: 'absolute',
  width: 512,
  height: 512,
  left: 512 / 2,
  top: 512 / 2,

  border: '5px solid #f44336',
  borderRadius: 512,
  backgroundColor: 'white',
  textAlign: 'center',
  color: '#3f51b5',
  fontSize: 16,
  fontWeight: 'bold',
  padding: 4
};

export default class SimpleMapPage extends Component {
  static defaultProps = {
    center: {lat: 59.938043, lng: 30.337157},
    zoom: 1,
    greatPlaceCoords: {lat: 59.724465, lng: 30.080121}
  };

  shouldComponentUpdate = shouldPureComponentUpdate;

  constructor(props) {
    super(props);
  }

  render() {
    return (
       <GoogleMap>

        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}>

        <MyGreatPlace lat={59.955413} lng={30.337844} text={'A'} />
        <MyGreatPlace {...this.props.greatPlaceCoords} text={'B'} />

      </GoogleMap>
    );
  }
}

export default class MyGreatPlace extends Component {
  static propTypes = {
    text: PropTypes.string
  };

  static defaultProps = {};

  //shouldComponentUpdate = shouldPureComponentUpdate;

  constructor(props) {
    super(props);
  }

  render() {
    return (
       <div style={greatPlaceStyle}>
          {this.props.text}
       </div>
    );
  }
}

在我的index.html文件中，我在javascripts下面添加了。第一个是goold map api依赖。第二个是由webpack打包的bundle.js。当我访问我的应用程序时，谷歌地图没有显示出来。我认为问题是无法在我的组件类上导入google map api。导入googleapis的正确方法是什么？

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2sDQZ-36NLlY4iMvoiuQ7mS1n-v8iq2M" async defer></script>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>

Answer 1

我实现了两个回调成功和错误的功能，并检查谷歌是否加载。如果没有加载，则开始加载使用的load-script以将脚本节点附加到DOM中的元素

import loadScript from 'load-script';

const HOST = 'https://maps.googleapis.com/maps/api/js';
const KEY = 'YOUR API KEY';
const URL = `${HOST}?key=${KEY}&libraries=places`;

const loadGoogleMapApi = (
  success = () => {},
  error = () => {}
) => {
  if (window.google) {
    success();
  } else {
    loadScript(URL, err => {
      const callback = err ? error : success;
      callback();
    });
  }
};

export default loadGoogleMapApi;

然后我在我的反应组件中使用了这个函数：

initialize() {
  this.api = L.map(this.map);
  this.markers = L.featureGroup();

  this.api.addLayer(this.markers);

  loadGoogleMapApi(() => {
    this.api.addLayer(new L.Google('ROADMAP'));
  });   
}

componentDidMount() {
  this.initialize();
  this.draw();
}

Answer 2

我会留下这个评论作为评论，但我还没有评论权力。您是否尝试将该组件作为从请求到Google地图的回调的一部分进行渲染？我想知道请求的异步性质是否会影响其显示。

考虑将您的Google地图包含在内：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

在您的代码中：

let initMap = () => {
  ReactDOM.render(
    <SimpleMapPage />,
    document.getElementById('...')
  );
}

我没有看到你在任何地方创建组件的新实例，但我认为你做了。

如何在反应项目

2 个答案: