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"
	} 
} 

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