react中使用google map展示地图

最新推荐文章于 2024-08-09 08:13:24 发布

黛玉戴玉逮鱼

最新推荐文章于 2024-08-09 08:13:24 发布

阅读量536

点赞数 3

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

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

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了如何在React项目中安装并使用google-maps-react插件，展示了如何创建一个包含Marker和定制样式的基本地图组件，并通过GoogleApiWrapper封装Google地图API。

摘要由CSDN通过智能技术生成

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