react中使用google map展示地图

1. 安装插件 google-maps-react

npm install google-maps-react --save

2. 使用

import React, { Component } from "react";
import { Map, GoogleApiWrapper, Marker } from "google-maps-react";

class MapContainer extends Component {
  render() {
    const mapStyles = {
      width: "100%",
      height: "400px",
    };

    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={{
          lat: 22.30080, // 纬度
          lng: 114.17868, // 经度
        }}
      >
        <Marker position={{ lat: 22.30080, lng: 114.17868 }} />
      </Map>
    );
  }
}

export const GoogleMap = GoogleApiWrapper({
  apiKey: process.env.REACT_APP_GOOLE_MAP_API,
  language: 'CN',
})(MapContainer);