google map react

谷歌地图反应 ·

google-map-react是一个基于一小部分 Google Maps API 编写的组件。它允许您在 Google 地图上渲染任何 React 组件。它是完全同构的，可以在服务器上渲染。此外，即使未加载 Google Maps API，它也可以在浏览器中呈现地图组件。它使用内部的、可调整的悬停算法 - 地图上的每个对象都可以悬停。

它允许您创建像本示例这样的界面（您可以滚动表格、缩放/移动地图、悬停/单击标记以及单击表格行）

入门

在简单的情况下，您只需将lat和lng属性添加到GoogleMapReact组件的任何子组件中。

在 jsbin 中查看实际效果

 import React from "react" ;
import GoogleMapReact from 'google-map-react' ;

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

export default function SimpleMap ( ) {
  const defaultProps = {
    center : {
      lat : 10.99835602 ,
      lng : 77.01502627
    } ,
    zoom : 11
  } ;

  return (
    // Important! Always set the container height explicitly
    < div style = { { height : '100vh' , width : '100%' } } >
      < GoogleMapReact
        bootstrapURLKeys = { { key : "" } }
        defaultCenter = { defaultProps . center }
        defaultZoom = { defaultProps . zoom }
      >
        < AnyReactComponent
          lat = { 59.955413 }
          lng = { 30.337844 }
          text = "My Marker"
        / >
      < / GoogleMapReact >
    < / div >
  ) ;
}

我的地图没有出现！

• 确保容器元素具有宽度和高度。地图将尝试填充父容器，但如果容器没有大小，地图将折叠为 0 宽度/高度。这不是 google-map-react 的要求，而是一般 google-maps 的要求。

安装

节点管理：

 npm install --save google-map-react

纱：

 yarn add google-map-react

特征

与您的组件配合使用

您可以在地图上渲染很酷的动画反应组件，而不是默认的 Google 地图标记、气球和其他地图组件。

同构渲染

它在服务器上呈现。 （欢迎搜索引擎） （您可以在浏览器开发工具中禁用 javascript，并重新加载任何示例页面以查看其工作原理）

独立于 Google Maps API 计算的组件位置

它在加载 Google Maps API 之前（甚至没有）在地图上渲染组件。

Google 地图 API 按需加载

无需在页面顶部放置<script src=标记。 Google Maps API 在首次使用GoogleMapReact组件时加载。

使用 Google 地图 API

您可以使用onGoogleApiLoaded访问 Google Maps map和maps对象，在这种情况下，您需要将yesIWantToUseGoogleMapApiInternals设置为true

...

const handleApiLoaded = ( map , maps ) => {
  // use map and maps objects
} ;

...

< GoogleMapReact
  bootstrapURLKeys = { { key : /* YOUR KEY HERE */ } }
  defaultCenter = { this . props . center }
  defaultZoom = { this . props . zoom }
  yesIWantToUseGoogleMapApiInternals
  onGoogleApiLoaded = { ( { map , maps } ) => handleApiLoaded ( map , maps ) }
>
  < AnyReactComponent
    lat = { 59.955413 }
    lng = { 30.337844 }
    text = "My Marker"
  / >
< / GoogleMapReact >

PST：记住将yesIWantToUseGoogleMapApiInternals设置为 true。

示例在这里

内部悬停算法

现在地图上的每个对象都可以悬停（但是，如果需要，您仍然可以使用 css 悬停选择器）。如果您尝试缩小此处的示例，您仍然可以将鼠标悬停在几乎每个地图标记上。

示例

• 在地图上放置反应组件：简单（来源）

• 自定义地图选项：示例（来源）

• 悬停效果：简单的悬停（来源）；距离悬停（来源）

• GoogleMap 事件：示例（来源）

• 示例项目：main（源）；胡言乱语（与 main 来源相同）

• 使用 Hooks 的集群示例（新：来源，文章） clustering-with-hooks

• 聚类示例（来源）google-map-clustering-example

• 如何渲染数千个标记（新：源） google-map-thousands-markers

• 示例： 示例 旧示例

• jsbin 示例 jsbin 示例

• webpackbin 示例（新）带有 webpackbin 示例的文档（正在进行中）

• 本地开发示例（新）开发示例

文档

您可以在这里找到文档：

• API参考

• 新文档（正在进行中）

贡献

本地开发分为两个部分（最好使用两个选项卡）。

首先，运行 rollup 来观察您的src/模块，并在您进行更改时自动将其重新编译到dist/中。

npm start # runs rollup with watch flag

第二部分将运行链接到模块本地版本的example/ create-react-app。

 # (in another tab)
cd example
npm start # runs create-react-app dev server

现在，每当您对src/中的库或示例应用程序的example/src进行更改时， create-react-app都会实时重新加载您的本地开发服务器，以便您可以实时迭代您的组件。

手动链接安装

如果在尝试运行示例应用程序时出现错误Module not found: Can't resolve 'google-react-map'... ，您需要手动链接本地开发模块，请尝试以下步骤：

1. 在根文件夹中：

npm link

2. 进入example/并（安装其他依赖项后）执行：

npm link google-map-react

执照

麻省理工学院

已知问题

• 较旧的浏览器 (http://caniuse.com/#feat=promises) 需要 ES6 Promise polyfill 才能工作。

！！！我们正在寻找贡献者

我们正在积极寻找贡献者，请向所有者或任何合作者发送消息。