Question

我正在努力在React组件中使用Google Map API。我不想使用流行的react-google-maps或google-map-react软件包，而是创建自己的软件包。

我设法从React组件加载带有Google Map API的脚本标记。但是，如何从此处操作Google API？例如，使用下面的基本配置初始化地图？

  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

这是我的组件。任何建议表示赞赏！谢谢！

＆＃13;

import React, { Component } from 'react';

// Load Google API in script tag and append 
function loadScript(src) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    script.src = src;
    script.addEventListener('load', function() {
      resolve();
    });
    script.addEventListener('error', function(e) {
      reject(e);
    });
    document.body.appendChild(script);
  });
}
const script = 'https://maps.googleapis.com/maps/api/js?key=MY_API_KEY';

class MyGoogleMap extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    // first load the script into html
    loadScript(script).then(function() {
      console.log('SUCCESS');
      // Where do I go from here?
    });
  }
  render() {
    return <div />;
  }
}

export default MyGoogleMap;

＆＃13;

Answer 1

使用ref创建GoogleMap组件，以在该div中显示谷歌地图。

import React, { Component } from 'react';

class GoogleMap extends Component {
     componentDidMount() {
         new google.maps.Map(this.refs.map, {
            zoom: 12,
            center: {
                lat: this.props.lat,
                lng: this.props.lon
             }
          });
      }

  render() {
      return <div className="google-map" ref="map" />
  }
}

export default GoogleMap;

在你喜欢的组件中使用它：

<GoogleMap lat={lat} lon={lon}/>

通过城市的纬度和经度。为了能够看到它，你需要设置css类google-map的宽度和高度（或者你命名的任何东西）。例如：

div.google-map {
    height: 150px;
    width: 250px;
}

Fiddle.js preview

修改

内部头部加载脚本：

<script src="https://maps.googleapis.com/maps/api/js"></script>

我认为你已经这样做了，因为在你的代码中你也使用new google.maps...。如果你不能像谷歌那样称呼它，请尝试new window.google.maps...

Answer 2

我实际上找到了自己的解决方案，所以我正在为那些遇到同样问题的人分享。

基本逻辑是使用window对象来访问google。因此，在我按照问题加载脚本后，我将地图初始化为：

＆＃13;

  initMap = () => {
    // 'google' could be accessed from 'window' object
    const map = new window.google.maps.Map(
      document.getElementById('googleMap'),
      {
        zoom: 14,
        center: { lat: LATITUDE, lng: LONGTITUDE }
      }
    );
    // putting a marker on it
    const marker = new window.google.maps.Marker({
      position: { lat: LATITUDE, lng: LONGTITUDE },
      map: map
    });
  };

  render() {
    return (
      <div id="googleMap" style={width: WIDTH, height: HEIGHT}/>
    );
  }

＆＃13;

欢迎任何评论：）

在React组件中使用Google Map API

2 个答案: