Вывод трека в формате gpx на карту Яндекс

С выходом нового API 2.x Яндекс.Карт вывод трека в формате gpx на карту стал очень простым. Теперь не надо регистрироваться, не нужен API key.

Итак, нам понадобится, собственно, сам трек и несколько строк кода. Я скачал трек из Интернета (называется он 3941.gpx), положил его в папку и в ней же создал файл index.html со следующим содержимым:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры. Загрузка XML.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;amp;amp;lang=ru-RU"
type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: [52.646573, 39.519488],
zoom: 9
});
ymaps.geoXml.load('3941.gpx')
.then(function (res) {
myMap.geoObjects.add(res.geoObjects);
});
}
</script>
</head>

<body>
<h1>Вывод gpx трека на карту Яндекса</h1>
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html> 

В строке 10 создается новая карта, центр которой имеет координаты 52.646573, 39.519488, а масштаб равен 9. Координаты центра карты легко узнать, зная где проходит трек. Мой трек проходит к северо-западу от Липецка. Заходим на Яндекс.Карты, выбираем инструмент «Получить информацию»  и кликаем по любой точке, которая находится рядом с нашим треком:

Узнать координаты точки на карте

Узнать координаты точки на карте

Слева от карты видим координаты выбранной точки — вот их мы и указываем в строке 10


center: [52.646573, 39.519488]

Обратите внимание — сначала указывается широта, потом долгота.

В 14-й строке мы загружаем наш трек и выводим его на карту. В итоге получилась вот такая картина — пример вывода gpx трека на карту

Уверен, что процедура нахождения центра карты для вывода трека вас не очень обрадовала, поэтому далее мы сделаем так, чтобы трек выводился автоматически. Т. е. масштаб и расположение трека на карте сделает сам API Яндекса. Измененный index.html будет выглядеть вот так:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры. Загрузка XML.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;amp;lang=ru-RU"
type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);

function init () {
var myMap = new ymaps.Map("map", {
center: [52.646573, 39.519488],
zoom: 9
});
ymaps.geoXml.load('3941.gpx')
.then(function (res) {
res.geoObjects.options.set({
balloonContentBodyLayout: ymaps.templateLayoutFactory.createClass(
'$[properties.velocity]'
)
});

myMap.geoObjects.add(res.geoObjects);
if (res.geoObjects.properties.get('boundedBy')) {
myMap.setBounds(res.geoObjects.properties.get('boundedBy'), {
checkZoomRange: true
});
}
});
}
</script>
</head>
<body>
<h1>Вывод gpx трека на карту Яндекса</h1>
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>

А итоговый вариант вот так — вывод gpx трека на Яндекс.Карты

Метки: , , ,

Похожие записи
Запись опубликована в рубрике Программирование, Создание сайтов с метками , , , . Добавьте в закладки постоянную ссылку.

4 комментария: Вывод трека в формате gpx на карту Яндекс

  1. Алексей говорит:

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

    • kumatoz говорит:

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

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

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

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>