В API Яндекс.Картах существует возможность показа на карте файлов в формате GPX, т.е. теперь можно показать на карте практически любой GPS-трек в этом формате.
GPX добавляются на карту по аналогии с YMapsML-файлами с помощью метода карты addOverlay().
Пример кода:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример-1. Отображение на Яндекс.Картах файлов в формате GPX.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
<script type="text/javascript">
YMaps.jQuery(function () {
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 14);
// Добавление элементов управления
map.enableScrollZoom();
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.Zoom());
// Загрузка GPX-трека и добавление его на карту
var gpx = new YMaps.GPX("http://webmap-blog.ru/gpx/20090430-085119.xml");
map.addOverlay(gpx);
// Обработчик неудачной загрузки GPX
YMaps.Events.observe(gpx, gpx.Events.Fault, function (gpx, error) {
alert("Ошибка: " + error);
});
});
</script>
</head>
<body>
<div id="YMapsID" style="width:800px;height:600px"></div>
</body>
</html> |
Здесь вначале как обычно мы создаем карту и привязываем ее к созданному контейнеру, затем задаем центр карты и уровень масштаба, после этого загружаем GPX-трек и добавляем его на карту.
Если в процессе загрузки произойдет ошибка, мы выводим сообщение о ней, используя обработчик неудачной загрузки.
Еще необходимо обратить внимание на две детали: файл-GPX имеет расширение xml и загружаемый документ должен находиться в открытом доступе по HTTP-протоколу.
Второй пример демонстрирует, как можно вывести на карту данные о путевых точках.
Код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример-2. Отображение на Яндекс.Картах файлов в формате GPX</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
<script type="text/javascript">
YMaps.jQuery(function () {
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 14);
// Добавление элементов управления
map.enableScrollZoom();
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.Zoom());
// Показывает в балунах меток, соответствующих объектам типа wpt, содержимое поля metaDataProperty.gpxMetaData.sym вместо description (изменяет шаблон содержимого меток).
// Для объектов типа rte и trkseg показывает время в пути и длину маршрута, соответственно.
var gpx = new YMaps.GPX("http://webmap-blog.ru/gpx/mypoints.xml");
YMaps.Events.observe(gpx, gpx.Events.Load, function (gpx) {
var styleWpt = {balloonContentStyle: {template: new YMaps.Template("<b>$[name]</b><p>$[metaDataProperty.gpxMetaData.sym]</p>")}},
wayPoints = gpx.filter(function (obj) {return obj.metaDataProperty.gpxMetaData.gpxTagName == "wpt"});
YMaps.jQuery.each(wayPoints, function () { this.setStyle(styleWpt) });
var styleRt = {balloonContentStyle: {template: new YMaps.Template("<b>$[name]</b><p>Проехали $[metaDataProperty.gpxMetaData.gpxDistance] за $[metaDataProperty.gpxMetaData.gpxDuration]</p>")}},
tr = gpx.filter(function (obj) {return obj.metaDataProperty.gpxMetaData.gpxTagName == "rte" || obj.metaDataProperty.gpxMetaData.gpxTagName == "trkseg"});
YMaps.jQuery.each(tr, function () {
this.setStyle(styleRt)
// рассчитывает расстояние и добавляет его значение в metaDataProperty.gpxMetaData
var distance = 0;
for(var pts = this.getPoints(), i = 1, l = pts.length; i < l; i++) {
distance += pts[i].distance(pts[i - 1]);
}
this.metaDataProperty.gpxMetaData.gpxDistance = YMaps.humanDistance(distance);
// рассчитывает время в пути и добавляет его значение в metaDataProperty.gpxMetaData
var startTime = xmlToDate(this.metaDataProperty.gpxMetaData.gpxStartTime),
endTime = xmlToDate(this.metaDataProperty.gpxMetaData.gpxEndTime);
// так как время старта и время финиша вычисляется в миллисекундах,
// а YMaps.humanDuration работает с секундами, разность (endTime - startTime) следует разделить на 1000
this.metaDataProperty.gpxMetaData.gpxDuration = YMaps.humanDuration((endTime - startTime) / 1000);
});
});
// вспомогательная функция: извлекает значение времени из XML-формата (GPX)
function xmlToDate (val) {
var date = new Date();
if(!val)
return date;
date.setFullYear(val.substring(0, 4), (val.substring(5, 7) - 1), val.substring(8, 10));
date.setHours(val.substring(11, 13), val.substring(14, 16), val.substring(17, 19), val.substring(20, 23));
return date;
}
map.addOverlay(gpx);
// Обработчик неудачной загрузки GPX
YMaps.Events.observe(gpx, gpx.Events.Fault, function (gpx, error) {
alert("Ошибка: " + error);
});
});
</script>
</head>
<body>
<div id="YMapsID" style="width:800px;height:600px"></div>
</body>
</html> |
Изменить изображения для значка метки мы можем после полной загрузки документа.
Для этого необходимо создать обработчика события Load и в нем вызвать метод setStyle() для группы, в которой размещены метки:
YMaps.Events.observe( gpx , gpx .Events.Load, function ( gpx ) {
gpx .get(0).setStyle("default#phoneIcon");
});
Если в место данных о точках загрузить наш первоначальный трек, то щелкнув по нему, мы увидим сообщение о времени пути и пройденном расстоянии.
В конце данной заметки я хочу привести еще один пример.
В нем мы будем отображать на карте GPX-файлы, включая и выключая нужный, а также зададим стиль отображения для трека.
Приведу код примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример-4 Отображение на Яндекс.Картах файлов в формате GPX</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
<style>
.link:hover
{
text-decoration: none;
}
.link
{
cursor: pointer;
text-decoration: underline;
}
#show_trek1 {
padding: 8px 0 6px 35px;
line-height: 30px;
margin-bottom: 3px;
}
#show_trek2 {
padding: 8px 0 6px 35px;
line-height: 30px;
margin: 3px 0;
}
#show_trek3 {
padding: 8px 0 6px 35px;
line-height: 30px;
margin: 3px 0;
}
</style>
<script type="text/javascript">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 13);
// Добавление элементов управления
map.enableScrollZoom();
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.Zoom());
// Создание стиля для ломанной
var s = new YMaps.Style();
s.lineStyle = new YMaps.LineStyle();
s.lineStyle.strokeColor = "FF0000AA";
s.lineStyle.strokeWidth = "5";
YMaps.Styles.add("example#CustomLine", s);
var gpx1 = new YMaps.GPX("http://webmap-blog.ru/gpx/20090430-085119.xml");
YMaps.Events.observe(gpx1, gpx1.Events.Fault, function (gpx1, error) {
alert("Ошибка: " + error);
});
YMaps.Events.observe( gpx1 , gpx1 .Events.Load, function ( gpx1 ) {
gpx1 .get(0).setStyle("example#CustomLine");
});
YMaps.jQuery("#show_trek1").toggle(function(){
map.addOverlay(gpx1);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(gpx1);
YMaps.jQuery(this).css("font-weight","normal");
});
var gpx2 = new YMaps.GPX("http://webmap-blog.ru/gpx/20090930-103240.xml");
YMaps.Events.observe(gpx2, gpx2.Events.Fault, function (gpx2, error) {
alert("Ошибка: " + error);
});
YMaps.jQuery("#show_trek2").toggle(function(){
map.addOverlay(gpx2);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(gpx2);
YMaps.jQuery(this).css("font-weight","normal");
});
var gpx3 = new YMaps.GPX("http://webmap-blog.ru/gpx/20100405-173835.xml");
YMaps.Events.observe(gpx3, gpx3.Events.Fault, function (gpx3, error) {
alert("Ошибка: " + error);
});
YMaps.jQuery("#show_trek3").toggle(function(){
map.addOverlay(gpx3);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(gpx3);
YMaps.jQuery(this).css("font-weight","normal");
});
})
</script>
</head>
<body>
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td><div id="YMapsID" style="width:800px;height:600px"></div></td>
<td valign="top">
<p><span id="show_trek1" class="link">Трек-1</span></p>
<p><span id="show_trek2" class="link">Трек-2</span></p>
<p><span id="show_trek3" class="link">Трек-3</span></p>
</td>
</tr>
</table>
</body>
</html> |
Здесь код похож на код примера из заметки API Яндекс.Карт Работаем с группой маркеров – версия 2 — отображение файлов формата YmapsML.
После определения карты и задания ее центра, уровня масштаба, элементов управления задается стиль отображения для ломаной example#CustomLine.
После этого, используя встроенный фреймворк jQuery, мы подгружаем нужный GPX-файл, щелкая по соответствующей ссылке в меню.
Для первого трека после загрузки мы задаем наш стиль example#CustomLine
Для написания заметки использовались следующие источники:
Пример Визуализация GPX-трека
Спасибо, настроил, оказалось не все так сложно.
Пытаюсь загрузить трек с локального диска.
Меняю строчку:
var gpx = new YMaps.GPX(«file:///E:/Холм1.gpx»);
Выдает ошибку: File scheme not allowed!
У Вас сразу три ошибки в коде:
1. GPX-файл должен иметь расширение xml
2. Не рекомендую использовать имена файлов на русском языке, могут возникнуть различные проблемы.
3. Поскольку GPX-файл, также как YMapsML обрабатывается скриптом из API Яндекса, он должен быть доступен на чтение из интернета,
т.е. нельзя использовать файлы с локального компьютера, их нужно выложить на какой-либо хостинг в интернет.
Заработало, правда пришлось запустить под вистой IIS для доступа к трекам по http! Пробовал открывать треки по ftp не работает. Спасибо.
Здравствуйте. Подскажите пожалуйста можно ли реализовать трек формата kml в Яндекс Картах?
Да, возможно. Вот пример из документации. Единственное замечание, что KML-файл должен иметь расширение xml.
А как мне из KML получить XML? Просто переименовать?
Да, просто переименовать файл
Спасибо, буду пробовать!
Пишет, что gpx tag not found. Я так понимаю, проблема в моем kml-xml фаиле? Просто я беру из SAS Планеты .ptl трек сохраняю в kml, а затем через блокнот переименовываю в .xml. Я делаю что-то не правильно?
Разобрался!
Получил файл gpx из навигатора, в http://livegpstracks.com маршрут отображается и в Googl и Yandex картах. Хочу показывать треки на сайте. При сохранении в kml , а затем переименовывая в xml , сохраняется в формате, который не воспринимается Вашим методом. Скаченные файлы xml из Ваших примеров показываются. Подскажите почему?
Вероятнее всего проблема с кодировкой при сохранении файла. Лучше всего для этих целей использовать программу Notepad++.
Перед сохранением выбрать пункт меню Кодировка — Преобразовать в UTF-8 без BOM.
Добрый день! Не понял рекомендации. Какой программой следует конвертировать файл gpx в kml? Я просто скачиваю свой загруженный ранее gpx трек из http://livegpstracks.com, как kml. Он уже в кодмровке UTF-8, кстати и исходный gpx тоже в этой кодировке, т.к. получен из iphone 4 программой Pedometr ultimate. Открывая Notepad++ свой файл и Ваш, вижу большую разницу: у Вас записи типа
0.000000
2009-09-30T10:32:58Z
, а у моего : 37.575337,55.833136,0 37.575270,55.832918,0 и т.д.
gpx файл можно сразу загружать на Яндекс.Карту, без преобразования в KML. Только надо поменять расширение на .xml
Пример из документации
Коды не передались.
Ну, одним словом, они не идентичны по структуре.
подскажите пожалуйста. как для чайника объясните куда этот код вообще загружать? у меня есть вот файлы с маршрутом. формата gpx. как увидеть этот маршрут на карте?
Нужно установить сервер локальный или одним из серверов в интернет (платных или бесплатных).
Список бесплатных хостингов.
html-файл для вывода карты положить в папку на сервере и обратиться к ней через браузер
В файл маршрута в формате gpx необходимо загрузить на сервер, чтобы он был доступен из интернет
Изменить путь в html-файле до gpx-файла на свой.
Можно просмотреть gpx-файл в программе Google Земля (Google Earth)
а как в программе гугл земля поменять карту как на яндексе можно выбрать типа спутник гибрид или схема?
Нет
если я скину файл gpx сможет мне кто нибудь прописать его что бы было видно его как в примере? помогите пожалуйста. сам никак не могу разобраться со всем этим
Присылайте на ugolsergey@gmail.com