Быстрый старт
@pbe/react-yandex-maps
— это обертка для API Яндекс.Карт, которая позволяет
отображать карты Яндекса в вашем React приложении с минимальными усилиями 🎉
Установка
Используйте npm/yarn для установки библиотеки из npm:
Через npm:
npm install --save @pbe/react-yandex-maps
Через yarn:
yarn add @pbe/react-yandex-maps
Добавляем карту в приложение
Добавление карт в приложение можно разделить на два этапа.
Во-первых, мы добавим компонент провайдера, который будет обрабатывать загрузку API Яндекс.Карт и предоставлять его любому интересующему компоненту на странице. Обычно вы не хотите иметь несколько провайдеров на одной странице. Хорошее место для размещения вашего провайдера, может быть в верхней части вашего приложения:
import { YMaps } from '@pbe/react-yandex-maps';
const App = () => (
<YMaps>
<div>My awesome application with maps!</div>
</YMaps>
);
Затем добавьте компонент Map
с желаемым состоянием где-нибудь на странице:
import { YMaps, Map } from '@pbe/react-yandex-maps';
const App = () => (
<YMaps>
<div>
My awesome application with maps!
<Map defaultState={{ center: [55.75, 37.57], zoom: 9 }} />
</div>
</YMaps>
);
Вот и все! Теперь, как только API Яндекс.Карт загружается YMaps
компонентом
провайдера, Map
компонент будет отображать ymaps.Map
объект на странице.
Прежде чем вы начнете экспериментировать с библиотекой, я настоятельно рекомендую быстро просмотреть раздел "Что поддерживается?" и "Основные принципы"
Что поддерживается?
Эта библиотека представляет собой тонкую обертку над API Яндекс.Карт, многие объекты и функции API Яндекс.Карт поддерживаются компонентами React, но не все и не все их возможности.
Поддерживаемые возможности
- Изменение запроса API Яндекс.Карт через
YMaps
компонент провайдера - Получение доступа к API Яндекс.Карт в ваших компонентах через
withYMaps
HOC - Точечная загрузка необходимых модулей API с API модулей Яндекс.Карт
- Контролируемые и неконтролируемые компоненты для каждого поддерживаемого объекта
- Корпоративный API через
YMaps
query
проп
Контролируемые компоненты не 100% контролируемые, так как нет возможностей
остановить обновление объектов Яндекс.Карты. Поэтому, при использовании
контролируемых компонентов, вы должны держать в голове, что
state/properties/options
и объекты Яндекс.Карты могут быть не
синхронизированны.
MapObjects
Map, Panorama
GeoObjects
GeoObject, Placemark, Polyline, Rectangle, Polygon, Circle, Clusterer, ObjectManager
Controls
Button, FullscreenControl, GeolocationControl, ListBox, ListBoxItem, RouteButton, RouteEditor, RoutePanel, RulerControl, SearchControl, TrafficControl, TypeSelector, ZoomControl
Что не поддерживается?
Отрисовка React DOM нод для Яндекс.Карты фабрики шаблонов, не поддерживается (т.е. вы не можете визуализировать содержимое балуна с помощью этой библиотеки), смотри FAQ для больше информации.