Если вы проложили маршрут до некой точки, записав для этого 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-маршрут и проставить любое количество пользовательских точек.

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

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

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

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

      Проблема идиотских NOTAM
      Проблема идиотских NOTAM

      Это всё совершенно нелепо. Мы передаём самую важную полётную информацию, используя систему, изобретенную в 1920 году в формате, который не менялся с 1924 года. При этом мы зарываем в кучу нечитабельного, бесполезного информационного мусора важную информацию, не знание которой может стать для пилотов причиной потери работы, авиакомпании – своих самолетов или жизней пассажиров. Да, Австралийская CASA, это вы! Да, греческие CAA,...




      Как узнать IP-адрес сайта
      Как узнать IP-адрес сайта

      В сети интернет есть несколько сервисов, которые могут сообщить IP-адрес сайта. Зачастую, эти сайты кроме ввода имени домена требуют ввести капчу, иногда имя и адрес электронной почты... - вот такая бюрократия! Для того, чтобы определить IP-адрес DNS-сервера, к которому относится сайт, точнее его доменное имя, и без ввода всяких дополнительных даных, существует несколько способов. Самый простой - это через...




      Админ для Windows Vista и Windows 7
      Админ для Windows Vista и Windows 7

      В Windows Vista и Windows 7 даже имея администраторские права для своей учетной записи не всегда получается удалить/переименовать/переместить некоторые файлы. Что же делать? Для этого нужно загрузиться именно под Администратором - тем самым СУПЕР-Администратором, чтобы иметь право произвести необходимые изменения.




      Что находится с противоположной стороны Земли?
      Что находится с противоположной стороны Земли?

      В одной из игр КВН - это был финал Высшей лиги КВН в  2003 году, выступала сборная Пятигорска со СТЭМом "Репка", и сюжет был следующим: некие жители России тянули репку, и у них это поначалу было не очень результативно, так как типа того с другой стороны планеты ту же самую рупку тянули американцы :))) Потом с помощью русской смекалки и из-за "шаблонного мышления американцев" наши герои, наконец-то...




      301 редирект страницы с параметром с помощью .htaccess
      301 редирект страницы с параметром с помощью .htaccess

      В интернете написано много примеров, как настроить с помощью файла .htaccess переадресацию с одной конкретной страницы сайта на другую, с нескольких страниц на одну, с WWW на без WWW, с HTTP на HTTPS и др. Но нормальных примеров для 301 редиректа с использованием страниц, имеющих параметры, не удалось найти. Как-то просматривая логи сайта https://skalolaskovy.ru, были обнаружены левые попытки авторизации...




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

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




      Apple MDM - использование iOS-устройств на предприятии
      Apple MDM - использование iOS-устройств на предприятии

      Устройства iPad и iPhone способны трансформировать бизнес компании и методы работы сотрудников организации. Эти устройства могут существенно повысить продуктивность, дать свободу действий и дополнительный запас гибкости, позволив работать по-новому, не так, как раньше. Новый подход к выполнению рабочих обязанностей идёт на пользу всей организации.



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