Захват карты для встраивания в блог-пост Wordpress

Question

Первоначально я задавал этот вопрос Super User, но мне сказали, что его лучше разместить здесь ...

У меня есть ведущий блог, и, чтобы помочь мне отслеживать и писать о моих пробежках, я недавно купил часы Garmin GPS. Установка работает, и я могу поделиться ссылками на мои работы в моем блоге, такие как:

http://connect.garmin.com/activity/23842182

Есть ли простой способ для меня захватить саму карту с сайта Garmin Connect (см. Ссылку) и отобразить ее в своем блоге? Я могу сделать скриншот, но интерактивная карта будет намного лучше. Это, очевидно, карта Google с наложенной информацией о пробеге, поэтому должен быть способ ... верно?

Answer 1

Чтобы создать встроенную интерактивную карту Google для отображения полилиний, вы должны извлечь данные, которые используются сайтом Garmin для визуализации линии.

С сайта Garmin есть два Javascript-файла, которые выполняют эту работу:

http://connect.garmin.com/resource/garmin-js-lib/map/MapsUtil.js - Набор утилит для рендеринга карт Google на основе данных в системе Garmin http://connect.garmin.com/api/activity/component/mapLoader.js - использует Garmin.service.ActivityClient , чтобы получить данные JSON, описывающие полилинию. Он передает эти данные в Garmin.map.MapsUtil.addEncodedPolylineToMap для визуализации карты.

Так что сделайте это в своем блоге, вам нужно будет либо запросить данные JSON с сайта Garmin (и полагать, что формат URI не изменится), либо получить данные и сохранить их на своем собственном сайте. Формат URI в настоящее время:

http://connect.garmin.com/proxy/activity-service-1.0/gpolyline/activity/<activity id>?full=true

Где идентификатор активности - это последний номер в вашем исходном URL. Итак:

http://connect.garmin.com/activity/23842182
http://connect.garmin.com/proxy/activity-service-1.0/gpolyline/activity/23842182?full=true

Этот запрос данных вернет JSON, который вы затем сможете использовать для рендеринга карты Google.

После того, как вы определились с тем, как вы хотите хранить данные JSON, вам нужно написать некоторый Javascript для запроса JSON и в обратном вызове передать его в метод GPolyline.fromEncoded . Получив объект GPolylin e (который заполняется из закодированных данных JSON), вы можете добавить его в Google Maps GMap2 с помощью метода addOverlay .

Я понимаю, что этот ответ довольно технически сложен и может быть ошеломляющим, если вы раньше не играли с Картами Google. Если это так, я предлагаю перейти на начальную страницу API Карт Google , чтобы получить некоторые советы по началу работы.

Answer 2

С тех пор, как этот вопрос был впервые опубликован, Garmin Connect с тех пор добавил быстрый фрагмент кода для встраивания в ваш сайт WordPress для отображения ваших карт и данных курса. Если у вас возникли проблемы с получением фрагмента кода для сохранения в сообщении после сохранения - ознакомьтесь с этими инструкциями по встраиванию действий Garmin Connect в WordPress .

.