Yandex карты с любым количеством меток

13 Июля 2016
javascript
  1. Создаем архитектуру

    <div id="map" style="width:100%;height:350px"></div>
    
    
  2. Подключаем Yandex API

    <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
    
    
  3. Создаем функцию 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*/
            ]
        });
    }
    
    
  4. Генерируем метки в соответствие со следующем кодом и заменяем /* 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"
	}
}

Пример: пример