Yandex map html placemark

Занимательная веб-картография

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

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

map = new YMaps.Map( document.getElementById(”YMapsID”) );

map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13, YMaps.MapType.MAP);

Теперь мы добавим маркер на карту для обозначения объекта, например, отметим на карте Нижнего Новгорода, где находиться театр оперы и балета им. А.С. Пушкина.

Для начала нужно узнать координаты.

Это можно сделать, используя сервис определения координат, расположенный по адресу 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);

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

В следующей строке мы передаем конструктору YMaps.Placemark координаты географической точки, а также он может принимать список параметров, которые необходимо к этой точке применить.

Третья строка добавляет метку на карту.

Метки интерактивны, по ним можно щелкать мышью и передвигать. По умолчанию метки ожидают событие «click», по которому слушатели событий могут, например, показать балун (информационное окно).

map = new YMaps.Map( document.getElementById(«YMapsID») );

map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13,
YMaps.MapType.MAP);

var point = new YMaps.GeoPoint(44.017152,56.315455);

var placemark = new YMaps.Placemark(point);

map.addOverlay(placemark);

Загрузив данную страницу в браузере мы увидим

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

Для создания значка необходимо задать изображение значка, его размер и его смещение относительно позиции метки.

Простейшие значки создаются на основе стандартных стилей, встроенных в API. Для значков предусмотрены различные цветовые решения.

Некоторые простейшие значки встроенные в API Яндекс.Карт:

В значок метки можно помещать текстовое содержимое. Стандартные значки меток растягиваются по ширине и высоте в зависимости от содержимого. Значок растягивается до определенного значения, которое прописано как значение по умолчанию.

С помощью метода 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, );

Изменим также центр карты map.setCenter(new YMaps.GeoPoint(44.017152,56.315455), 15,
YMaps.MapType.MAP);

Загружаем измененную страницу в браузере

Полный код с исправлениями

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);

var point = new YMaps.GeoPoint(44.017152,56.315455);

var placemark = new YMaps.Placemark(point, );

Источник

Яндекс Карты – метки и балуны

Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.

Подробнее по JS API 2.1 можно посмотреть на Яндексе:

В начале подключение скрипта и инициализация:

Метка с точкой

По координатам

var myPlacemark = new ymaps.Placemark([55.85,37.45], null, < preset: 'islands#blueDotIcon' >); myMap.geoObjects.add(myPlacemark);

По адресу

ymaps.geocode("г.Москва, Химкинский бульвар, д.5").then(function (res) < var coord = res.geoObjects.get(0).geometry.getCoordinates(); var myPlacemark = new ymaps.Placemark(coord, null, < preset: 'islands#blueDotIcon' >); myMap.geoObjects.add(myPlacemark); >);

Цвета меток

islands#blueDotIcon	islands#darkGreenDotIcon
islands#redDotIcon	islands#violetDotIcon
islands#darkOrangeDotIcon	islands#blackDotIcon
islands#nightDotIcon	islands#yellowDotIcon
islands#darkBlueDotIcon	islands#greenDotIcon
islands#pinkDotIcon	islands#orangeDotIcon
islands#grayDotIcon	islands#lightBlueDotIcon
islands#brownDotIcon	islands#oliveDotIcon

Круглая метка с точкой

По координатам

var myPlacemark = new ymaps.Placemark([55.86,37.59], null, < preset: 'islands#greenCircleDotIcon' >); myMap.geoObjects.add(myPlacemark);

По адресу

ymaps.geocode("г.Москва, Каргопольская, д.18").then(function (res) < var coord = res.geoObjects.get(0).geometry.getCoordinates(); var myPlacemark = new ymaps.Placemark(coord, null, < preset: 'islands#greenCircleDotIcon' >); myMap.geoObjects.add(myPlacemark); >);

Цвета меток

islands#blueCircleDotIcon	islands#darkGreenCircleDotIcon
islands#redCircleDotIcon	islands#violetCircleDotIcon
islands#darkOrangeCircleDotIcon	islands#blackCircleDotIcon
islands#nightCircleDotIcon	islands#yellowCircleDotIcon
islands#darkBlueCircleDotIcon	islands#greenCircleDotIcon
islands#pinkCircleDotIcon	islands#orangeCircleDotIcon
islands#grayCircleDotIcon	islands#lightBlueCircleDotIcon
islands#brownCircleDotIcon	islands#oliveCircleDotIcon

Метка с нумерацией

По координатам

var myPlacemark = new ymaps.Placemark([55.85,37.7], < iconContent: '1' >, < preset: 'islands#redIcon' >); myMap.geoObjects.add(myPlacemark); 

По адресу

ymaps.geocode("г.Москва, Большой Лосиноостровский пруд").then(function (res) < var coord = res.geoObjects.get(0).geometry.getCoordinates(); var myPlacemark = new ymaps.Placemark(coord, < iconContent: '1' >, < preset: 'islands#redIcon' >); myMap.geoObjects.add(myPlacemark); >); 

Цвета меток:

islands#blueIcon	islands#darkGreenIcon
islands#redIcon	islands#violetIcon
islands#darkOrangeIcon	islands#blackIcon
islands#nightIcon	islands#yellowIcon
islands#darkBlueIcon	islands#greenIcon
islands#pinkIcon	islands#orangeIcon
islands#grayIcon	islands#lightBlueIcon
islands#brownIcon	islands#oliveIcon

Круглые метки с нумерацией:

islands#blueCircleIcon	islands#darkGreenCircleIcon
islands#redCircleIcon	islands#violetCircleIcon
islands#darkOrangeCircleIcon	islands#blackCircleIcon
islands#nightCircleIcon	islands#yellowCircleIcon
islands#darkBlueCircleIcon	islands#greenCircleIcon
islands#pinkCircleIcon	islands#orangeCircleIcon
islands#grayCircleIcon	islands#lightBlueCircleIcon
islands#brownCircleIcon	islands#oliveCircleIcon

Метка с текстом

В данном варианте метка тянется по длине текста, переносы строк не поддерживаются.

По координатам

var myPlacemark = new ymaps.Placemark([55.75,37.45], < iconContent: 'текст' >, < preset: 'islands#darkOrangeStretchyIcon' >); myMap.geoObjects.add(myPlacemark); 

По адресу

ymaps.geocode("г.Москва, Нижние Мневники").then(function (res) < var coord = res.geoObjects.get(0).geometry.getCoordinates(); var myPlacemark = new ymaps.Placemark(coord, < iconContent: 'текст' >, < preset: 'islands#darkOrangeStretchyIcon' >); myMap.geoObjects.add(myPlacemark); >);

Цвета меток:

islands#blueStretchyIcon	islands#darkGreenStretchyIcon
islands#redStretchyIcon	islands#violetStretchyIcon
islands#darkOrangeStretchyIcon	islands#blackStretchyIcon
islands#nightStretchyIcon	islands#yellowStretchyIcon
islands#darkBlueStretchyIcon	islands#greenStretchyIcon
islands#pinkStretchyIcon	islands#orangeStretchyIcon
islands#grayStretchyIcon	islands#lightBlueStretchyIcon
islands#brownStretchyIcon	islands#oliveStretchyIcon

Метка с подсказкой

По координатам

var myPlacemark = new ymaps.Placemark([55.75,37.59], < iconCaption: 'подсказка' >, < preset: 'islands#pinkDotIcon' >); myMap.geoObjects.add(myPlacemark); 

По адресу

ymaps.geocode("г.Москва, Большой Николаевский пер.").then(function (res) < var coord = res.geoObjects.get(0).geometry.getCoordinates(); var myPlacemark = new ymaps.Placemark(coord, < iconCaption: 'подсказка' >, < preset: 'islands#pinkDotIcon' >); myMap.geoObjects.add(myPlacemark); >); 

Цвета как у меток с точкой.

Метка со своей картинкой

В место метки можно использовать свою картинку, для этого заполняются следующие параметры:

iconLayout	Значение default#image или default#imageWithContent
iconImageHref	URL файла
iconImageSize	Ширина и высота изображения
iconImageOffset	Сдвиг изображения
iconContentOffset	Сдвиг изображения для меток с текстом

Подробнее в документации на tech.yandex.ru

По координатам

var myPlacemark = new ymaps.Placemark([55.75,37.75], null,< iconLayout: 'default#image', iconImageHref: "/map.png", iconImageSize: [30, 44], iconImageOffset: [-15, -44] >); myMap.geoObjects.add(myPlacemark);

По адресу

ymaps.geocode("г.Москва, ш.Энтузиастов").then(function (res) < var coord = res.geoObjects.get(0).geometry.getCoordinates(); var myPlacemark = new ymaps.Placemark(coord, null,< iconLayout: 'default#image', iconImageHref: "/map.png", iconImageSize: [30, 44], iconImageOffset: [-15, -44] >); myMap.geoObjects.add(myPlacemark); >); 

Балуны

По координатам

var myPlacemark = new ymaps.Placemark([55.65,37.5], < balloonContentHeader: "Заголовок", balloonContentBody: "Содержимое", balloonContentFooter: "Подвал", hintContent: "Подсказка" >, < preset: 'islands#yellowDotIcon' >); myMap.geoObjects.add(myPlacemark);

По адресу

ymaps.geocode("г.Москва, ул.Миклухо-Маклая").then(function (res) < var coord = res.geoObjects.get(0).geometry.getCoordinates(); var myPlacemark = new ymaps.Placemark(coord, < balloonContentHeader: "Заголовок", balloonContentBody: "Содержимое", balloonContentFooter: "Подвал", hintContent: "Подсказка" >, < preset: 'islands#yellowDotIcon' >); myMap.geoObjects.add(myPlacemark); >); 

Балун без метки

По координатам

myMap.balloon.open([55.65,37.7], "Содержимое балуна", < closeButton: false >);

По адресу

ymaps.geocode("г.Москва, ул.Шоссейная, д.5").then(function (res) < var coord = res.geoObjects.get(0).geometry.getCoordinates(); myMap.balloon.open(coord, "Содержимое балуна", < closeButton: false >); >); 

Примеры

1. Метка по адресу со своей иконкой и балуном, карта центрируется по метке.

2. Вывод меток в разных стилях.

Источник

[Примеры] Яндекс.Карты API (Yandex.Maps API)

if ( myMap . getZoom ( ) > 15 ) myMap . setZoom ( 15 ) ; // Если значение zoom превышает 15, то устанавливаем 15.

5. Добавление и переключение нескольких коллекций меток

if ( myMap . getZoom ( ) > 15 ) myMap . setZoom ( 15 ) ; // Если значение zoom превышает 15, то устанавливаем 15.

6. Определение местоположения пользователя

7. Как изменить цветовую палитру Яндекс.Карты

type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/>#grayscale» ) ; /* Firefox 3.5+ */

8. Как получить координаты объекта на PHP

if ( ! $geocode = @ file_get_contents ( ‘http://geocode-maps.yandex.ru/1.x/?geocode=’ . urlencode ( $address ) ) )

$result = $xml -> xpath ( ‘/ymaps:ymaps/ymaps:GeoObjectCollection/gml:featureMember/ymaps:GeoObject/gml:Point/gml:pos’ ) ;

9. Как отключить scrollZoom на Яндекс.Карте

10. Как удалить все элементы управления на Яндекс.Карте

11. Создание выпадающей панели с поисковыми подсказками адресов

offset : [ — 2 , 3 ] , // Отступы панели подсказок от её положения по умолчанию. Задаётся в виде смещений по горизонтали и вертикали относительно левого нижнего угла элемента input.

Если необходимо реализовать поиск и автодополнение только по базе адресов России, рекомендую использовать сервис «КЛАДР в облаке» — функционал и возможности у него шире, чем у Яндекс.Карт (примеры | jQuery плагин) либо сервис DaData.

Источник