MapmyIndia предоставляет интерактивный API-интерфейс JavaScript для карт на основе Leaflet JS, который помогает визуализировать и отображать фрагменты карты при настройке внешнего вида карты на мобильном устройстве или в веб-браузере.

Функции

  • Масштаб: масштабируемая карта Индии с 15 уровнями масштабирования, 19 - самый высокий (самый подробный) и 4 - самый низкий (уровень страны) отображение карты.
  • Наложения: карта является ключом к любому виду транспорта, и, понимая это, мы в MapmyIndia предоставляем быстрые наложения по умолчанию, чтобы уменьшить шаблонный код для вашей базы кода.
  • Маркеры карты (кнопки). Указывайте на любое место, используя поведение кнопок по умолчанию, и укажите для него свой собственный стиль, чтобы он выглядел более адаптированным для вашего приложения.
  • Информационные окна (всплывающие окна). Нажатие на карту является естественным поведением, понимая это, мы предоставляем готовые информационные окна, так что если щелкнуть канцелярскую кнопку, всплывает информационное окно, и вы можете покажите там свой контент, связанный с этим местом.

Управление

  • Панель масштабирования: (по умолчанию отображается в центре с правой стороны). Помогает по умолчанию увеличивать и уменьшать масштаб карты.
  • Управление слоем карты: позволяет изменить вид карты с дороги на гибридный и визуальный.
  • Управление текущим местоположением: ограничивает карту текущим местоположением зрителя.
    Примечание.     Настройки местоположения должны быть включены и должны позволять сайту определять местоположение для этот элемент управления работать.
  • Управление поиском: с помощью API интерактивной карты MapmyIndia вы получаете встроенный быстрый поиск MapmyIndia. Этот элемент управления обеспечивает быстрый поиск по имени, адресу, eLoc (или Place_Id) со встроенным автоматическим предложением.

Начиная

Теперь, когда вы все познакомились с функциями, давайте перейдем к ним и посмотрим, как вы можете интегрироваться с вашим веб-сайтом React с нуля.

Инициализация карты

Включите API интерактивной карты MapmyIndia в исходный код сценария в разделе заголовка файла index.html.

<script src="https://apis.mapmyindia.com/advancedmaps/v1/<Lic_Key>/map_load?v=1.3"></script>

Добавить зависимость для React Map Component



mapmyindia-react
Компонент React для реализации MapmyIndia Interactive Map API Интегрируйте интерактивные карты из MapmyIndia в свой… www.npmjs.com



npm install mapmyindia-react --save

Как пользоваться

Импортируйте компонент карты в желаемый компонент, передайте соответствующие реквизиты. вот пример.

import Map from "mapmyindia-react";

class App extends React.Component {
  render() {
    return (
      <Map
        markers={[
          {
            position: [18.5314, 73.845],
            draggable: true,
            title: "Marker title",
            onClick: e => {
              console.log("clicked ");
            },
            onDragend: e => {
              console.log("dragged");
            }
          }
        ]}
      />
    );
  }
}

Это приведет к

Вы можете отправить несколько маркеров в массиве со значениями вроде

[
    {
      position: [],       // [lat, lng]
      draggable: false,   // true / false
      title: '',          // string
      onClick: () => {},   // Marker click event listener
      onDragend: ()=> {}   // Marker drag-end event listener
    }
  ]

Для карты и маркеров доступно несколько props` и listener.

Реквизиты для карт

Слушатели событий карты

Надеюсь это поможет. Пожалуйста, оставьте комментарий для любого отзыва