Последнее время достаточно часто нас просят помимо документации, рассказывать про различные примеры использования API Яндекс.Карт, с пояснениями каких-либо моментов с фрагментами кода. Время от времени мы будем публиковать такие статьи в этом клубе, а также будем рады видеть нечто подобное и от разработчиков, которые разобрались с нашим АПИ, и хотели бы поделиться опытом с другими веб-разработчиками.
Сегодня мы рассмотрим то, как устроена карта с несколькими метками с заданным стилем на карте мира.
Рассмотрим вот такой пример: Все офисы Яндекса на карте мира
Показать несколько меток на интерактивной карте (как в примере) можно двумя способами: задать их с помощью функций Javascript API (подробнее см. раздел "Метки") или описать их при помощи специального XML-файла ("YMapsML" — Yandex Maps Markup Language).
Первый способ можно использовать тогда, когда html-страница генерируется на сервере, и для метки можно на уровне вызовов Javascript указывать различные параметры. А второй — когда сама страница на сайте статическая, а XML либо сформирована один раз, или генерируется на сервере.
Сегодня мы рассмотрим второй способ добавления меток на карту.
Для этого потребуется создать 2 файла: html — страница на которой помещён вызов карты и все необходимые параметры, чтобы показать метки из xml-файла.
Итак, что потребуется:
1) API-ключ для использования Яндекс.Карт - его нужно получить на этой странице.Кстати, при получении ключа, вам будет предложен простой html-код страницы с картой с центром Москвы и уже с вашим ключом, код можно вставить в пустой HTML-файл на локальном диске или на хостинге, и посмотреть, что получилось.
2) стандартный текстовый редактор или любой другой редактор текста с возможностью править XML и HTML файлы.
3) Если вы хотите использовать для обозначения меток собственные значки, то сами значки и тень для значка. Это может быть любая картинка (gif, png, jpg) для интернета с небольшими размерами.
В нашем примере:
Значок
Тень значка:
Кроме этого, нужно знать какого размера картинки, и координаты точки (в пикселях, от левого верхнего угла), которая должна указывать место на карте — "хвостик" точки.
Создание XML-файла с метками
Рассмотрим уже созданный XML-файл с метками: http://company.yandex.ru/inside/address.xml
Этот файл состоит из двух основных частей, вложенных в корневой элемент ymaps : repr:Repsentation — здесь задается представление и ymaps:GeoObjectCollection — здесь описываются географические данные (в нашем случае метки).
Подробная схема YMapsML документа здесь
Обратите внимание, для элементов важно понятие namespace, имена и значения задаются атрибутами xmlns для корневого элемента так:
<ymaps:ymaps xmlns:gml="http://www.opengis.net/gml" xmlns:ymaps="http://maps.yandex.ru/ymaps/1.x" xmlns:repr="http://maps.yandex.ru/representation/1.x">
Это значит, что для того или иного набора тегов будет использоваться соответсвующая схема (правила описания этого тега).
Задание меток
Для того, чтобы описать метку (точку), в тег ymaps:GeoObjectCollection нужно описать вложенный тег:
<gml:featureMember>
<ymaps:GeoObject id="taganka">
<gml:description>
Москва, ул. Станиславского, дом 21, строение 3
</gml:description>
<gml:name>
Офис Яндекса на Станиславского
</gml:name><gml:Point>
<gml:pos>37.662335 55.745376</gml:pos>
</gml:Point>
<ymaps:style>#companyStyle</ymaps:style>
</ymaps:GeoObject>
</gml:featureMember>
Подробнее о тегах внутри:
ymaps:GeoObject — непосредственно описание геообъекта (точки)
gml:description — описание геообъекта
gml:name — название объекта
gml:Point — указание типа геообъекта "метка"
gml:pos — географические координаты в формате - "долгота широта" (через пробел), например "37.662335 55.745376"
ymaps:style — идентификатор стиля данной метки
Где взять географические координаты?
Если у вас есть почтовый адрес, вы можете задать http-запрос к Геокодеру, либо можно просто узнать их, перетащив метку на карте в этом примере
Задание стиля метки
Стиль метки здается тегом задаются в теге repr:Repsentation
<repr:Style gml:id="companyStyle">
<repr:iconStyle>
<repr:href>http://company.yandex.ru/i/ya.png</repr:href>
<repr:size x="57" y="55"/>
<repr:offset x="-37" y="0"/>
<repr:shadow><repr:href>http://company.yandex.ru/i/shadow.png</repr:href>
<repr:size x="57" y="55"/>
<repr:offset x="-37" y="0"/>
</repr:shadow>
</repr:iconStyle>
<repr:balloonContentStyle>
<repr:template>#companyTemplate</repr:template></repr:balloonContentStyle>
</repr:Style>
В этом теге:
repr:iconStyle — описание значка для метки, оно содержит тег repr:href — ссылка на картинку со значком. Путь до картинки нужно указывать полностью, с "http://..". А так же: repr:size — размер картинки, и repr:offset — смещение значка от точки на карте.
Если у значка есть тень, то в тег repr:iconStyle нужно вложить тег repr:shadow, в котром также нужно указать href, size и offset.
repr:balloonContentStyle — стиль содержимого всплывающего окна (balloon) по клику на метке, содержит тег repr:template (с маленькой буквы) — идентификатор шаблона.
Сам же шаблон задается с помощью repr:Template (с большой буквы), в данном случае значения $name и $description подставляются в подзаголовок, и текст под ним:
<repr:Template gml:id="companyTemplate">
<repr:text><![CDATA[<div><h4>$[name]</h4><span>$[description] </repr:text></span></div>]]>
</repr:Template>
Важно: Созданный YMapsML-файл можно визуализировать с помощью Javascript API только в том случае, если он будет доступен для серверов Яндекса по http. Если сайта у вас пока нет, тестовые xml-файлы вы можете опубликовать, например, на Народе
Визуализация YMapsML-файла на карте
Рассмотрим интересующие нас вызовы API в коде страницы
Подключение Javascript API
Простое подключение API происходит при помощи загрузки Javascript (внутри тега <head>):
<script charset="utf-8" type="text/javascript" src="http://api-maps.yandex.ru/1.0/?key=API-ключ">
"1.0" — версия API (Подробнее о версиях Javascript API)
"API-ключ" — ключ, полученный для вашего сайта, получить ключ можно здесь, подробнее о ключах — в "Вопросах и ответах"
Задание параметров карты и вызовы
<script type="text/javascript"><!--
var map; //декларируем имя объекта для карты
var ml; //декларируем имя слоя с метками из XML
function init (lat,long) { //функция имеет входные параметры - широта и долгота, куда спозиционировать карту
map = new YMaps.Map(document.getElementById("YMapsID")//создание карты
map.setCenter(new YMaps.GeoPoint(long, lat), 2); //задание параметров для карты (центр и уровень масштабирования)
ml = new YMaps.YMapsML( 'http://company.yandex.ru/inside/address.xml'//создание слоя с метками из XML
map.addOverlay(ml); //добавление слоя на карту
map.addControl(new YMaps.TypeControl()//добавляем элемент управления переключения типов карты
map.addControl(new YMaps.ToolBar()//добавление тулбара
map.addControl(new YMaps.Zoom()//добавление элемента управления масштабом
map.addControl(new YMaps.ScaleLine()//добавление масштабного отрезка
YMaps.Events.observe(ml, ml.Events.Fault, function (error) {
alert('Ошибка' + error); //если XML документ не загрузился или загрузился с ошибками, выведется сообщение об этом
}
};
//--></script>
Добавление html-элемента с картой на страницу
<div id="YMapsID" style="height:400px; width:100%;"></div>
Инициализация карты
Карта иницилизируется по загрузке страницы, с центром в указанных ниже координатах:
<body onload="init('45.758255','-22.00');">
Это все :)
PS: Пишите вопросы, если чего-то было непонятно.