在 React 中接入 Google Map

业务需求，正好对接了 google map 。初次使用，碰到了很多细节问题，于是总结整理，也算是学习过程自己踩过的坑吧。

一、React 中如何引入

1.使用 google-map-react ；

1	npm install --save google-map-react

使用示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

import React, { Component } from 'react'; import GoogleMapReact from 'google-map-react'; const AnyReactComponent = ({ text }) => <div>{text}</div>; class SimpleMap extends Component { static defaultProps = { center: {lat: 59.95, lng: 30.33}, zoom: 11 }; render() { return ( <GoogleMapReact defaultCenter={this.props.center} defaultZoom={this.props.zoom} > <AnyReactComponent lat={59.955413} lng={30.337844} text={'Kreyser Avrora'} /> </GoogleMapReact> ); } }

demo 演示地址

2.使用 react-google-maps ；

1 2	npm install --save react-google-maps # or yarn add react-google-maps

简单代码示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import { withGoogleMap, GoogleMap, Marker, } from "react-google-maps"; const MapWithAMarker = withGoogleMap(props => <GoogleMap defaultZoom={ 8} defaultCenter={ { lat: -34.397, lng: 150.644 }} > <Marker