Пятница, 27.06.2025, 02:26
Приветствую Вас Гость | RSS
Главная | Регистрация | Вход
Мой сайт
Меню сайта
Мини-чат
Наш опрос
Оцените мой сайт
Всего ответов: 1
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Главная » 2013 » Февраль » 11 » Добавляем метку на карту, используя api яндекс.кар�
05:52
 

Добавляем метку на карту, используя api яндекс.кар�

Продолжаем изучать особенности 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-ленты. Вы можете оставить комментарий или трекбэк с вашего сайта.

Просмотров: 1390 | Добавил: follif | Рейтинг: 0.0/0
Всего комментариев: 0
Поиск
Календарь
«  Февраль 2013  »
Пн Вт Ср Чт Пт Сб Вс
    123
45678910
11121314151617
18192021222324
25262728
Архив записей
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Copyright MyCorp © 2025 | Бесплатный конструктор сайтовuCoz