Добавление метки на карту
Метка может быть создана двумя способами: с помощью класса GeoObject с указанным типом геометрии "точка" либо с помощью вспомогательного класса Placemark.
При создании метки нужно указать координаты соответствущей точки. Также метке можно задать её свойства (например, текст значка) и опции (например, изображение значка).
Метки можно объединять в коллекции, а также кластеры (см. пример Добавление метки с собственным изображением).
index.html
placemark.js
<!DOCTYPE html>
<html>
<head>
<title>Добавление метки на карту</title>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<!--
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<script
src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш API-ключ>"
type="text/javascript"
></script>
<script src="placemark.js" type="text/javascript"></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map(
"map",
{
center: [55.76, 37.64],
zoom: 10,
},
{
searchControlProvider: "yandex#search",
}
),
// Создаем геообъект с типом геометрии "Точка".
myGeoObject = new ymaps.GeoObject(
{
// Описание геометрии.
geometry: {
type: "Point",
coordinates: [55.8, 37.8],
},
// Свойства.
properties: {
// Контент метки.
iconContent: "Я тащусь",
hintContent: "Ну давай уже тащи",
},
},
{
// Опции.
// Иконка метки будет растягиваться под размер ее содержимого.
preset: "islands#blackStretchyIcon",
// Метку можно перемещать.
draggable: true,
}
),
myPieChart = new ymaps.Placemark(
[55.847, 37.6],
{
// Данные для построения диаграммы.
data: [
{ weight: 8, color: "#0E4779" },
{ weight: 6, color: "#1E98FF" },
{ weight: 4, color: "#82CDFF" },
],
iconCaption: "Диаграмма",
},
{
// Зададим произвольный макет метки.
iconLayout: "default#pieChart",
// Радиус диаграммы в пикселях.
iconPieChartRadius: 30,
// Радиус центральной части макета.
iconPieChartCoreRadius: 10,
// Стиль заливки центральной части.
iconPieChartCoreFillStyle: "#ffffff",
// Cтиль линий-разделителей секторов и внешней обводки диаграммы.
iconPieChartStrokeStyle: "#ffffff",
// Ширина линий-разделителей секторов и внешней обводки диаграммы.
iconPieChartStrokeWidth: 3,
// Максимальная ширина подписи метки.
iconPieChartCaptionMaxWidth: 200,
}
);
myMap.geoObjects
.add(myGeoObject)
.add(myPieChart)
.add(
new ymaps.Placemark(
[55.684758, 37.738521],
{
balloonContent:
"цвет <strong>воды пляжа бонди</strong>",
},
{
preset: "islands#icon",
iconColor: "#0095b6",
}
)
)
.add(
new ymaps.Placemark(
[55.833436, 37.715175],
{
balloonContent:
"<strong>серобуромалиновый</strong> цвет",
},
{
preset: "islands#dotIcon",
iconColor: "#735184",
}
)
)
.add(
new ymaps.Placemark(
[55.687086, 37.529789],
{
balloonContent: "цвет <strong>влюбленной жабы</strong>",
},
{
preset: "islands#circleIcon",
iconColor: "#3caa3c",
}
)
)
.add(
new ymaps.Placemark(
[55.782392, 37.614924],
{
balloonContent:
"цвет <strong>детской неожиданности</strong>",
},
{
preset: "islands#circleDotIcon",
iconColor: "yellow",
}
)
)
.add(
new ymaps.Placemark(
[55.642063, 37.656123],
{
balloonContent: "цвет <strong>красный</strong>",
},
{
preset: "islands#redSportIcon",
}
)
)
.add(
new ymaps.Placemark(
[55.826479, 37.487208],
{
balloonContent: "цвет <strong>фэйсбука</strong>",
},
{
preset: "islands#governmentCircleIcon",
iconColor: "#3b5998",
}
)
)
.add(
new ymaps.Placemark(
[55.694843, 37.435023],
{
balloonContent: "цвет <strong>носика Гены</strong>",
iconCaption:
"Очень длиннный, но невероятно интересный текст",
},
{
preset: "islands#greenDotIconWithCaption",
}
)
)
.add(
new ymaps.Placemark(
[55.790139, 37.814052],
{
balloonContent: "цвет <strong>голубой</strong>",
iconCaption:
"Очень длиннный, но невероятно интересный текст",
},
{
preset: "islands#blueCircleDotIconWithCaption",
iconCaptionMaxWidth: "50",
}
)
);
}