Как сделать группировку меток yandex map API

175
21 октября 2018, 16:40

Наткнулся на этот пост Группировка меток на карте но на практике выкидывает не понятные ошибке http://dten.pokt.store/project.php - это ссылка на сайт

А вот код самого API

ymaps.ready(init); 
       
        function init(){  
					var myMap = new ymaps.Map("map", { 
							center: [48.480223, 135.071917], 
							zoom: 5, 
						 	controls: [] 
 
					});  
					myPlacemark = new ymaps.Placemark([48.480223, 135.071917], { 
            // Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства. 
            balloonContentBody: "<div class='ballon-body'><div class='ballon-ttl'>ОАО “Аквапарк Хабаровск”</div><div class='ballon-more' data-more='0'>Подробнее</div><div class='ballon-img'><img src='static/imgs/ballon-img.png'></div></div>", 
						 
        	}, { 
            // Опции. 
						hideIconOnBalloonOpen:false, 
            // Необходимо указать данный тип макета. 
            iconLayout: 'default#image', 
            // Своё изображение иконки метки. 
            iconImageHref: 'static/imgs/placeholder.png', 
            // Размеры метки. 
            iconImageSize: [50, 64], 
            // Смещение левого верхнего угла иконки относительно 
            // её "ножки" (точки привязки). 
            iconImageOffset: [-5, -38] 
        }); 
				myPlacemark2 = new ymaps.Placemark([50.480223, 135.143917], { 
					// Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства. 
					balloonContentBody: "<div class='ballon-body'><div class='ballon-ttl'>ОАО “Аквапарк Хабаровск 2 ”</div><div class='ballon-more' data-more='1'>Подробнее</div><div class='ballon-img'><img src='static/imgs/ballon-img.png'></div></div>", 
				}, { 
					// Опции. 
					// Необходимо указать данный тип макета. 
					iconLayout: 'default#image', 
					// Своё изображение иконки метки. 
					iconImageHref: 'static/imgs/placeholder.png', 
					// Размеры метки. 
					iconImageSize: [50, 64], 
					// Смещение левого верхнего угла иконки относительно 
					// её "ножки" (точки привязки). 
					iconImageOffset: [-5, -38], 
					hideIconOnBalloonOpen:false 
			}); 
				myPlacemark3 = new ymaps.Placemark([48.498223, 138.071917], { 
					// Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства. 
					balloonContentBody: "<div class='ballon-body'><div class='ballon-ttl'>ОАО “Аквапарк Хабаровск 3”</div><div class='ballon-more' data-more='2'>Подробнее</div><div class='ballon-img'><img src='static/imgs/ballon-img.png'></div></div>", 
				}, { 
					// Опции. 
					// Необходимо указать данный тип макета.' 
					hideIconOnBalloonOpen:false, 
					iconLayout: 'default#image', 
					// Своё изображение иконки метки. 
					iconImageHref: 'static/imgs/placeholder.png', 
					// Размеры метки. 
					iconImageSize: [50, 64], 
					// Смещение левого верхнего угла иконки относительно 
					// её "ножки" (точки привязки). 
					iconImageOffset: [-5, -38] 
			}); 
					myGeoObjects = [myPlacemark,myPlacemark2,myPlacemark3]; 
					clusterer = new ymaps.Clusterer(); 
					clusterer.add(myGeoObjects); 
					myMap.geoObjects.add(clusterer); 
					  
					var clusterIcons=[{ 
					href:'static/imgs/placeholder.png', 
					size:[53,52], 
					offset:[0,0] 
					}], 
					clusterNumbers=[100], 
					clusterer = new ymaps.Clusterer({ 
					margin:[20], 
					clusterIcons:clusterIcons, 
					clusterDisableClickZoom: true, 
					clusterNumbers:clusterNumbers 
					}); 
					myMap.behaviors.enable('multiTouch'); 
					myMap.controls.add('zoomControl'); 
 
					myMap.behaviors.enable('drag'); 
    			myMap.geoObjects.add(myPlacemark); 
    			myMap.geoObjects.add(myPlacemark2); 
    			myMap.geoObjects.add(myPlacemark3); 
 
					myMap.panes.get('ground').getElement().style.filter = 'grayscale(100%) brightness(40%)'; 
 
        }

Answer 1

Если вы добавили метки в кластеризатор, то не нужно добавлять их отдельно на карту. Удалите:

            myMap.geoObjects.add(myPlacemark);
            myMap.geoObjects.add(myPlacemark2);
            myMap.geoObjects.add(myPlacemark3);
READ ALSO
Слайдер работает когда хочет

Слайдер работает когда хочет

Есть сайт, в нем в popup находится слайдер SwiperПроблема в том, что слайдер работает через раз, когда захочет

167
Регулярка на js для HH:MM время от 00:00 до 23:59

Регулярка на js для HH:MM время от 00:00 до 23:59

Регулярка на js для HH:MM время от 00:00 до 23:59

162
Чтение txt из интернета

Чтение txt из интернета

Как прочитать txt файл из интернета и записать его содержимое в переменную на nodejs

155
Правильно ли я написал логику запроса?

Правильно ли я написал логику запроса?

Получилось так что Аякс запрос внутри функции взятия геолокацииТак можно или это моветон? (Не смог придумать наоборот)

165