在ReactJs中实现Google Maps

我在使用npm包在ReactJs中实现Google Maps时遇到了很多麻烦。 希望本文可以帮助您避免遇到的麻烦。

寻找最佳套餐

问题主要是找到最好的程序包并附带良好的文档，以便我可以将我的Google地图显示在页面上并继续前进。 我发现最好的软件包是istarkov的 google-map-react 。

Google Map示例项目

对他来说，真正要做的就是创建一个实现google-map-react的React.Js示例项目。 这样您就可以在现实世界中看到一个示例 。

快速开始

他做得很好，可以帮助您快速入门他的文档，但在本示例中，我以防万一，您想立即复制并粘贴它。

在当前的React.JS目录中，在终端中运行以下代码行。

npm i -S google-map-react

然后创建一个组件，我将调用mine map.js 将以下代码行复制并粘贴到该文件中。

import React, { Component } from 'react'
import GoogleMapReact from 'google-map-react'

const AnyReactComponent = ({ text }) => <div>{ text }</div>;

export default class Map extends Component {
  static defaultProps = {
    center: { lat: 40.7446790, lng: -73.9485420 },
    zoom: 11
  }

render() {
    return (
      <div className='google-map'>
        <GoogleMapReact
          defaultCenter={ this.props.center }
          defaultZoom={ this.props.zoom }>
          <AnyReactComponent
            lat={ 40.7473310 }
            lng={ -73.8517440 }
            text={ 'Where's Waldo?' }
          />
        </GoogleMapReact>
      </div>
    )
  }
}

现在，您可以将此文件导入到您拥有的任何其他组件/容器文件中，并且该文件应在您的项目中显示Google的地图！ 为了进一步了解Google Maps，建议您在使用项目作为参考的同时阅读带有Google Maps API文档的google-map-react GitHub存储库 。

希望这对您有所帮助！

From: https://hackernoon.com/implement-google-maps-in-reactjs-5bc218074689