google map react

Google Map React ·

google-map-react — это компонент, написанный на основе небольшого набора API Карт Google. Он позволяет отображать любой компонент React на карте Google. Он полностью изоморфен и может отображаться на сервере. Кроме того, он может отображать компоненты карты в браузере, даже если API Карт Google не загружен. Он использует внутренний настраиваемый алгоритм наведения — можно навести курсор на каждый объект на карте.

Он позволяет создавать интерфейсы, подобные этому примеру (вы можете прокручивать таблицу, масштабировать/перемещать карту, наводить курсор/нажимать на маркеры и нажимать на строки таблицы).

Начиная

В простом случае вам просто нужно добавить реквизиты 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 Maps по умолчанию, выносок и других компонентов карты вы можете отображать на карте свои крутые анимированные компоненты реагирования.

Изоморфный рендеринг

Он рендерится на сервере. (Добро пожаловать, поисковые системы) (вы можете отключить JavaScript в инструментах разработки браузера и перезагрузить любой пример страницы, чтобы увидеть, как он работает)

Позиции компонентов рассчитываются независимо от Google Maps API

Он отображает компоненты на карте до (и даже без) загрузки API Google Maps.

Загрузка API Google Maps по требованию

Нет необходимости размещать тег <script src= вверху страницы. API Карт Google загружается при первом использовании компонента GoogleMapReact .

Используйте API Карт Google

Вы можете получить доступ к map Google Maps и объектам maps с помощью onGoogleApiLoaded , в этом случае вам нужно будет установить для 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: пример (источник)

• Пример проекта: основной (исходный); чушь (тот же источник, что и основной)

• Пример кластеризации с использованием хуков ( новое : источник, статья)

• Пример кластеризации (источник) google-map-clustering-example

• Как визуализировать тысячи маркеров ( новое : источник) google-map-thousand-markers

• Примеры: Примеры Старые примеры

• пример jsbin пример jsbin

• примеры webpackbin ( новые ) документы с примерами webpackbin (в разработке)

• пример локальной разработки (новый) пример разработки

Документация

Вы можете найти документацию здесь:

• Справочник по API

• НОВЫЕ ДОКУМЕНТЫ (в разработке)

Способствовать

Локальная разработка разбита на две части (в идеале с использованием двух вкладок).

Во-первых, запустите накопительный пакет, чтобы просмотреть ваш модуль 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.

!!! Мы ищем соавторов

Мы активно ищем участников. Пожалуйста, отправьте сообщение Владельцу или любому из Соавторов.