Создаем архитектуру
<div id="map" style="width:100%;height:350px"></div>
Подключаем Yandex API
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
Создаем функцию init в соответствии с API Yandex карт
ymaps.ready(init);
function init () {
var center=[56.83793996883943,60.542601684875436];
var myMap = new ymaps.Map('map', {
center: center,
zoom: 5
}, {
searchControlProvider: 'yandex#search'
}),
objectManager = new ymaps.ObjectManager({
clusterize: true,
gridSize: 32
});
objectManager.objects.options.set('preset', 'islands#greenDotIcon');
objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
myMap.geoObjects.add(objectManager);
objectManager.add({
"type": "FeatureCollection",
"features": [
/* Feature*/
]
});
}
Генерируем метки в соответствие со следующем кодом и заменяем /* Feature*/
{
"type": "Feature",
"id": /* Порядковый номер */,
"geometry":{
"type": "Point",
"coordinates":/* Координаты метки в формате [x,y] */
},
"properties":{
"balloonContent": "/* Текст балуна */",
"clusterCaption": "/* Заголовок метки */",
"hintContent": "/* Подсказка метки */"
}
},
координаты центра карты и каждой метки можно найти здесь
Пример кода двух меток, осталось заменить /* Feature*/ на этот код в функции init
{
"type": "Feature",
"id": 1,
"geometry":{
"type": "Point",
"coordinates":[56.83793996883943,60.542601684875436]
},
"properties":{
"balloonContent": "Я метки 1",
"clusterCaption": "Метка 1",
"hintContent": "Я подсказка для метки 1"
}
},{
"type": "Feature",
"id": 2,
"geometry":{
"type": "Point",
"coordinates":[56.83793996883943,60.542601684875436]
},
"properties":{
"balloonContent": "Я метки 2",
"clusterCaption": "Метка 2",
"hintContent": "Я подсказка для метки 2"
}
}
Пример: пример