Перейти к содержимому

Как построить маршрут в 2гис по нескольким точкам

  • автор:

Построение маршрута

Плагин Directions позволяет построить оптимальный маршрут между несколькими точками (до десяти).

Плагин использует Directions API, поэтому для его использования нужно получить соответствующий ключ. Чтобы это сделать, заполните форму по адресу dev.2gis.ru/order.

Чтобы подключить плагин, нужно добавить следующую строку после подключения основного скрипта MapGL:

Или установить нужный пакет npm:

npm install @2gis/mapgl-directions

Использование плагина

Чтобы отображать маршруты на карте, нужно сначала инициализировать объект Directions:

const directions = new mapgl.Directions(map, < directionsApiKey: 'Ключ Directions API', >);

В случае использования npm:

// Импортируйте плагин как ES-модуль. import < Directions >from '@2gis/mapgl-directions'; // . или как модуль CommonJS const < Directions >= require('@2gis/mapgl-directions'); const directions = new Directions(map, < directionsApiKey: 'Ключ для Directions API', >);

После инициализации можно вызывать следующие методы:

  • carRoute() для построения автомобильного маршрута;
  • pedestrianRoute() для построения пешеходного маршрута.

Оба метода принимают массив географических координат в качестве параметра points .

directions.carRoute(< points: [ [55.27887, 25.21001], [55.30771, 25.20314], ], >); directions.pedestrianRoute(< points: [ [55.27887, 25.21001], [55.30771, 25.20314], ], >);

Чтобы удалить маршрут, нужно вызвать метод clear() :

directions.clear();

Пример автомобильного маршрута

Выберите две точки на карте, чтобы построить между ними автомобильный маршрут.

Interactive example Source code

html> html lang="en"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>2GIS Map API title> meta name="description" content="MapGL API directions example" /> style> html, body, #container < margin: 0; width: 100%; height: 100%; overflow: hidden; > #reset < padding: 4px 10px; background: #00a81f; border-radius: 4px; box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5); border: none; color: #fff; font-size: 12px; cursor: pointer; > style> head> body> div id="container"> div> script src="https://mapgl.2gis.com/api/js/v1"> script> script src="https://unpkg.com/@2gis/mapgl-directions@^2/dist/directions.js"> script> script> const map = new mapgl.Map('container', < center: [55.31878, 25.23584], zoom: 13, key: 'Your API access key', >); const directions = new mapgl.Directions(map, < // This key can be used for demo purpose only! // You can get your own key on https://dev.2gis.com/order/ directionsApiKey: 'Your directions API access key', >); const markers = []; let firstPoint; let secondPoint; // A current selecting point let selecting = 'a'; const controlsHtml = ` `; new mapgl.Control(map, controlsHtml, < position: 'topLeft', >); const resetButton = document.getElementById('reset'); resetButton.addEventListener('click', function( ) < selecting = 'a'; firstPoint = undefined; secondPoint = undefined; directions.clear(); >); map.on('click', (e) => < const coords = e.lngLat; if (selecting != 'end') < // Just to visualize selected points, before the route is done markers.push( new mapgl.Marker(map, < coordinates: coords, icon: 'https://docs.2gis.com/img/dotMarker.svg', >), ); > if (selecting === 'a') < firstPoint = coords; selecting = 'b'; > else if (selecting === 'b') < secondPoint = coords; selecting = 'end'; > // If all points are selected — we can draw the route if (firstPoint && secondPoint) < directions.carRoute(< points: [firstPoint, secondPoint], >); markers.forEach((m) => < m.destroy(); >); > >); script> body> html>

Пример пешеходного маршрута

Выберите две точки на карте, чтобы построить между ними пешеходный маршрут.

Interactive example Source code

html> html lang="en"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>2GIS Map API title> meta name="description" content="MapGL API directions example" /> style> html, body, #container < margin: 0; width: 100%; height: 100%; overflow: hidden; > #reset < padding: 4px 10px; background: #00a81f; border-radius: 4px; box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5); border: none; color: #fff; font-size: 12px; cursor: pointer; > style> head> body> div id="container"> div> script src="https://mapgl.2gis.com/api/js/v1"> script> script src="https://unpkg.com/@2gis/mapgl-directions@^2/dist/directions.js"> script> script> const map = new mapgl.Map('container', < center: [55.31878, 25.23584], zoom: 17, key: 'Your API access key', >); const directions = new mapgl.Directions(map, < // This key can be used for demo purpose only! // You can get your own key on https://dev.2gis.com/order/ directionsApiKey: 'Your directions API access key', >); const markers = []; let firstPoint; let secondPoint; // A current selecting point let selecting = 'a'; const controlsHtml = ` `; new mapgl.Control(map, controlsHtml, < position: 'topLeft', >); const resetButton = document.getElementById('reset'); resetButton.addEventListener('click', function( ) < selecting = 'a'; firstPoint = undefined; secondPoint = undefined; directions.clear(); >); map.on('click', (e) => < const coords = e.lngLat; if (selecting != 'end') < // Just to visualize selected points, before the route is done markers.push( new mapgl.Marker(map, < coordinates: coords, icon: 'https://docs.2gis.com/img/dotMarker.svg', >), ); > if (selecting === 'a') < firstPoint = coords; selecting = 'b'; > else if (selecting === 'b') < secondPoint = coords; selecting = 'end'; > // If all points are selected — we can draw the route if (firstPoint && secondPoint) < directions.pedestrianRoute(< points: [firstPoint, secondPoint], >); markers.forEach((m) => < m.destroy(); >); > >); script> body> html>

Настройки отображения

Графически маршрут — это несколько линий, расположенных друг под другом:

  • основная зелёная линия маршрута сверху (route line);
  • белая линия подложки посередине (substrate line);
  • красная линия обводки внизу (halo line).

Ширину любой из этих линий можно изменить с помощью параметра style .

Ширину можно указать в пикселях или как InterpolateExpression — в таком случае она будет меняться в зависимости от масштаба карты.

Чтобы скрыть линию, нужно указать для неё ширину 0.

directions.carRoute(< points: [ [55.28273111108218, 25.234131928828333], [55.35242563034581, 25.23925607042088], ], style: < // Основная линия (зелёная) routeLineWidth: [ 'interpolate', ['linear'], ['zoom'], 10, 30, // Ширина основной линии будет меняться от 30 пикселей на масштабе 10 и ниже. 14, 3, // . до 3 пикселей на масштабе 14 и выше ], // Линия подложки (белая) substrateLineWidth: [ 'interpolate', ['linear'], ['zoom'], 10, 3, // Ширина линии подложки будет меняться от 3 пикселей на масштабе 10 и ниже. 14, 50, // . до 50 пикселей на масштабе 14 и выше ], // Ширина линии обводки будет равна 60 пикселям на любом масштабе карты haloLineWidth: 60, >, >);

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

Как построить пеший маршрут

Пешеходные маршруты в 2ГИС строятся с учётом пешеходных переходов, заборов и калиток. Также из маршрутов можно исключать лестницы — это настраивается отдельным фильтром при построении.

В случае с заборами и калитками 2ГИС предлагает общедоступную дорогу, исключающую территории с особым режимом допуска или прохода по пропускам. А ещё сервис учитывает расположение входов в жилые дома и организации, поэтому приведёт прямо к нужной двери.

Пешая маршрутизация работает в онлайн-версии 2ГИС и мобильных приложениях для iOS и Android. В ПК-версии 2ГИС такого функционала нет.

Также функция пока доступна не во всех городах присутствия 2ГИС. Мы всё время работаем над тем, чтобы таких городов стало больше.

Онлайн-версия

Чтобы построить маршрут для пешехода:

  1. Нажмите на кнопку «Поиск проезда» справа от поисковой строки и укажите адреса начальной и конечной точек пути. Либо откройте карточку нужной вам компании/дома и нажмите на кнопку «Проехать» в самом верху.
  2. Кликните на иконку пешехода под полями «Откуда» и «Куда». Если такой иконки нет, значит функция пока недоступна в городе, где вы строите маршрут для пешехода.
  3. Выберите один из предложенных маршрутов. Линия активного маршрута будет выделена тёмно-серым цветом, альтернативные маршруты — светло-серым.
  4. Приближайте нужные участки карты, чтобы рассмотреть построенный маршрут в подробностях.

Маршрутом, построенным в онлайн-версии, можно поделиться. Для этого нужно нажать на кнопку «Поделиться» в правом нижнем углу экрана.

В открывшемся окне можно будет выбрать один из вариантов:

  • На мобильное устройство Если в онлайн-версии и на мобильном устройстве выполнен вход в профиль 2ГИС, на смартфон придёт уведомление, которое позволит открыть маршрут в приложении.
  • Скопировать ссылку Полученную ссылку можно отправить любому человеку любым удобным для вас способом — почтой или с помощью мессенджеров.

2ГИС карты, навигатор, друзь‪я‬ 4+

      Навигация: № 2 в этой категории
      Оценок: 422 тыс.

      Babar88 , 23.11.2017

      Супер приложение

      В приложении есть всё необходимое.

      Ответ разработчика ,

      Большое спасибо за отзыв!

      Тимур Сабирович , 23.11.2017

      Тимур

      Очень хорошее приложение, очень помогает.

      Ответ разработчика ,

      Рады стараться!

      Anonym-user , 23.11.2017

      Транспорт онлайн

      Добавьте, пожалуйста, онлайн отслеживание общественного транспорта.

      Ответ разработчика ,

      Здравствуйте. Мы уже добавили эту функцию во многих крупных городах. Возможно ваш среди них — будем рады обратной связи ��

      События

      УЖЕ ДОСТУПНО

      БОЛЬШОЕ ОБНОВЛЕНИЕ
      Найти друзей на карте 2ГИС

      Конфиденциальность приложения

      Разработчик LLC «DoubleGIS» указал, что в соответствии с политикой конфиденциальности приложения данные могут обрабатываться так, как описано ниже. Подробные сведения доступны в политике конфиденциальности разработчика.

      Данные, используе­мые для отслежи­вания информации

      • Идентифика­торы

      Связанные с пользова­телем данные

      Может вестись сбор следующих данных, которые связаны с личностью пользователя:

      • Финансовая информация
      • Геопозиция
      • Контактные данные
      • Пользова­тель­ский контент
      • История поиска
      • Идентифика­торы
      • Данные об использова­нии
      • Диагностика

      Не связанные с пользова­телем данные

      Может вестись сбор следующих данных, которые не связаны с личностью пользователя:

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

      Информация

      Провайдер LLC «DoubleGIS»
      Размер 254,2 МБ

      Совместимость iPhone Требуется iOS 15.0 или новее. iPad Требуется iPadOS 15.0 или новее. iPod touch Требуется iOS 15.0 или новее.

      русский, азербайджанский, английский, казахский, узбекский, украинский

      Геопозиция Это приложение может использовать данные о Вашей геопозиции, даже если оно закрыто. Возможно сокращение времени работы аккумулятора устройства.

      Copyright © 2009-2023 2GIS
      Цена Бесплатно

      • Сайт разработчика
      • Поддержка приложения
      • Политика конфиденциальности
      • Сайт разработчика
      • Поддержка приложения
      • Политика конфиденциальности

      2ГИС: карты, навигатор, транспорт, друзья

      Торжественно вносим финальное обновление в этом году! Прежде всего — Друзья на карте. Теперь 2ГИС показывает местоположение друзей в реальном времени. Вы сами решаете, кого добавить в друзья и кто будет видеть на карте вас. Подключайте функцию по ссылке на главном экране и управляйте своей видимостью в настройках. Подробнее о Друзьях рассказали в большой презентации о новинках в 2ГИС (ссылка на просмотр тоже есть в приложении). С наступающим вас, и до встречи в новом году!

      Об этом приложении

      Друзья на карте. Маршруты автобусов и другого транспорта. Метро. Пробки. Камеры.

      2ГИС — точные GPS и ГЛОНАСС карты, навигатор для пешеходов и водителей, а также подробный справочник и путеводитель по городам. Пользуйтесь картой офлайн и онлайн — найдите парковки рядом, вход в здание или где вкусно поесть. Стройте удобные маршруты, а голосовой помощник с антирадаром предупредит заблаговременно, когда нужно повернуть или где стоят камеры на дорогах. В приложении вы также найдете актуальное расписание транспорта и другого общественного транспорта, а также сможете следить за транспортом онлайн на карте. Откройте город вместе с 2ГИС!

      С навигацией 2ГИС вы будете как дома даже в незнакомом месте:
      — быстро найдёте адрес, компанию, телефон, время работы, товар или услугу;
      — узнаете, как проехать на машине, автобусе, метро или пройти по навигатору пешком;
      — найдёте парковки, а также вход в компанию или подъезд.

      Всё о зданиях. 2ГИС путеводитель показывает адреса, подъезды, парковки, почтовые индексы и организации, которые обслуживают дом: поликлиника, почта, управляющая компания. Наш туристический навигатор покажет лучшие места в городе!

      Подробный справочник. 2ГИС знает телефоны, время работы, соцсети, сайты и входы в организации. А также схемы метро, карты торговых центров, аэропортов и вокзалов. Люди добавляют фотографии заведений и пишут отзывы.

      Точная офлайн карта. В 2ГИС отмечены районы, здания, улицы, парковки, остановки, станции метро, АЗС заправки, дорожные знаки, камеры ГИБДД, спортивные площадки и другие объекты. На карте отображается также актуальная обстановка — пробки на дорогах, ДТП или ремонт дорог.

      GPS навигатор 2ГИС, антирадар и спидометр. Учитывает пробки на дорогах онлайн, дорожные знаки, камеры ГИБДД, платные и грунтовые дороги, строит маршрут между городами и по нескольким точкам. Голосовые инструкции озвучили известные дикторы: Николай Дроздов, кот Матроскин, и другие. А ещё есть android auto и бесплатное приложение для CarPlay.

      Дорожные события в 2ГИС. Сообщения о ДТП, перекрытых улицах и камерах ГИБДД, комментарии пользователей — и всё прямо на карте.

      Друзья на карте. Теперь 2ГИС показывает в реальном времени геолокацию друзей. Вы сами решаете, кого добавить в друзья и кто будет видеть вашу геопозицию. В настройках — управление видимостью местоположения.

      Общественный транспорт. 2ГИС знает расписание автобусов и онлайн маршруты городского транспорта: автобусы, троллейбусы, маршрутки и трамваи. Узнавайте, где транспорт онлайн. Карта городских автобусов онлайн на вашем смартфоне! Также 2ГИС подскажет цену на такси и поможет выбрать нужный выход из метро.

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

      Пешие маршруты. Навигатор для пешехода — прокладывает путь везде, где можно пройти пешком. Работает в фоне, есть голосовое ведение.

      Каршеринг. Автомобили сервисов Делимобиль и Ситидрайв на одной карте. Ищите ближайшее авто, проверяйте уровень топлива, бронируйте каршеринг и стройте маршрут до него. Только в Москве и Санкт-Петербурге.

      Путеводитель или навигатор туриста. Гиды по городам России (Москве, Санкт-Петербургу и многим другим), СНГ, ОАЭ. Узнавайте о главных достопримечательностях, местах с WiFi и др. в 2ГИС.

      Улучшенный поиск кафе и ресторанов. Подробные фильтры, меню и цены, авторские подборки заведений.

      Навигатор для грузовых автомобилей. Наш навигатор для грузовиков позволяет строить маршруты для фур с учётом индивидуальных особенностей транспортных средств и грузов, а также поможет найти парковки для грузовиков.

      Приложение-компаньон для умных часов на Wear OS. Удобная навигация по маршрутам пешком или на общественном транспорте: подсказки маневров и прогноз времени в пути, вибро-оповещения о приближающемся повороте или нужной остановке. На часах Samsung также отображается карта. Доступно только для телефонов с Android 6 и выше.

      Карты, навигация, транспорт и путеводитель всё в одном приложении — 2ГИС.

      Города, которые уже есть в 2ГИС: Абакан, Абу-Даби, Армавир, Архангельск, Астрахань, Баку, Благовещенск, Братск, Великий Новгород, Владивосток, Владикавказ, Владимир, Волгоград, Вологда, Воронеж, Грозный, Дубай, Екатеринбург, Иваново, Ижевск, Иркутск, Казань, Калининград, Калуга, Кемерово, Киров, Кострома, Краснодар, Красноярск, Курган, Курск, Кызыл, Липецк, Магнитогорск, Майкоп, Махачкала, Миасс, Москва, Мурманск, Набережные Челны, Находка, Нижневартовск, Нижний Новгород, Нижний Тагил, Новокузнецк, Новороссийск, Новосибирск, Норильск, Ноябрьск, Омск, Орёл, Оренбург, Пенза, Пермь, Псков, Республика Алтай, Ростов-на-Дону, Рязань, Самара, Санкт-Петербург, Саранск, Саратов, Смоленск, Сочи, Ставрополь, Старый Оскол, Сургут, Таганрог, Тамбов, Ташкент, Тверь, Тобольск, Тольятти, Томск, Тула, Тюмень, Улан-Удэ, Ульяновск, Уссурийск, Уфа, Хабаровск, Ханты-Мансийск, Чебоксары, Челябинск, Чита, Шерегеш, Южно-Сахалинск, Якутск, Ярославль и др.

      Карта навигатор работают без интернета, просто скачивайте город на устройство, чтобы не потеряться.

      2ГИС называют по-разному — Два ГИС, ТуГИС, Дубль ГИС и т.д. Узнайте в подборках не только о том, как правильно называется приложение, но и что нового добавили в приложении или какие места стоит посетить.

      Похожие публикации:
      1. Где скачать базы данных
      2. Как восстановить пароль в инстаграмме
      3. Как вставить изображение в круг
      4. Как определить модель клавиатуры

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *