Продолжаем изучать особенности 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; charset2=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; charset2=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; charset2=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; charset2=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; charset2=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; charset2=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; charset2=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>
Запись опубликована
20 мая 2012 в 18:25 Категория: Яндекс Карты.
Вы можете следить за комментариями с помощью RSS 2.0-ленты.
Вы можете оставить комментарий или трекбэк с вашего сайта.