React-BMap

React-BMap — это библиотека компонентов React, основанная на JavaScript API карт Baidu. Для использования этой библиотеки рекомендуется сначала ознакомиться с React и JavaScript API карт Baidu (http://lbsyun.baidu.com/index.php?title=jspopular).

React-BMap использует только жизненный цикл компонентов React для вызова соответствующих методов JavaScript API Baidu Maps. Например, в componentDidMount и componentDidUpdate добавляются объекты наложения на карту, а в componentWillUnmount они удаляются. Функция рендеринга React возвращает null, поэтому карта не отображается с помощью React. Вместо этого карта создаётся с использованием JavaScript API Baidu Maps, а React-BMap просто использует синтаксис компонентов React для упаковки JavaScript API Baidu Maps, что позволяет более удобно использовать его при работе с React.

3D-версия карты

Эта библиотека компонентов предназначена для 2D-карт. Если вы хотите использовать новую 3D-версию, рекомендуется использовать React-BMapGL. Новая версия GL поддерживает мощные функции, такие как плавное масштабирование, наклон карты и вращение, и может лучше использовать впечатляющие визуальные эффекты MapVGL (https://mapv.baidu.com/gl/docs/index.html).

Обратите внимание, что из-за того, что 3D-карты основаны на WebGL, некоторые функции могут отличаться от 2D-версии, если ваше устройство не поддерживает WebGL или вы предпочитаете стабильность. В этом случае вы всё равно можете выбрать эту библиотеку компонентов.

Примеры

Примеры использования можно найти в папке примеров (https://github.com/huiyan-fe/react-bmap/tree/master/docs/examples), а примеры эффектов доступны по адресу предварительного просмотра (https://huiyan-fe.github.io/react-bmap/examples/).

Установка и использование

Загрузка кода JavaScript API Baidu Maps в заголовок страницы

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=ваш ключ"></script>

Ключ можно получить на веб-сайте Baidu Map Open Platform (http://lbsyun.baidu.com/apiconsole/key).

Рекомендуется использовать npm для установки, а затем загружать через модули ES6

npm install react-bmap

Поддержка библиотек, упакованных в соответствии со стандартом UMD

<script src="http://huiyan-fe.github.io/react-bmap/dist/react-bmap.min.js"></script>

Пространство имён входа — window.ReactBMap пример предварительного просмотра пример исходного кода.

Hello World

import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'

<Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
    <Marker position={{lng: 116.402544, lat: 39.928216}} />
    <NavigationControl /> 
    <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="Содержание" title="Заголовок"/>
</Map>

Основные компоненты карты

Map (./src/components/map.md)

<Map center={{lng: 116.402544, lat: 39.928216}} zoom="12" />

Marker (./src/components/marker.md)

<Marker position={{lng: 116.402544, lat: 39.928216}}/>

Control (./src/components/control.md)

<NavigationControl />
<MapTypeControl />
<ScaleControl />
<OverviewMapControl />

InfoWindow (./src/components/infowindow.md)

<InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="Информация окна" title="Окно информации"/>

Графические компоненты: круглые, ломаные линии и многоугольные компоненты

Круг

<Circle 
    center={{lng: 116.403119, lat: 39.929543}} 
    fillColor='blue' 
    strokeColor='white' 
    radius="3000"
/>

Ломаная линия

<Polyline 
    strokeColor='green' 
    path={[
        {lng: 116.403119, lat: 39.929543},
        {lng: 116.265139, lat: 39.978658},
        {lng: 116.217996, lat: 39.904309}
    ]}
/>

Многоугольник

<Polygon 
    fillColor='red' 
    strokeColor='yellow' 
    path={[
        {lng: 116.442519, lat: 39.945597},
        {lng: 116.484488, lat: 39.905315},
        {lng: 116.443094, lat: 39.886494},
        {lng: 116.426709, lat: 39.900001}
    ]}
/>

Другие компоненты

MarkerList

<MarkerList 
    data={[
        {
            text: "Чанша-роуд",
            location: "113.22183,28.191712"
        },
        {
            text: "Аэропорт-экспресс",
            location: "113.057565,28.175208"
        }
    ]} 
    fillStyle="#ff3333" 
    animation={true} 
    isShowShadow={false} 
    multiple={true} 
    autoViewport={true}
/>

MapvLayer

<MapvLayer data={[]} options={{}} />

MapvglLayer

<MapvglView