Если вы проложили маршрут до некой точки, записав для этого GPS-трек, и вам необходимо публично поделиться этой информацией - как проехать до этого места назначения (охотничий домик, турбаза в лесу далеко за городом или просто домик в маленькой деревне в глухой провинции, и др...), то вы обязательно захотите показать этот трек на карте.

Как показать GPS-трек на Яндекс-картах

Вариантов тут может быть несколько, а основных только два: используя собственный сайт, показать GPS-трек на карте Google или отобразить этот же GPS-трек на Яндекс-картах. Критерии для отбора следующие:

 

1. Разрешение спутниковой фотографии

В зависимости от региона мира и местности вообще наилучшая картинка с более высокой деталлизацией может быть как у гугла, так и у яндекса - смотрите сами путем обычного сравнения на глазок. Соответственно, эта оценка может оказаться первым и решающим фактором - какую карту использовать в качестве навигационной подложки. Если, например, вашу любимую деревню буржуйский гугл проигнорировал, и вы видите на его спутниковой фотографии только неясные очертания населенного пункта, а Яндекс-карты в режиме "Спутник", наоборот, содержат не только хорошо узнаваемые улицы, но и даже здания, плюс, имеется режим "Народная карта" и кто-то из этой деревни уже внес в нее дополнительные данные (названия улиц, основные административные объекты и достопримечательности), то вам никчему использовать карту гугла. Яндекс рулит!

 

2. Техническая реализация на сайте

Обновление: Яндекс изменил политику по отношению бесплатного использования их карт, теперь нужно для каждого сайта настраивать отельно API и получать ключ (подробно почитать можно тут: https://tech.yandex.ru/maps/mapsapi/#maps).

Это ясно и ежу - чтобы внедрить на web-страницу сайта интерактивную карту с отображением на ней GPS-трека нужно иметь некоторый уровень знаний по web-программированию. Не смотря на то, что добрыми людьми были написаны специальные модули и плагины для упрощения процесса внедрения карт на сайты, эти плагины могут оказаться не совсем рабочими или, как говорят "Без бутылки не разберешься!" :)

Я долго-долго возился с картами Google, их дурацкими API и пр., пытаясь отобразить на них GPS-трек - безуспешно. Точку показывает, а трек нет. Неудача была свалена на разработчика модуля, с помощью которого была попытка реализации, и гугл был отложен на далекий "Потом".




С Яндекс-картами получилось проще. Специальные модули не использовались, я взял только модуль для вставки произвольного кода, в котором прописал следующее:


<div>
<meta http-equiv="Expires" content="0"/>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var myMap;
ymaps.ready(init);
function init ()
{
myMap = new ymaps.Map("map", {
center: [54.28244, 48.55732], //координаты центра карты в градусах
zoom: 11, //увеличение
behaviors: ["default", "scrollZoom"],
type: 'yandex#hybrid'
});

myMap.controls.add("mapTools")
.add("zoomControl")
.add("typeSelector")
.add(new ymaps.control.MiniMap({type: 'yandex#publicMap'}));

var data = [
{ url : 'https://skalolaskovy.ru/files/Track1(all).gpx', text: 'Трек 1 - Путь через ул. Академика Павлова, Колхозный и Красный Яр', color: 'FF0000FF', clicked: 1 },
{ url : 'https://skalolaskovy.ru/files/Track2(all).gpx', text: 'Трек 2 - Путь через Октябрьский (Учхоз) и Первомайский', color: '00FF00FF', clicked: 1 },
{ url : 'https://skalolaskovy.ru/files/baza1.gpx', text: 'Точка на карте - местоположение базы отдыха Уютная', color: '00FF00FF', clicked: 1 },

];

var result = [];
var done = 0;

$.each(data, function(index, xml)
{
ymaps.geoXml.load(xml.url).then(function (res)
{
res.geoObjects.each( function (geoObject)
{
geoObject.options.set({
preset : 'twirl#campingIcon',
strokeColor: xml.color,
strokeWidth: 2
});
} );

result[index] = $("<a class=\"title\" href=\"javascript:void(0)\">" + xml.text + "</a>")
.bind("click", function (e)
{
var link = $(this);
if(link.hasClass("active")) {
myMap.geoObjects.remove(res.geoObjects);
}
else {
myMap.geoObjects.add(res.geoObjects);
}
link.toggleClass("active");
} );
done++;
if(done==data.length)
{
$.each(result, function(index, item)
{
item.appendTo($("<li></li>").appendTo($("#menu") ));
if( data[index].clicked == 1 ) item.click();
});
}
});
});
}
</script>

<ul id="menu"></ul>
<div id="map" style="width: 710px; height: 500px"></div>
</div>

В результате этот код отобразил на web-странице следующую карту:

 

 




Шпаргалка для тех, кто захочет по аналогии отобразить свои треки на картах Яндекса:

  • Теги "meta" по идее нужно вставлять в "head" страниц, но это не обязательно, ведь не обязательно делать это для каждой страницы.
  • координаты центра карты указываются в градусах с долями, если ваши координаты представлены в градусах, минутах и секундах, то вам нужно разделить минуты на 60, секунды на 3600, полученные данные сложить и прибавить к ним градусы. Второй вариант - подобрать цифры после запятой методом тыка.
  • увеличение карты (zoom) таже можно менять в зависимости от размеров экрана карты и длины трека.
  • Тип карты по умолчанию когда она будет прорисовываться на сайте выбран - yandex#hybrid - гибридный вариант (изображение со спутника + некоторые цифровые данные). Можно выбрать также чисто спутниковый режим, схему, народную карту или народная + спутник. Как они называются, чтобы прописать в коде - не знаю, кто ищет - тот сам найдет!
  • Синим цветом выделены адреса расположения GPS-треков - файлов с расширением gpx. Файлы могут фактически находиться на любом сайте, главное корректно указать адрес к этим gps-маршрутам.
  • Треков может быть как один, так и множество. Каждый трек нужно прописать отдельно: его адрес, текст названия, цвет для отображения и состояние (например, clicked: 1 означает, что отображение трека на карте включено, 0 - выключено).
  • В строке preset : 'twirl#campingIcon' указан тип иконки для отображения точки, вы можете также выбрать наиболее подходящий для вас вариант тут: http://api.yandex.ru.
  • В самом конце кода прописан размер окна, в котором будет отображаться карта.
  • Список с идентификатором "menu" отвечает за отображение списка треков. Кликая по названию трека в этом списке, его можно включать и отключать.

Данный подход для отображения треков (как проехать до...) был использован на сайте базы отдыха "Уютная". Мне кажется, получилось довольно не плохо: не сложно в плане реализации, удобно и очень информативно. Таким образом на сайте можно отобразить любой GPS-маршрут и проставить любое количество пользовательских точек.

Комментарии (0)

Здесь не опубликовано еще ни одного комментария

Оставьте свой комментарий

  1. Опубликовать комментарий как Гость.
0 Значки
Вложения (0 / 3)
Поделитесь своим местоположением

      Установка программы Jeppesen Services Update Manager (JSUM)
      Установка программы Jeppesen Services Update Manager (JSUM)

      Программа Jeppesen Services Update Manager (JSUM) предназначена для обновления навигационных баз данных различных спутниковых навигационных систем (Honeywell Primus Epic, Honeywell Apex, the Avidyne EX5000 MFD, Garmin 155, 430/530 Series GPS, Garmin G1000 Flight Deck и др.). Запись БД осуществляется с помощью специального карт-ридера - так называемой приставки SkyBound.




      Apple iOS 11 не поддерживает 32-битные приложения
      Apple iOS 11 не поддерживает 32-битные приложения

      В июне 2017 прошла всемирная конференция для разработчиков на платформах Apple (WWDC - Apple Worldwide Developers Conference) на которой было официально заявлено со стороны Apple, что, операционные системы macOS High Sierra и iOS 11 все последующие за ними не будут поддерживать 32-битные программные приложения. Таким образом, на компьютеры Mac с операционной системой macOS High Sierra и на планшеты...




      Ограничения для UITextField на ввод текста
      Ограничения для UITextField на ввод текста

      Для того, чтобы пользователи приложения не тыкали своими шаловливыми ручками куда попало не могли вводить заведомо не корректный текст, можно реализовать ряд ограничений для них. На сайтах обычно это реализуется с помощью JS-скриптов, которые, теоретически, могут быть оключены пользователем на глобальном уровне, и все ограничения, реализованные с помощью JS перестанут действовать. В...




      Как восстановить вкладки в Safari macOS Sierra
      Как восстановить вкладки в Safari macOS Sierra

      Не нужно лишних слов для псевдо-SEO. Закрытые случайно или специально вкладки (предыдущую сессию) браузера Safari в Mac OS Sierra возвращает простая комбинация клавиш:




      Эволюция Jeppesen - улучшенные схемы процедур SID/STAR
      Эволюция Jeppesen - улучшенные схемы процедур SID/STAR

      Основываясь на обратной связи от пилотов, компания Jeppesen приняла решение усовершенствовать свои IFR-схемы процедур SID и STAR. Эти усовершенствования нацелены на повышение ситуационной осведомленности, сократить продолжительность полета по приборам без наблюдения за внекабинной обстановкой (reduce heads-down time = уменьшение времени отвлечения внимания пилотов от пилотажных приборов) и,...




      Как отключить стандартную оболочку в навигаторе EXPLAY PN-355
      Как отключить стандартную оболочку в навигаторе EXPLAY PN-355

      Все автомобильные GPS-навигаторы имеют меню с достаточного размера кнопками на сенсорном экране для выстрого запуска необходимых приложений, в первую очередь - программы для непосредственной навигации. Многие современные навигаторы имеют возможность менять путь к навигационной программе. Поэтому при установке альтернативного ПО есть возможность безболезненно через настройки меню задать временно или...




      Сертификат безопасности аккумулятора Apple iPad
      Сертификат безопасности аккумулятора Apple iPad

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



Яндекс.Метрика
Сайт работает на быстром VPS/VDS хостинге от FASTVPS