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

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

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

 

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

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

 

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

Это ясно и ежу - чтобы внедрить на 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 : 'http://ul-comfort.ru/files/Track1(all).gpx', text: 'Трек 1 - Путь через ул. Академика Павлова, Колхозный и Красный Яр', color: 'FF0000FF', clicked: 1 },
{ url : 'http://ul-comfort.ru/files/Track2(all).gpx', text: 'Трек 2 - Путь через Октябрьский (Учхоз) и Первомайский', color: '00FF00FF', clicked: 1 },
{ url : 'http://ul-comfort.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-маршрут и проставить любое количество пользовательских точек.

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

     

Защитный код
Обновить


      Выполнение полетов без бумаги
      Выполнение полетов без бумаги

      Настал тот день, когда в кабине летного экипажа все чаще используется электронная система отображения данных, известная как электронная система бортовой документации (Electronic Flight Bags - EFBs). Однако вместе с этим Система донесений о безопасности полетов (ASRS) все чаще получает отчеты об инцидентах, происходящих при использовании данных безбумажных технологий. Аппаратное обеспечение EFB...




      Как написать знак Градуса или Приблизительно?
      Как написать знак Градуса или Приблизительно?

      Иногда в чате ICQ или скайпа, или в тексте комментария на сайте в контакте или одноклассников нужно написать символ, который отсутствует на клавиатуре. Конечно, можно через меню Пуск открыть таблицу символов, найти необходимый и кликнуть на него, предварительно установив фокус (курсор) в нужное окно..., но это можно выполнить значительно проще и быстрее. Рассмотрим, например, знак градуса - °,...




      Как найти в Интернете похожую картинку или фотографию
      Как найти в Интернете похожую картинку или фотографию

      Как найти в Интернете похожую картинку или фотографию? - Да очень просто! Начнем с того, зачем это нужно, и кому может понадобиться? Основных вариантов может быть три: Первый - вы хотите проверить, не использует ли кто-то вашу авторскую графическую работу (фотографию, рисунок, схему) без вашего разрешения на своем web-ресурсе.




      Jeppesen FliteDeck Pro  - версия 2.9.0
      Jeppesen FliteDeck Pro - версия 2.9.0

      Очередное обновление флагманского приложения для EFB - Jeppesen FliteDeck Pro. Как говориться, нет пределов для совершенства, особенно, если это касается авиационного программного обеспечения для Electronic Flight Bag. В приложении Jepp FD Pro версии 2.9 появилась панель управления, совмещенная с рабочим полем приложения (расположена слева).Пилотам больше не нужно переключаться между вкладками – Схемы (Terminal...




      Как добавить аэродром в программе Jeppesen FliteStar, FliteMap
      Как добавить аэродром в программе Jeppesen FliteStar, FliteMap

      Фирма Jeppesen считается лидером среди поставщиков аэронавигационной информации и навигационная база данных Джеппесен - самая полная и объемная, и это не удивительно, так как Jeppesen занимается этой деятельностью аж с 30-ых годов 20 века (Подробнее - в статье "История Jeppesen"). Но есть такие аэродромы, которых нет в базе данных даже у Jeppesen, по крайней мере в той БД, которая официально предоставляется потребителям. Это всякие "секретные" военные...




      Загрузка фильмов по Wi-Fi в iPad
      Загрузка фильмов по Wi-Fi в iPad

      В продолжение статьи "Как закачать видео на ipad" возникла необходимость написать новую шпаргалку - в соответствии с "заявками телезрителей" - как выполнить это с использованием Wi-Fi, если планшет заблокирован на подключение к "чужим" компьютерам. Подобная ситуация возможна при использовании корпоративных планшетов, которые были настроены с помощью MDM (были переведены в режим SUPERVISED (управляемые), и для них был активирован запрет на подключение к чужим...




      Использование PowerShell для работы с навигационными базами данных в формате ARINC 424
      Использование PowerShell для работы с навигационными базами данных в формате ARINC 424

      Формат навигационных баз данных ARINC 424 существует аж с 1975 года, за это время он довольно сильно эволюционировал в сторону наполнения новыми типами данных, но основной "скелет" этой базы данных, описанный в 424-ой спецификации, остался практически без изменений. База данных в формате ARINC 424 представляет собой текстовый файл, в котором построчно закодированы аэронавигационные данные: воздушные...



Яндекс.Метрика