В данной статье я хочу начать цикл статей по работе с API Яндекс.Карт. Документация Яндекс.Карт достаточно полна, но степень разрозненности информации в ней высокая, при первом заходе в документацию без пол-литры не разобраться, и для решения какой-то проблемы можно потратить много времени на поиск по документации и в поисковике. Этот цикл статей будет рассказывать о практических решениях наиболее частых случаев использования API Яндекс.Карт последней, на момент написания статьи, версии 2.1.
При вёрстке сайта в контактной информации часто бывает необходимость вставки карты, на которой будет отмечено местоположение организации, для которой разрабатывается сайт. В самых простых случаях это может быть просто скриншот c онлайн-карт (или не онлайн):
Для вставки интерактивной карты может использоваться конструктор карт
https://tech.yandex.ru/maps/tools/constructor/ :
В случае, если нам нужно более продвинутое использование карт (свои метки, программное перемещение карт и т.п.), то для этого надо использовать API Яндекс.Карт: https://tech.yandex.ru/maps/jsapi/ . В качестве примера использования карт в статье будет рассмотрено создание карты с простым добавлением пользовательских метки и балуна.
Для начала подключим компоненты API:
Если разрабатывается какое-то большое приложение с использованием карт, то лучше подключать компоненты API определённой версии, чтобы при обновлении API на стороне Яндекса у нас ничего не сломалось на продакшине:
Карту необходимо будет расположить в каком-нибудь блоке, например в div#map . Далее карту необходимо создать в данном блоке (после срабатывания события готовности карты и DOM):
| ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.76 , 37.64 ] , zoom: 7 } ) ; } |
Здесь мы указываем:
По умолчанию Яндекс.Карты создают много лишних элементов, которые в большинстве случаев не нужны на сайтах. В основном к элементам управления и к поведению карты достаточно применить 2 условия:
Для выполнения этих требований дополняем код:
| ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.76 , 37.64 ] , zoom: 13 , controls: } ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap.controls .add ("zoomControl" , { position: { top: 15 , left: 15 } } ) ; } |
Здесь мы отключили «scrollZoom» и добавили «zoomControl» с позиционированием от левого верхнего угла.
Теперь нужно добавить на карту метку, для статьи скачаём её картинку с http://medialoot.com/item/free-vector-map-location-pins/ и расположим в коде следующим образом:
| ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: } ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap.controls .add ("zoomControl" , { position: { top: 15 , left: 15 } } ) ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , { } , { iconLayout: "default#image" , iconImageHref: , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] } ) ; myMap.geoObjects .add (myPlacemark) ; } |
Здесь мы объявляем переменную myPlacemark , в которой запишем маркер, в первом параметре ymaps.Placemark указываем координаты метки, а в третьем параметре:
И через myMap.geoObjects.add() добавляем метку на карту.
А теперь сделаем баллун, который у нас будет показываться при клике на метку карты, макет баллуна и его содержимое возьмём с http://designdeck.co.uk/a/1241
ymaps.ready
(init)
;
function
init()
{
var
myMap;
myMap =
new
ymaps.Map
("map"
,
{
center:
[
55.7652
,
37.63836
]
,
zoom:
17
,
controls:
}
)
;
myMap.behaviors
.disable
("scrollZoom"
)
;
myMap.controls
.add
("zoomControl"
,
{
position:
{
top:
15
,
left:
15
}
}
)
;
var
html =
""
;
html +=
" "
;
html +=
""
;
html +=
"The Victoria Tower Gardens " ; html += "" ; html += "City of London " ; html += "" ; html += "United Kingdom " ; html += "020 7641 5264 " ; html += "" ; html += "" ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , { balloonContent: html } , { iconLayout: "default#image" , iconImageHref: "http://сайт/files/APIYaMaps1/min_marker.png" , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [ 289 , 151 ] , balloonImageHref: "http://сайт/files/APIYaMaps1/min_popup.png" , balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false } ) ; myMap.geoObjects .add (myPlacemark) ; } |
Здесь мы:
С 1 октября 2012г. мы ввели в эксплуатацию новейший уникальный сервис в Интернете – показ списка адресов на карте.
Это единственный известный нам удобный сервис, который позволяет большой список адресов (например - из файла EXCEL) легко показать на карте, и узнать географические координаты всех точек.
Воспользоваться этим сервисом исключительно просто.
Нужно сформировать файл с адресами следующим образом:
Адрес – адрес подряд в произвольной форме, например - Санкт-Петербург, Невский пр. д.155 корпус 3, или Невский 155/3
Адрес должен быть записан обязательно в первом столбце и обязательно в ОДНОМ столбце целиком. Если у вас адрес в нескольких столбцах – нужно просто слить их в один.
Название точки (имя точки) – если его не будет, то система ставит порядковый номер точки.
Описание
– любой текст – описание точки, оно переносится в описание точки на карте.
Пример заполнения таблицы:
Вся сила, мощь и преимущество нового сервиса состоит в том, что таких адресов может быть очень много. Система обрабатывает все адреса и показывает вам процесс привязки адресов к карте.
Совершенно очевидно, что объективно система не всегда сможет привязать адреса к карте. Иногда привязать адреса невозможно.
Например, улица Парковая встречается в разных районах Петербурга – в Пушкине, Павловске и в других районах. Поэтому привязать и показать на карте Санкт-Петербурга улицу Парковую невозможно до тех пор, пока не укажут район. Программа позволяет в процессе привязки адресов уточнять районы и даже уточнять написание адреса.
Ну и конечно, программа не сможет правильно привязать адрес, если он указан неверно, например «от ларька налево за углом».
А результаты привязки программа выдает в виде статистики.
Также программа выдает результирующий EXCEL файл, куда она добавляет два столбца с координатами (широта и долгота).
Кроме того, в дополнительный столбец выводятся коды привязки адреса.
Эти коды привязки адреса – очень важный показатель. С помощью этих кодов вы можете выбрать только те адреса, которые наиболее правильно привязались с вашей точки зрения.
Например, если программа не нашла конкретный корпус, то она будет искать дом с таким же номером, но без корпуса. И если она найдет такой номер дома, то она выдаст соответствующий код привязки.
Выводы.Данный механизм показа списка адресов на карте позволяет большие массивы (списки) адресов (например, из файла EXCEL) размещать и показывать на карте, при этом выводя все координаты привязанных точек в результирующий.
Механизм уникален, т.к. в Интернете нет подобного механизма по удобству и по возможностям обработки сразу больших массивов адресов из файла.
Механизм весьма востребован, т.к. мы неоднократно встречали в Интернете запросы на такой механизм – показать именно большой список адресов на карте.
Механизм имеет неоспоримое преимущество перед google и yandex – потому, что может сразу обрабатывать целые списки адресов, а google и yandex обрабатывают по одному адресу или требуют писать отдельную программу, с использованием своего интерфейса.
Очевидно, что пользователь не будет писать программу, если ему нужно просто показать свои большие списки адресов на карте, а просто воспользуется нашим сервисом.
Этот сервис можно искать по различным ключевым словам, например:
все адреса на карте;
список адресов на карте;
интернет сервис размещения на карте большого количества адресов точек;
отметить много адресов точек на карте;
отметить адреса на карте;
Санкт-Петербург Москва карта импорт адресов Excel;
показать адреса из базы на карте;
показать адреса из файла на карте;
поиск с указанием нескольких адресов на карте;
поиск с указанием многих адресов на карте;
множественный поиск адресов на карте;
одновременный поиск нескольких адресов на карте;
привязать много адресов к карте;
показать много адресов на карте;
показать много адресов из файла на карте.
Код статуса
– трехзначное число, где:
Первая цифра (сотни): статус привязки к населенному пункту
Вторая цифра (десятки): статус привязки к улице
Третья цифра (единицы): статус привязки к номеру корпуса.
Привязка к нас.пункту:
0 – норма, нас.пункт был найден в адресе и он правильный.
1 – населенный пункт отсутствует в адресе, потребовалось подставить нас.пункт по умолчанию (например, для карты спбло таким нас.пунктом является Санкт-Петербург).
2 – населенный пункт был найден в адресе, однако он оказался неправильным (т.е. остальная часть адреса ему не соответствовала), либо населенный пункт отсутствовал в адресе и подставленный вместо него нас.пункт по умолчанию тоже не подошел – потребовалось изменить населенный пункт на произвольный, но такой, чтобы нашлось соответствие.
Привязка к улице
0 – норма, название улицы в адресе точно совпало с названием в адресной базе.
1 – название совпало после перестановки слов в названии (например, вместо «Малая Конюшенная» было указано «Конюшенная Малая»).
2 – название совпало после того, как было подставлено слово слева (например, вместо «ул. Генерала Карбышева» было указано просто «ул. Карбышева»).
3 – название совпало после того, как было подставлено слово справа.
4-8 – зарезервировано
9 – нет улицы, то есть поиск велся только по региону, без привязки к улице и дому
Привязка к корпусу
0 – норма, корпус был найден в адресе и он правильный; либо корпус был не найден в адресе, и в адресной базе есть дом без корпуса
1 – указанного в адресе корпуса нет, была проведена замена.
2 – указанного в адресе дома нет, был найден ближайший по номеру дом той же четности (отличающийся не более чем на 10).
3-8 – зарезервировано
9 – нет дома, то есть поиск велся только по региону, без привязки к улице и дому
Перед разработчикам, которые используют API Яндекс.Карт, довольно часто встаёт задача отобразить много объектов на карте. Действительно много - порядка 10 000. Причем эта задача актуальна и для нас самих - попробуйте поискать аптеки на Яндексе. На первый взгляд кажется: «А в чем собственно проблема? Бери да показывай». Но пока не начнешь этим заниматься, не поймешь, что проблем на самом деле целый вагон.
Вопросы по большому количеству меток с завидной регулярностью поступают в наш клуб и техподдержку. Кто все эти люди? Кому может быть интересно показать на карте больше 10 меток? В этом посте я подробно рассмотрю весь вагон проблем и расскажу, как в API появились инструменты, помогающие разработчикам оптимально показать большое количество объектов на карте.
В основном с проблемой сталкиваются информационные сервисы, которые хотят привязать данные к карте. Например сайт bankomator.ru рассказывает пользователям, где найти банкомат нужного банка.
Также от большого количества данных страдают ресурсы, посвященные недвижимости. Яркий пример – Cian.ru.
Мы сами внутри Яндекса до недавнего времени советовали смежным командам различные «хаки» и приемы для показа множества точек через API. Яркие примеры – Яндекс.Недвижимость и Яндекс.Такси.
Клиент (например, Safari на iPhone) запрашивает с сервера страницу index.html. Страница представляет собой документ вот с таким кодом:
ymaps.ready(init); function init () { var myMap = new ymaps.Map("map", { center: , zoom: 10 }); }
Теперь усложняем задачу. У нас есть база данных, в которой хранятся адреса болельщиков «Зенита». И мы хотим показать на карте адреса этих болельщиков.
Решение задачи «в лоб»:
Если вы менеджер проекта, и ваш разработчик демонстрирует такое решение, скорее всего, вы поседеете. Вы выскажете ему свое оценочное суждение. Если убрать нецензурную брань, можно будет выделить следующие тезисы:
- Вес файла index.html увеличится до нескольких Мб и у пользователя страница будет открываться по несколько секунд.
- Зачем передавать на клиент ВСЮ базу, если нужно показать только метки для Москвы?
- Зачем рисовать на карте ВСЕ метки, если человек увидит только десятую их часть?
- Если на карте нарисовать около 100-200 меток обычным способом, карта будет тормозить.
- Можно загружать метки постепенно, пачками, чтобы канал не забивался и браузер успевал эти метки отрисовывать?
Кратко – вы генерируете на сервере прозрачные картинки с метками плюс текстовое описание меток. Клиент может следить за видимой областью карты и запрашивать данные, которые нужны для текущей видимой области карты.
С помощью хотспотов, например, рисуются пробки на maps.yandex.ru. На этой же технологии сделан сайт bankomator.ru.
У этой технологии есть несколько существенных минусов
1. Очень сложная серверная часть.
Попробуйте на досуге написать модуль, который генерирует вот такие картинки и их геометрические описания, и вы все поймете.
2. Абсолютная негибкость. Невозможно «приподнять» метку при наведении на нее курсора. Невозможно быстро поменять на клиенте внешний вид меток. Короче – на любой чих надо просить сервер перегенерировать картинку.
Поэтому пользователи крутились, как могли, без хотспотов – передавали наборы единичных объектов на клиент пачками, через таймаут. При этом на клиенте их снова ждали проблемы. Если вы передали на клиент 1000 точек, как их отрисовать?
Из каждой точки нужно было сгенерировать объект ymaps.Placemark и добавить его на карту. Можно было добавить метки в кластеризатор (ymaps.Clusterer) и добавить откластеризованные метки на карту. Тут надо обратить внимание, что при кластеризации 10 000 точек нужно сначала эти 10 000 точек инстанцировать, а потом передать в кластеризатор. То есть метка может не показаться на карте, так как войдет в кластер, но мы все равно потратим время на ее инициализацию.
Подытожив все эти дела, мы решили написать модуль, который бы позволил:
А нужна ли вся эта программная мощь для случая, когда разработчику просто нужно показать много однотипных меток на карте? Правильно, не нужна.
Поэтому первое озарение заключалось в следующем: а давайте вынесем все вспомогательные модули меток в один общий компонент и для каждого отдельного объекта будем создавать только программную сущность, которая непосредственно отвечает за отрисовку.
Второе озарение пришло, когда мы думали над проблемой лишних программных инициализаций. Вспоминаем рассказ выше, где-то в районе вот такой картинки.
Нам захотелось избавиться от лишних программных инициализаций, и мы придумали гениальное. Садитесь поудобнее, сейчас будет откровение: если вам мешают лишние программные инициализации – не делайте их.
Мы решили, что будем хранить пользовательские данные об объектах (по факту в JSON), а программные сущности для объектов будут создаваться только тогда, когда какой-либо объект нужно будет отрисовать на карте.
После комбинации этих идей и некоторой разработки родился новый модуль API для отображения большого количества точечных объектов – ymaps.ObjectManager .
На вход этого менеджера скармливается JSON-описание объектов.
Менеджер анализирует, какие метки попадают в видимую область карты и либо рисует метки, либо кластеризует эти метки и показывает результат на карте.
Для отрисовки меток и кластеров на карте мы взяли только часть объекта ymaps.Placemark (а именно ymaps.overlay.*), которая отвечала только за отображение метки на карте. Всю инфраструктуру типа балунов и хинтов мы вынесли в единый общий компонент.
Эти приемы позволили нам неплохо продвинуться в вопросе отрисовки большого числа меток на клиенте. Вот какие мы получили приросты по скорости:
График 1. Скорость создания и добавления объектов на карту с последующей асинхронной отрисовкой их видимой части
График 2. Скорость создания и добавления объектов на карту с последующей синхронной отрисовкой их видимой части
Важное замечание. Вся эта статистика справедлива для современных браузеров. IE8 к числу этих браузеров не относится. Поэтому для него цифры будут значительно хуже, но думаю для большинства это не имеет значения.
У нас получилось ускорить непосредственно создание и отрисовку объектов, вдобавок к этому мы максимально оптимизировали инициализацию программных сущностей. Теперь вы можете, например, откластеризовать на клиенте 50 000 точек, и работать с картой будет комфортно.
Почитать подробно про модуль можно в нашем руководстве разработчика , а посмотреть вживую примеры работы модуля - в песочнице .
Итак, мы научились быстро-быстро рисовать и кластеризовать точки на клиенте. Что дальше?
Пункт 3. Оптимально подгружаем данные Помните пример про болельщиков «Зенита»? Мы решили проблему отрисовки данных на клиенте, но никак не решили проблему, связанную с оптимальной подгрузкой этих данных. Мы начали собирать типовые задачи пользователей API. По итогам исследований мы получили два типовых кейса:Для решения этих кейсов были написаны модули и RemoteObjectManager соответственно.Оба модуля основаны по сути на реализации ObjectManager , но имеют ряд различий в алгоритме загрузки и кеширования загруженных данных.
В итоге по мере работы пользователя с картой ему будут приходить данные из вашей базы. В какой-то момент все или необходимая часть данных будут подгружены и запросы на сервер вообще перестанут отправляться.
Данные хранятся на клиенте в pr-дереве, поэтому выборки даже для большого количества данных делаются довольно шустро.
Теперь обсудим вариант номер два – отображение на клиенте результатов серверной кластеризации. Допустим, вы написали серверную кластеризацию меток. Также вы написали скрипт, который по запросу от клиента умеет отдавать кластеры и единичные метки, не вошедшие в состав кластера.
Вам остается только создать инстанцию RemoteObjectManager и прописать в нем путь до этого чудо-скрипта. RemoteObjectManager будет работать почти так же, как и . Разница будет только в том, что мы будем перезапрашивать данные с сервера при каждой смене зума.
Поскольку данные кластеризуются на сервере, то сервер и только сервер может знать, какие данные нужно, а какие не нужно показывать в данный момент на карте. Поэтому информация об объектах хранится на клиенте только до первой смены зума, а потом все запрашивается заново.
Если с сервера передается описание метки-кластера, то на клиенте эти метки подцепят всю инфраструктуру из API – для кластеров нарисуются специальные значки, для них будут работать все стандартные поведения и так далее и тому подобное.
Пункт 4. Размышления на тему серверной реализации В этом разделе мы хотим перечислить концепции хранения и обработки данных на сервере, которые мы предполагали при проектировании клиентской части. Пойдём от простого к сложному.1. Хранение информации об объектах на сервере в статических файлах Клиентский код оперирует данными исключительно потайлово. Тайл – это некоторая нумерованная область на карте. Подробнее про нумерацию тайлов можно прочитать в нашей документации.
Когда на странице показывается некоторая область карты, клиентский модуль вычисляет, какие тайлы попали в эту видимую область, проверяет наличие нужных данных и отправляет запросы за данными по необходимости.
У клиентского модуля есть настройки, которые заставляют отправлять запросы за каждым новым тайлом по отдельности. Чем это ценно? Да тем, что мы получаем конечное число вариантов запроса клиента на сервер.
Zoom=0, tile=
zoom=1, tile=
zoom=1, tile=
zoom=1, tile=
zoom=1, tile=
zoom=2, tile=
…
Поскольку запросы известны заранее, ответы на запросы тоже можно сгенерировать заранее. Организуем на сервере какую-то такую файловую структуру.
В файлах будет храниться примерно такой код:
MyCallback_x_1_y_2_z_5({ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "geometry": { "type": "Point", "coordinates": }, "properties": { "balloonContent": "Содержимое балуна", "clusterCaption": "Метка 1", "hintContent": "Текст подсказки" } }, ... ] }
При загрузке такого файла на клиенте будет вызван JSONP-callback, прописанный в файле. Данные попадут в недры LoadingObjectManager, закешируются и отрисуются в нужном виде.
В результате на сервере можно хранить просто статические файлы с наборами данных, а клиентская часть сама решит, что ей когда запросить и показать.
2. Динамическое формирование ответа из статических файлов Существенным минусом вышеописанного решения является большое количество запросов за данными от клиента к серверу. Намного целесообразнее отправлять запрос сразу за несколькими тайлами, чем запрашивать данные для каждого тайла по отдельности.Но для обработки запросов за группами тайлов уже придется написать некоторый серверный код.При этом данные можно продолжить хранить в отдельных файлах. Когда от клиента поступит запрос за данными в некоторой прямоугольной области, достаточно будет склеить содержимое нескольких файлов в один ответ и отправить его обратно на клиент.
3. Динамическое формирование ответа с использованием базы данных Самый верный, на наш взгляд, путь – реализовать серверную часть с использованием какой-либо базы данных, умеющей индексировать геопривязанные данные. Для любой базы, не поддерживающей пространственные индексы, можно создать подобный индекс самостоятельно, используя концепцию пространственных ключей .Вообще хранение геопривязанных данных на сервере и их кластеризация – тема отдельной беседы. Так что обсудим в другой раз.
Заключение Сравнительная таблица новых модулей.| ObjectManager | Отрисовка производится только тех объектов, которые попадают в видимую область карты. Нет необходимости реализовывать серверную часть, поскольку вся обработка данных производится на стороне клиента. |
Данные загружаются для всех объектов сразу (даже для тех, которые не попадают в видимую область карты). Кластеризация объектов производится на стороне клиента. |
Позволяет кластеризовать объекты на клиенте. Загружает данные только для видимой области карты. Сохраняет загруженные данные. Для каждого объекта данные загружаются только один раз. Позволяет фильтровать объекты при их отображении. |
Поддерживает работу только с метками. Кластеризация объектов производится на стороне клиента. |
| RemoteObjectManager | Использует серверную кластеризацию данных. Данные объектов хранятся на сервере. Каждый раз подгружаются данные только для тех объектов, которые попадают в видимую область карты. |
Поддерживает работу только с метками. При изменении коэффициента масштабирования данные загружаются заново (даже для тех объектов, для которых данные уже были загружены). Необходимо реализовывать собственную кластеризацию. Необходимо реализовать серверную часть. |
На данный момент мы поддерживаем работу только с точечными объектами. Поддержка полигонов, полилиний и прочих прекрасных фигур стоит у нас в планах и появится в будущих релизах.
Когда стоит задуматься об использовании этих модулей? Почти в любой ситуации, когда вам надо отрисовать на карте много точечных объектов.
Теги:
- javascript
- api
- geo
Визуально спланировать маршрут будущего путешествия или отметить метками места, где уже были — всё это может выполнить в Google Maps, при этом построить маршруты и рассчитать расстояние. А так же отмечать маршруты поездок, пеших походов. В общем, идеальный способ связать путешествия с картами, чтобы всё было интерактивно и познавательно.
Давайте попробуем разобраться с этим полезнейшим для путешественников сервисом, а так же познакомимся со скретч картами, которые можно повесить дома на стену и помечать посещённые государства.
Не знаю как у вас, но во мне Гугл Мапс всегда вызывал какой-то ступор, я всегда думал, что им очень тяжело пользоваться и просто не решался сесть и разобраться. Но, как сказал Че Гевара: «Давайте будем реалистами и совершим невозможное», и я пересилил свою фобию перед Google Maps, и выбрал день чтобы полностью в нём разобраться. И вновь убедился, что всё, что поначалу кажется сложным, получается в итоге простым и понятным.
Тем более, что ранее у нас с Вами уже был опыт работы c сервисом , когда мы научились планировать дела и путешествия.
Идеально сервис работает в родном для Google браузере — Ghrome, в Опере вообще не важно отображается и подтормаживает. Во время работы с картами советую пользоваться Хромом или Мозилой.
Создание своего маршрута / карты путешествия в google mapsТак, давайте создадим свои метки на карте. Первым делом зайдите на google maps и перейдите в раздел «Мои маршруты», здесь надо будет кликнуть на ссылку «Создать»:
На созданной карте вы увидите слой, он чем-то напоминает слои в Фотошопе. Под формой поиска находится панель инструментов, которая доступна для работы. А именно:
Поэтому берём инструмент и для начала расставим маркеры по тем локациям, в которых мы уже были:
Все метки месторасположения будут добавляться в один слой, который автоматически был создан с новой картой.
Добавление к меткам на карте фотографий и видеоПосле того как расставили необходимые маркеры по карте, можно начать их наполнять описанием, видео или фотографиями.
Для этого выбираем инструмент , выделяем необходимый для редактирования маркер и кликаем по иконке с фотоаппаратом:
Далее откроется окно для загрузки и прикрепления контента к маркеру. Это могут быть фото загруженное где-нибудь в интернете, либо видео с Youtube. Изображение так же можно найти поиском Google по картинкам. Напрямую загрузить фотографию с компьютера в Google Maps нельзя.
Если вы не знаете куда загрузить вашу фотографию в интернете, чтобы была прямая ссылка для вставки, то советую сервис ipic.su либо пользуйтесь облачным сервисом хранения файлов dropbox .
Как измерить расстояние пути и проложить маршрут?Для измерения расстояния существует два способа — с помощью инструмента «линейка» и «линия». Сейчас подробнее рассмотрим работу каждого из них.
Пример работы инструмента «Линейка»
1. Линейка подойдёт для измерения расстояния по прямой, от пункта А к пункту Б. Если начертить какую-то замкнутую фигуру с помощью «линейки», то можно будет увидеть площадь этой фигуры.
2. С помощью лини можно нарисовать какую-нибудь замкнутую фигуру, к примеру, территорию по которой вы сейчас путешествуете. Так же как с линейкой, по замкнутой фигуре вам будет доступная информация по её площади и расстояния по границам.
Прокладывания маршрута на карте для автомобиля выполняется так же с помощью линии. Вы ставите точку A, а затем точку B и сервис просчитывает расстояние и путь по официальным автодорогам.
Слева на фото выделенная область «Линией», справа проложенный маршрут
Маршрут создается на новом слое. Чтобы получить детальную статистика, зайдите в меню слоя с проложенным маршрутом и кликните по ссылке «Детали маршрута», чтобы осмотреть весь путь подробнее:
У маршрута можно изменять средство передвижения, это может быть велосипед или пеший путь. Но это актуально больше для Европы, Америки, где существуют велосипедные дороги и их добавляют к картам.
Как отметить координаты на карте?Если вы знаете координаты определённой местности, то в поисковой строке Google Maps вбиваете широту и долготу через пробел. Важно именно в такой последовательности! Разделитель между градусами и десятичными минутами — точка.
Варианты записи:
Давайте для примера найдём координаты затонувшего судна Британия из книги «Дети капитана Гранта», Жюль Верна.
— «Там, — продолжал Гарри Грант, — постоянно терпя жестокие лишения, они бросили этот документ под сто пятьдесят третьим градусом долготы и тридцать седьмым градусом одиннадцатой минутой широты. Окажите им помощь, или они погибнут».
По сюжету книги известно, что южное полушарие и западная часть. Пересчитаем минуты в десятичные и получим координаты для карты:
Если вы отметили точку и хотите её показать друзьям. То, как уже описано выше, создаёте новую карту, добавляете на слой эту точку и теперь можете делиться ссылкой с любым человеком.
лучшие посты
Кому удобен и ближе Яндекс, предлагаю посмотреть подобную статью про фиксирование . Возможности печати более расширены!
Пользу слоёв я увидел в том, чтобы разделять места и маршруты по их назначению. К примеру, я на одном слое выставляю маркеры мест где я уже был, а на втором слое отмечаю те страны и города, в которых я хочу побывать в будущем. И все выставленные метки по каждого слоя будут одновременно отображаться на одной карте.
Можно будет наслаивать слои друг на друга и уже редактировать каждый отдельно. «Редактировать» сильно сказано, ведь на самом деле мы сможем не так уж и много, а именно: изменять стиль слоя, редактировать таблицу с данными, отключать и включать его отображение.
Отмеченный маршрут путешествия на карте (кликабельно)
В примере карты, которую я делаю для этой статья, цвет маркеров (меток) выставляю разным, чтобы было визуальное различие. Кроме маркеров в меню можно редактировать стиль отображения, а так же и для маршрутов с линиями.
Импортирование посещенных мест из Excel в Google MapsЕсли у вас много мест, которые вы хотите отметить на карте, то можно будет подготовить таблицу в Excel, которую затем импортировать в карту. Очень удобно и экономит время.
Базовая таблица будет состоять из трёх столбцов:
- Месторасположение маркера. Это могут быть как точные координаты (широта и долгота), так и просто название местности. Я использую название города в котором был и через запятую указываю страну. Страну надо указывать потому, что некоторые названия городов повторяются и программа может расставить много ненужных маркеров. Так же старайтесь писать названия без ошибок;
- Второй столбец это название маркера, которое будет отображаться в заголовке и в меню;
- Третий столбец будет отвечать за описание, в котором можно указать любую информацию касающуюся этой местности.
Пример импортируемого файла Excel:
В произвольной форме можно указывать ещё столбцы, это могут быть номера телефонов, сайты, название отелей и всё что угодно. Вся информация из дополнительных колонок будет находиться в описании к отметке.
Теперь, чтобы добавить все данные на карту, создайте новый слой, после чего нажмите на кнопку «Импорт». В открывшемся меню выберите ваш xls файл или таблицу с Google Drive.
В открывшемся окне сервис предложит выбрать столбцы, отвечающие за месторасположение и названия маркеров, после этого нажимайте «Готово». Через несколько секунд вся таблица с данными будет загружена на карту и доступна для редактирования.
Пример оформленной карты добавленной на сайт:
Это так называемые Скретч карты, которые в свою очередь делятся на два подтипа — c заклеиванием или стиранием посещённых мест. Посмотреть и купить такие карты, вы можете в книжном магазине Лабиринт .
Очень просто отметить на карте места где был, достаточно взять монетку и аккуратно стереть позолоченный слой. По аналогии с лотерейными билетами. Страны на скретч картах раскрашены разными цветами, а у больших государств, вроде США, России и Канады, ещё есть внутренние разделения по штатам, республиками и т.д.
(хорошая штука), сегодня речь снова пойдет о сервисе от Яндекса и снова про карты, только не про пластиковые и не про игральные, а про карты местности.
Возможность помочь клиентам добраться в нужное место – это весомый вклад в развитие бизнеса, чем больше людей дойдет куда надо, тем выше будут доходы и прибыль. Так что, если ваш бизнес как-то привязан к объектам на местности, то вставить хорошую карту на сайт надо обязательно.
Зачем нужна интерактивная картаВ былые времена адреса офисов, маршруты прохода и проезда, различные интересные объекты и т.д. отмечали на картинках, изображающих карту, и выкладывали на сайт обычным jpg или png файлом. Проблема была в том, что они не могли учесть временные ремонты, пробки или другие изменения местности, не имели возможности подсказать индивидуальных маршрут с разных направлений.
С развитием интернет сервисов, таких как Яндекс Карты и Google Maps, появилась возможность сделать карты живыми – интерактивными. Такие можно вертеть в разные стороны, менять масштаб, маршруты с разных точек задавать, планировать свое перемещение с учетом пробок и многое другое.
Наличие удобной схемы проезда на странице контактов в наше время является правилом хорошего тона для любой компании.
И для того, чтобы помочь вам сделать свой веб ресурс более приветливым к людям я расскажу, как добавить Яндекс карту на сайт, делается это очень легко с помощью специального конструктора (не сложнее чем ).
Конструктор карт ЯндексЕсли у вас нет аккаунта в Яндексе, то надо будет его завести, так как без этого сконструировать ничего не получится, сервис попросит вас залогиниться или пройти регистрацию. Пугаться не нужно, регистрация – это создание почтового ящика на Yandex. Даже если он вам не нужен для работы с электронной почтой, пригодится для других сервисов поисковика, например, для Яндекс Метрики или Яндекс Вебмастер.
Начинается процедура с этой странички – tech.yandex.ru/maps/tools/constructor/
Так как вы читаете эту статью, значит, вы входите первый раз и сохраненных ранее карт у вас нет, остается выбрать левую желтую кнопку “Создать новую карту”. С этого момента начинается формирование индивидуальных настроек карты на нужной местности.
Фишка в том, что вы сможете вставить не просто Яндекс карту с точным адресом, а карту с любым количеством объектов выделенных разными маркерами и цветами – объектами, точками, маршрутами.
Все настройки производятся в визуальном конструкторе, никакие коды править не придется, работа по адаптации мало отличается от обычного использования Яндекс карт пользователем. Начнем с добавления объектов.
Добавление объектовПервым инструментом послужит форма поиска, которая находится в верхней части карты. С ее помощью мы можем отыскать нужную точку по адресу, координатам или названию. Вводим в поле данные запроса, пример с адресом «Москва, Красная площадь»:
После нажатия на кнопку найти на местности появится точка, соответствующая расположению заданного объекта. Вставить можно много объектов. Пример с Кремлем:
Каждую точку можно настроить так, чтобы она отличалась от других объектов и была на карте легко различима – меняется цвет и форма, а также, внутри можно добавить уникальный значок, если ткнуть в выпадающее меню «Контент». Это удобно, если объектов на создаваемой карте много и их можно классифицировать по разным группам.
Слева наполняется список всех отмеченных на карте адресов.
Изменение масштаба и положенияС помощью клавиш «+» и «-», находящихся в левой верхней части макета устанавливается оптимальный масштаб. Полная карта России не нужна, чтобы перемещаться по центру Москвы и, если вы указываете точечный объект в каком-то городе, лучше настроить масштаб на уровне, когда различимы названия улиц и окружающих домов.
Для перемещения карты в разные стороны нужно захватить ее нажатием левой кнопки мыши и двигать куда нужно.
Контуры объектов (многоугольники) и линииПри необходимости выделить очертания какого-либо элемента на карты, когда указания точкой недостаточно, используем инструмент «Многоугольники». Устанавливая одну точку за другой, мы получаем периметр, залитый внутри определенным цветом.
Точек может быть сколько угодно, поэтому, фигура, закрашенная на карте, допускает любую степень сложности. Завершить построение контура можно кликом мыши по последней установленной точке или переключением на любую другую кнопку конструктора (например, на линии). Я выделил контуры Московского Кремля по его стене:
Начертание линий осуществляется кнопкой «Линии». Все действия аналогичны предыдущему инструменту, только пространство между точками не закрашивается. С помощью линий на Яндекс карте можно рисовать маршруты движения (прохода, проезда).
Таким способом можно показать оптимальный маршрут осмотра достопримечательностей.
Конечную точку подтверждаем повторным ее нажатием мышью, там будет меню «Удалить»/«Завершить». После выбора завершения открывается поле для подписи к конечной точке и настройки параметров линии (толщина, цвет, прозрачность).
Завершаем маршрут нажатием на «Готово».
Вид карты и наложение пробокПоследний штрих, который позволяет придать карте особые свойства – это наложение пробок, для этого есть отдельная кнопка. Честно сказать, я сомневаюсь, что подобная опция будет часто востребована для карт, вставляемых на сайт, так как для движения на машине люди чаще пользуются навигаторами, чем встроенными картами.
А вот переключение режимов между схемой, спутником и гибридом может пригодиться.
Вид со спутника придает окружающим объектам их реальный облик и узнать их на такой карте проще, чем схематичные прямоугольники схемы.
Для того, чтобы в будущем мы могли возвращаться к созданной карте для ее корректировки или для повторного получения кода вставки надо придумать ей название и описание, после чего сохранить.
Наша карта уже готова и теперь надо получить ее код для вставки на сайт, Яндекс дает возможность сделать:
- интерактивную карту (о которой я говорил с самого начала);
- статическую – обычная картинка, только с мудреным кодом, ничего двигать в ней нельзя, в добавок еще и максимальное число объектов ограничено;
- печатную – файл-изображение высокого качества, поддерживаются не все страны, в основном СНГ и Турция, не поддерживаются спутниковая и гибридная версия.
Выбор между ними будет выведен сразу после сохранения.
В этом же меню задается итоговый размер в пикселях. Задать его можно вручную или двигая за уголки рамку вокруг выделенной области справа. Галочка «Растянуть по ширине» заставляет карту занимать все пространство на сайте упираясь в края того блока, где она выводится.
На этом этапе есть возможность вернуться к редактированию карты, в левой верхней части окна есть соответствующая надпись со стрелкой.
Итоговый код появляется после нажатия на кнопку «Получить код карты», мой выглядит вот так:
|
При выборе печатной карты добавится выбор формата файла – png или jpg, и кода, соответственно, не будет – кнопка скачивания вместо него появится. Такой файл тоже можно вставить на сайт, только надо будет закачивать его на хостинг и, при отсутствии визуального редактора у вашего сайта, надо будет выписать изображение в HTML теги (src)
Как вставить карту Яндекс на сайтКод мы получили, теперь необходимо перенести его на наш веб ресурс. Для размещения подойдет любое место, главное, чтобы размеры вписывались. Если вы пользуетесь конструкторами или визуальными редакторами, то не забудьте при вставке кода переключить их в текстовых (HTML) режим. Вот так:
Вот что получилось у меня после всех проведенных настроек:
Удобен сей элемент всем – и объекты нужные подсвечены и масштаб подобран как положено. Кроме того, сервис Яндекса позволяет пользователю определить свое местоположение (стрелочка в верхнем левом углу) и проложить индивидуальный маршрут в нужную точку.
Раскрыть карту на весь экран позволяет кнопка в правом верхнем углу в виде двух расходящихся в разные стороны стрелок. Теперь про плагины.
Плагины для WordPress и других CMSРаньше делать карты было сложнее и многие пользовались для этих целей специальными плагинами, например, для WordPress был такой – Yandex Maps for WordPress. Сейчас не нужны никакие API и любой пользователь с минимальными знаниями разберется как все настроить, поэтому смысла в плагинах я не вижу. Названный выше плагин тому подтверждение – не обновляется более 2-х лет, видимо спроса нет.