Добавление метки на карту

Войти

Экспорт

Сохранить как файлыЭкспорт на JSFiddle

ready, Map, GeoObject, Placemark, map.GeoObjects

Метка может быть создана двумя способами: с помощью класса GeoObject с указанным типом геометрии "точка" либо с помощью вспомогательного класса Placemark.

При создании метки нужно указать координаты соответствущей точки. Также метке можно задать её свойства (например, текст значка) и опции (например, изображение значка).

Метки можно объединять в коллекции, а также кластеры (см. примеры Коллекции геообъектов и Кластер метки).

\n\n","placemark.js":"ymaps.ready(init);\n\nfunction init() {\n var myMap = new ymaps.Map(\"map\", {\n center: [55.76, 37.64],\n zoom: 10\n }, {\n searchControlProvider: 'yandex#search'\n }),\n\n // Создаем геообъект с типом геометрии \"Точка\".\n myGeoObject = new ymaps.GeoObject({\n // Описание геометрии.\n geometry: {\n type: \"Point\",\n coordinates: [55.8, 37.8]\n },\n // Свойства.\n properties: {\n // Контент метки.\n iconContent: 'Я тащусь',\n hintContent: 'Ну давай уже тащи'\n }\n }, {\n // Опции.\n // Иконка метки будет растягиваться под размер ее содержимого.\n preset: 'islands#blackStretchyIcon',\n // Метку можно перемещать.\n draggable: true\n }),\n myPieChart = new ymaps.Placemark([\n 55.847, 37.6\n ], {\n // Данные для построения диаграммы.\n data: [\n {weight: 8, color: '#0E4779'},\n {weight: 6, color: '#1E98FF'},\n {weight: 4, color: '#82CDFF'}\n ],\n iconCaption: \"Диаграмма\"\n }, {\n // Зададим произвольный макет метки.\n iconLayout: 'default#pieChart',\n // Радиус диаграммы в пикселях.\n iconPieChartRadius: 30,\n // Радиус центральной части макета.\n iconPieChartCoreRadius: 10,\n // Стиль заливки центральной части.\n iconPieChartCoreFillStyle: '#ffffff',\n // Cтиль линий-разделителей секторов и внешней обводки диаграммы.\n iconPieChartStrokeStyle: '#ffffff',\n // Ширина линий-разделителей секторов и внешней обводки диаграммы.\n iconPieChartStrokeWidth: 3,\n // Максимальная ширина подписи метки.\n iconPieChartCaptionMaxWidth: 200\n });\n\n myMap.geoObjects\n .add(myGeoObject)\n .add(myPieChart)\n .add(new ymaps.Placemark([55.684758, 37.738521], {\n balloonContent: 'цвет воды пляжа бонди'\n }, {\n preset: 'islands#icon',\n iconColor: '#0095b6'\n }))\n .add(new ymaps.Placemark([55.833436, 37.715175], {\n balloonContent: 'серобуромалиновый цвет'\n }, {\n preset: 'islands#dotIcon',\n iconColor: '#735184'\n }))\n .add(new ymaps.Placemark([55.687086, 37.529789], {\n balloonContent: 'цвет влюбленной жабы'\n }, {\n preset: 'islands#circleIcon',\n iconColor: '#3caa3c'\n }))\n .add(new ymaps.Placemark([55.782392, 37.614924], {\n balloonContent: 'цвет детской неожиданности'\n }, {\n preset: 'islands#circleDotIcon',\n iconColor: 'yellow'\n }))\n .add(new ymaps.Placemark([55.642063, 37.656123], {\n balloonContent: 'цвет красный'\n }, {\n preset: 'islands#redSportIcon'\n }))\n .add(new ymaps.Placemark([55.826479, 37.487208], {\n balloonContent: 'цвет фэйсбука'\n }, {\n preset: 'islands#governmentCircleIcon',\n iconColor: '#3b5998'\n }))\n .add(new ymaps.Placemark([55.694843, 37.435023], {\n balloonContent: 'цвет носика Гены',\n iconCaption: 'Очень длиннный, но невероятно интересный текст'\n }, {\n preset: 'islands#greenDotIconWithCaption'\n }))\n .add(new ymaps.Placemark([55.790139, 37.814052], {\n balloonContent: 'цвет голубой',\n iconCaption: 'Очень длиннный, но невероятно интересный текст'\n }, {\n preset: 'islands#blueCircleDotIconWithCaption',\n iconCaptionMaxWidth: '50'\n }));\n}\n"},"resources":[],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/placemark/"}placemark.htmlplacemark.js

Пишете на JavaScript? У нас есть вакансии