Добавляем маркер на карту используя API Яндекс.Карт

Автор: | 29.03.2009
8 комментариев

В этой заметке я рассмотрю вопрос о том, как добавить маркер для обозначения точки на карту.

В предыдущих заметках мы получили вид простейшей карты и добавили на неё элементы управления .

В результате у нас получился следующий код:

<!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.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.017152,56.315455), 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/tasks/how-to-add-placemark.xml

Добавляем маркер на карту используя API Яндекс.Карт: 8 комментариев

  5. Серго

    спасибо, полезно!
    а не расскажете, каким образом можно периодически обновлять координаты маркера (к примеру, если это не театр, а танк). желательно, без перезагрузки страницы.

    Ответить ↓
  6. Серго

    спасибо за примеры! жаль, что без объяснения.
    во втором — как изменяется угол картинки?
    бешеная точка — вроде бы то, что надо. попробую разобраться.

    Ответить ↓

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *