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

Автор: | 20.05.2012
5 комментариев

Продолжаем изучать особенности API Яндекс.Карт версии 2.х начатый в предидущей заметке «Начинаем изучать API Яндекс.Карт 2.0».

И теперь мы рассмотрим как можно добавить метку на карту, изменять различные его параметры и использовать собственный значок для ее обозначения.

Рассмотрим простейший пример добавления метки.

Код примера:

<!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; charset=utf-8" />
<title>Пример добавления метки на карту - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
			// Создание метки 
			var myPlacemark = new ymaps.Placemark(
			// Координаты метки
			[56.326944, 44.0075]        
			);
 
		// Добавление метки на карту
		myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

После определения параметров карты, мы создаем нашу метку myPlacemark.

А в качестве параметров передаем координаты метки.

Добавляем метку на карту строкой

myMap.geoObjects.add(myPlacemark);

При просмотре карты мы наблюдаем стандартную метку со стилем по умолчанию.

Существует второй способ добавления метки на карту

Код примера:

<!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; charset=utf-8" />
<title>Пример добавления метки на карту вариант 2 - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myGeoObject = new ymaps.GeoObject({
                    // Геометрия.
                    geometry: {
                        // Тип геометрии - точка
                        type: "Point",
                        // Координаты точки.
                        coordinates: [56.326944, 44.0075]
                    }
                });
 
			// Добавление метки на карту
			myMap.geoObjects.add(myGeoObject);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере мы определяем геообъект и задаем параметры: тип геометрии Point и координаты точки.

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

Пример кода:

<!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; charset=utf-8" />
<title>Пример добавления метки с текстом - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.326944, 44.0075] , {
                    // Свойства
                    // Текст метки
                    iconContent: 'Нижний Новгород'
                }, {
                    // Опции
                    // Иконка метки будет растягиваться под ее контент
                    preset: 'twirl#blueStretchyIcon'
                });     
 
 
			// Добавление метки на карту
			myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере мы задаем параметр iconContent: ‘Нижний Новгород’, а также в опциях метки устанавливаем параметр preset: ‘twirl#blueStretchyIcon’ — иконка синего цвета будет растягиваться, под размещенный в ней контент.

Мы можем вывести подсказку с названием метки при наведении мыши на метку.

Пример кода:

<!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; charset=utf-8" />
<title>Пример добавления метки с подсказкой - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.326944, 44.0075] , {
                    // Свойства
                    // Текст метки
                    hintContent: 'Нижний Новгород'
                });     
 
 
			// Добавление метки на карту
			myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

Следующая возможность — это задание стандартного стиля метки.

Пример кода:

<!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; charset=utf-8" />
<title>Пример добавления метки со стандартной иконкой - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.326944, 44.0075] , {
                    // Свойства
                    // Текст метки
                    hintContent: 'Нижний Новгород'
                }, {
                        preset: 'twirl#redIcon'
                    });     
 
 
				// Добавление метки на карту
				myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере стиль для метки задается параметром preset: ‘twirl#redIcon’.

Теперь рассмотрим пример задание собственного значка для метки.

Код примера:

<!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; charset=utf-8" />
<title>Пример добавления метки с собстенным значком - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 15
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.315695,44.017063] , {
                    // Свойства
                    // Текст метки
                    hintContent: 'Оперный театр'
                }, {
                    iconImageHref: 'http://webmap-blog.ru/files/gmap/gicon/mm_20_red.png', // картинка иконки
                    iconImageSize: [12, 20], // размеры картинки
                    iconImageOffset: [-6, -10] // смещение картинки
                    });     
 
 
				// Добавление метки на карту
				myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

Здесь параметры нашего значка задаются в опциях метки.

Картинка для иконки, размеры картинки и смещение картинки относительно точки с координатами.

Если Вы хотите использовать тень, то нужно добавить еще несколько параметров:

iconShadow — флаг наличия тени у иконки, значение по умолчанию false;
iconShadowImageHref — URL графического файла тени иконки;
IconShadowImageOffset — Отступ тени иконки;
iconShadowImageSize — Размер тени иконки.

Метку можно сделать перемещаемой по карте, если задать параметр draggable: true.

Пример кода:

<!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; charset=utf-8" />
<title>Пример добавления метки с возможностью перемещения - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.326944, 44.0075], // Нижний Новгород
                    zoom: 13
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.326944, 44.0075] , {
                    hintContent: 'Подвинь меня!'
                }, {
                    draggable: true // Метку можно перетаскивать, зажав левую кнопку мыши.
                });
				// Добавление метки на карту
				myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

Загрузить архив с файлами примеров

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

  2. Александр

    А как можно добавить в метку ссылку на сайт?

    Ответить ↓
    1. admin Автор записи

      Да, в балун можно добавлять любой html-код, в том числе и код ссылки:

       myPlacemark = new ymaps.Placemark([55.7, 37.6], {
                    // Свойства
                    iconContent: 'Щелкни по мне',
                    balloonContentHeader: 'Яндекс',
                    balloonContentBody: '<a href="http://yandex.ru" target="_blank" rel="nofollow">Перейти на сайт</a>'    
                }, {
                    // Опции
                    preset: 'twirl#blueStretchyIcon' // иконка растягивается под контент
                });
      Ответить ↓
  4. Сергей

    Спасибо! Очень полезная стать. Сколько не смотрел документацию то одно не так, то другое. У вас все четко. Все работает и понятно, куда идти дальше. Спасибо!

    Ответить ↓

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

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