1. С помощью javascript-функций API Яндекс.Карт.
2. С помощью xml-файла специального формата.
В этой статье мы рассмотрим второй способ добавления меток на карту.
Для этого потребуется создать два файла:
html-страница, на которой размещен код создания карты и YMapsML-файл с описанием меток. Также нам нужно будет картинка, если мы планируем использовать для отображения меток собственные значки.
Создание XML-файла с метками
Рассмотрим уже созданный XML-файл с метками: http://ymapsapi.narod.ru/
Этот файл состоит из двух основных частей, вложенных в корневой элемент 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>
<gml:description>
Москва, ул. Станиславского, дом 21, строение 3
</gml:description>
<gml:name>
Офис Яндекса на Станиславского
</gml:name>
<gml:Point>
<gml:pos>37.662336 55.745336</gml:pos>
</gml:Point>
<ymaps:style>#yaIcon</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:Representation>
<repr:Style gml:id="yaIcon">
<repr:iconStyle>
<repr:href>http://maps.yandex.ru/blocks-desktop/ymaps-geolocation/__preset/_id/ymaps-geolocation__preset_id_yandex-ru.png</repr:href>
<repr:size x="24" y="24"/>
<repr:offset x="-12" y="-12"/>
</repr:iconStyle>
<repr:balloonContentStyle>
<repr:template>#yaTemplate</repr:template>
</repr:balloonContentStyle>
</repr:Style>
<repr:Template gml:id="yaTemplate">
<repr:text><![CDATA[<div><h4>$[name]</h4><span>$[description]</span></div>]]></repr:text>
</repr:Template>
</repr:Representation> В этом теге:
repr:iconStyle — описание значка для метки, оно содержит тег repr:href — ссылка на картинку со значком. Путь до картинки нужно указывать полностью, с «http://..». А так же repr:size — размер картинки и repr:offset — смещение значка от точки на карте. Если у значка есть тень, то в тег repr:iconStyle нужно вложить тег repr:shadow, в котором также нужно указать repr:href, repr:size и repr:offset.
repr:balloonContentStyle — стиль содержимого всплывающего окна (balloon) по клику на метке, содержит тег repr:template (с маленькой буквы) — идентификатор шаблона.
Сам же шаблон задается с помощью repr:Template (с большой буквы), в данном случае значения $name и $description подставляются в подзаголовок, и текст под ним:
<repr:Template gml:id="yaTemplate">
<repr:text><![CDATA[<div><h4>$[name]</h4><span>$[description]</span></div>]]></repr:text>
</repr:Template>
Визуализация XML-файла на карте
Созданный YMapsML-файл можно визуализировать с помощью Javascript API только в том случае, если он будет доступен по http.
В начале подключим API Яндекс.Карт. Важно, чтобы у нас был подключен модуль geoXml.load. Данный метод позволяет загружать XML-файл с географическими данными и преобразует его в коллекцию GeoObjectCollection.
Он уже входит в пакет package.full, но в нашем примере мы используем пакеты package.standard + package.geoXml. Тем самым мы уменьшаем размер, загружаемого кода API.
В итоге мы получаем:
<!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>Примеры. Визуализация xml-файла.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://api-maps.yandex.ru/2.0/?load=package.standard,geoXml.load&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init() {
var map = new ymaps.Map("map", {
center: [55.734046, 37.588628],
zoom: 10
});
ymaps.geoXml.load('http://ymapsapi.narod.ru/examples/geoxml/ya.ymapsml')
.then(function (res) {
map.geoObjects.add(res.geoObjects);
});
}
</script>
</head>
<body>
<h2>Примеры. Визуализация xml-файла.</h2>
<div id="map" style="width: 800px; height: 400px"></div>
</body>
</html> Вы можете посмотреть что получилось в примере.