В этой заметке я рассмотрю вопрос о том, как добавить маркер для обозначения точки на карту.
В предыдущих заметках мы получили вид простейшей карты и добавили на неё элементы управления .
В результате у нас получился следующий код:
<!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>
<meta http-equiv=”Content-Type” content=”text/html” />
<script src=”http://api-maps.yandex.ru/0.8/?key=
AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==”
type=”text/javascript”></script>
<script type=”text/javascript” charset=”utf-8″>
var map;
function init () {
map = new YMaps.Map( document.getElementById(”YMapsID”) );
map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13, YMaps.MapType.MAP);
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.MiniMap());
map.addControl(new YMaps.ScaleLine());}
</script>
</head>
<body onload=”init();”>
<div id=”YMapsID” style=”height:400px; width:600px;”></div>
</body>
</html>
Теперь мы добавим маркер на карту для обозначения объекта, например, отметим на карте Нижнего Новгорода, где находиться театр оперы и балета им. А.С. Пушкина.
Для начала нужно узнать координаты.
Это можно сделать, используя сервис определения координат, расположенный по адресу http://api.yandex.ru/maps/tools/getlonglat.xml
Введя в строку поиска адрес: Нижний Новгород, Белинского ул., д. 59, мы получим искомые координаты в формате "долгота, широта" 44.017152,56.315455
Для добавления маркера на карту нужно в наш код добавить три строчки:
var point = new YMaps.GeoPoint(44.017152,56.315455);
var placemark = new YMaps.Placemark(point);
map.addOverlay(placemark);
В первой строке мы задаем координаты точки для маркера.
В следующей строке мы передаем конструктору YMaps.Placemark координаты географической точки, а также он может принимать список параметров, которые необходимо к этой точке применить.
Третья строка добавляет метку на карту.
Метки интерактивны, по ним можно щелкать мышью и передвигать. По умолчанию метки ожидают событие "click", по которому слушатели событий могут, например, показать балун (информационное окно).
Полный код примера:
<!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>
<meta http-equiv="Content-Type" content="text/html" />
<script src="http://api-maps.yandex.ru/0.8/?key=
AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw=="
type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
var map;
function init () {
map = new YMaps.Map( document.getElementById("YMapsID") );
map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13,
YMaps.MapType.MAP);
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.MiniMap());
map.addControl(new YMaps.ScaleLine());
var point = new YMaps.GeoPoint(44.017152,56.315455);
var placemark = new YMaps.Placemark(point);
map.addOverlay(placemark);
}
</script>
</head>
<body onload="init();">
<div id="YMapsID" style="height:400px; width:600px;"></div>
</body>
</html>
Загрузив данную страницу в браузере мы увидим
Для метки можно задать значок, который будет отображаться вместо значка по умолчанию. Значок состоит из нескольких наложенных друг на друга изображений.
Для создания значка необходимо задать изображение значка, его размер и его смещение относительно позиции метки.
Простейшие значки создаются на основе стандартных стилей, встроенных в API. Для значков предусмотрены различные цветовые решения.
Некоторые простейшие значки встроенные в API Яндекс.Карт:
default#whitePoint
default#greenPoint
default#redPoint
default#yellowPoint
default#darkbluePoint
default#nightPoint
default#greyPoint
default#bluePoint
default#orangePoint
default#darkorangePoint
default#pinkPoint
default#violetPoint
В значок метки можно помещать текстовое содержимое. Стандартные значки меток растягиваются по ширине и высоте в зависимости от содержимого. Значок растягивается до определенного значения, которое прописано как значение по умолчанию.
С помощью метода setIconContent() можно изменять содержимое значка метки
Например, placemark.setIconContent("Театр оперы и балета");
Для метки можно задать и собственный значок.
Это делается с помощью класса YMaps.IconStyle.
Для создания нового значка необходимо создать новый стиль с помощью конструктора класса YMaps.Style. Этот класс содержит набор данных, которые определяют внешний вид различных объектов, помещаемых на карту, в частности, стиль для отображения значка.
Также может понадобиться задание стиля для тени значка.
После этого его можно использовать.
Для примера создадим значок для обозначения тетра.
var s = new YMaps.Style(); - определяем стиль s
s.iconStyle = new YMaps.IconStyle();
s.iconStyle.offset = new YMaps.Point(-15, -15); - определяем смещение значка от местоположения точки токки
s.iconStyle.href = "files/theater.png"; - файл с изображением значка
s.iconStyle.size = new YMaps.Point(30, 30); - задаем размер значка
Изменяем строку var placemark = new YMaps.Placemark(point); добавляем созданный стиль
var placemark = new YMaps.Placemark(point, {style: s});
Изменим также центр карты map.setCenter(new YMaps.GeoPoint(44.017152,56.315455), 15,
YMaps.MapType.MAP);
Загружаем измененную страницу в браузере
Полный код с исправлениями
<!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>
<meta http-equiv="Content-Type" content="text/html" />
<script src="http://api-maps.yandex.ru/0.8/?key=
AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw=="
type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
var map;
function init () {
map = new YMaps.Map( document.getElementById("YMapsID") );
map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13,
YMaps.MapType.MAP);
var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle();
s.iconStyle.offset = new YMaps.Point(-15, -15);
s.iconStyle.href = "files/theater.png";
s.iconStyle.size = new YMaps.Point(30, 30);
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.MiniMap());
map.addControl(new YMaps.ScaleLine());
var point = new YMaps.GeoPoint(44.017152,56.315455);
var placemark = new YMaps.Placemark(point, {style: s});
map.addOverlay(placemark);
}
</script>
</head>
<body onload="init();">
<div id="YMapsID" style="height:400px; width:600px;"></div>
</body>
</html>
Подробнее узнать о добавлении меток на карту можно по адресу http://api.yandex.ru/maps/jsapi/doc/dg/concepts/markers.xml
Результат поиска Google Maps