react中使用google map展示地图

黛玉戴玉逮鱼

于 2024-03-22 17:45:37 发布

阅读量330

点赞数 3

分类专栏：前端文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_44730335/article/details/136948054

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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);