Работа с картами: Leaflet, Google Maps

Основы работы с Leaflet

Leaflet — это лёгкая и гибкая библиотека для работы с интерактивными картами на веб-страницах. Основные преимущества Leaflet — простота использования, поддержка большинства современных браузеров и высокая производительность.

Установка и подключение

Leaflet можно подключить через npm:

npm install leaflet

или через CDN:

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
Инициализация карты

Создание карты в Vue-компоненте начинается с простого шаблона:

<template>
  <div id="map" style="height: 500px;"></div>
</template>

<script>
import L from 'leaflet';

export default {
  name: 'LeafletMap',
  mounted() {
    const map = L.map('map').setView([55.751244, 37.618423], 10); // Москва

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);
  }
}
</script>

Ключевые моменты:

  • L.map('id') создаёт карту в элементе с указанным id.
  • setView([lat, lng], zoom) задаёт начальную позицию и масштаб.
  • L.tileLayer(url, options) подключает слой картографических тайлов.
Работа с маркерами и всплывающими окнами

Маркер добавляется с помощью метода L.marker():

const marker = L.marker([55.751244, 37.618423]).addTo(map);
marker.bindPopup('<b>Москва</b><br>Столица России.').openPopup();
  • bindPopup(content) привязывает всплывающее окно к маркеру.
  • openPopup() открывает окно сразу после добавления.
Полилинии и полигоны

Leaflet поддерживает геометрические объекты:

const polyline = L.polyline([
  [55.751244, 37.618423],
  [55.761244, 37.628423],
  [55.771244, 37.638423]
], { color: 'red' }).addTo(map);

const polygon = L.polygon([
  [55.751244, 37.618423],
  [55.761244, 37.628423],
  [55.751244, 37.638423]
], { color: 'blue' }).addTo(map);

Полилинии и полигоны поддерживают события click, mouseover, mouseout, что позволяет создавать интерактивные карты.

Интеграция Leaflet с Vue

Для масштабируемых проектов рекомендуется использовать библиотеку vue2-leaflet или vue3-leaflet, которая предоставляет компоненты Vue для карты, маркеров и слоёв.

Пример использования компонента карты:

<template>
  <l-map :zoom="10" :center="[55.751244, 37.618423]" style="height: 500px">
    <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    <l-marker :lat-lng="[55.751244, 37.618423]">
      <l-popup>Москва</l-popup>
    </l-marker>
  </l-map>
</template>

<script>
import { LMap, LTileLayer, LMarker, LPopup } from 'vue3-leaflet';

export default {
  components: { LMap, LTileLayer, LMarker, LPopup }
}
</script>

Такой подход упрощает работу с реактивными данными и обеспечивает лучшую интеграцию с экосистемой Vue.

Работа с Google Maps

Google Maps предоставляет мощные возможности для отображения карт, маршрутов, геокодирования и интерактивных объектов.

Подключение Google Maps

Для работы с Google Maps необходимо получить API-ключ и подключить скрипт:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

В Vue это удобно делать динамически через lifecycle hooks или использовать готовые обёртки, например @fawmi/vue-google-maps.

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

Простейший пример инициализации карты:

<template>
  <div id="google-map" style="height: 500px;"></div>
</template>

<script>
export default {
  mounted() {
    const map = new google.maps.Map(document.getElementById('google-map'), {
      center: { lat: 55.751244, lng: 37.618423 },
      zoom: 10
    });

    new google.maps.Marker({
      position: { lat: 55.751244, lng: 37.618423 },
      map,
      title: "Москва"
    });
  }
}
</script>

Особенности:

  • google.maps.Map создаёт карту в указанном контейнере.
  • Параметры center и zoom задают начальное положение.
  • google.maps.Marker добавляет маркеры с возможностью привязки событий.
Работа с событиями и инфо-окнами

Для интерактивности маркеры могут реагировать на события:

const infoWindow = new google.maps.InfoWindow({
  content: '<b>Москва</b><br>Столица России.'
});

marker.addListener('click', () => {
  infoWindow.open(map, marker);
});

Google Maps поддерживает сложные геометрические объекты — линии, полигоны, круги, многоугольники — с кастомизацией стилей и событий.

Интеграция с Vue

Для реактивного взаимодействия рекомендуется использовать обёртки:

<template>
  <GMapMap :center="{lat: 55.751244, lng: 37.618423}" :zoom="10" style="height: 500px">
    <GMapMarker :position="{lat: 55.751244, lng: 37.618423}" :clickable="true" />
  </GMapMap>
</template>

<script>
import { GMapMap, GMapMarker } from '@fawmi/vue-google-maps';

export default {
  components: { GMapMap, GMapMarker }
}
</script>

Использование таких компонентов позволяет полностью интегрировать карту в реактивную модель данных Vue, связывать маркеры с состоянием приложения и управлять событиями через методы и свойства компонента.

Сравнение Leaflet и Google Maps

  • Leaflet легче по весу, полностью бесплатен, отлично подходит для кастомных слоёв и быстрого прототипирования.
  • Google Maps обладает мощными API для маршрутов, геокодирования, поиска мест и визуализации больших данных, но требует API-ключ и имеет ограничения на бесплатное использование.
  • Интеграция с Vue проще через компоненты сторонних библиотек, что позволяет использовать реактивные свойства и управлять картой через состояние приложения.

Продвинутые возможности

  1. Кастомные маркеры и иконки Leaflet: L.icon({ iconUrl, iconSize }) Google Maps: icon: 'url_to_icon'

  2. Кластеры маркеров Leaflet: leaflet.markercluster Google Maps: MarkerClusterer

  3. Геокодирование и маршруты Google Maps предоставляет полноценное API Directions и Geocoding для построения маршрутов и поиска координат.

  4. События карты и слоёв Обе библиотеки поддерживают события клика, наведения, изменения масштаба, но Google Maps предоставляет больше встроенных событий и детальную документацию по ним.

  5. Интеграция с Vuex/Pinia Карты могут быть связаны с глобальным состоянием, что позволяет управлять маркерами и данными динамически, используя реактивные хранилища Vue.

Эта методика работы с Leaflet и Google Maps создаёт основу для разработки сложных интерактивных картографических приложений на Vue.js с полной поддержкой реактивности, кастомизации и расширенных функций картографии.

Оглавление