Добрый день!
Имеется скрипт с выводом карты с кластеризацией. Все корректно выводится и работает. Но если добавить еще одну карту на эту страницу, то первая отрабатывает отлично, а у второй не корректно отображается позиционирование, чтобы на ней были ведны все объекты. Как разрешить данную проблему?
<script type="text/javascript">
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.76, 37.64],
zoom: 10
}, {
searchControlProvider: 'yandex#search'
}),
/**
* Создадим кластеризатор, вызвав функцию-конструктор.
* Список всех опций доступен в документации.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary
*/
clusterer = new ymaps.Clusterer({
/**
* Через кластеризатор можно указать только стили кластеров,
* стили для меток нужно назначать каждой метке отдельно.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml
*/
preset: 'islands#invertedDarkGreenClusterIcons',
/**
* Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
*/
groupByCoordinates: false,
/**
* Опции кластеров указываем в кластеризаторе с префиксом "cluster".
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark.xml
*/
clusterDisableClickZoom: true,
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false
}),
/**
* Функция возвращает объект, содержащий данные метки.
* Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
* Поле balloonContentBody - источник данных для контента балуна.
* Оба поля поддерживают HTML-разметку.
* Список полей данных, которые используют стандартные макеты содержимого иконки метки
* и балуна геообъектов, можно посмотреть в документации.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointData = function (index1, index2, index3, index4, index5) {
return {
balloonContentBody: 'Название: <a href="site/service?id=' + index1 + '">' + index2 + '</a><br>' + 'Адрес: ' + index3 + '<br>' + 'Категория: ' + index4 + '<br>' + 'Цена: ' + index5,
clusterCaption: '<strong>' + index2 + '</strong>'
};
},
/**
* Функция возвращает объект, содержащий опции метки.
* Все опции, которые поддерживают геообъекты, можно посмотреть в документации.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointOptions = function () {
return {
preset: 'islands#darkGreenIcon'
};
},
geoObjects = [];
/**
* Данные передаются вторым параметром в конструктор метки, опции - третьим.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark.xml#constructor-summary
*/
<?php
foreach($query as $k => $service):
?>
geoObjects[<?=$k?>] = new ymaps.Placemark([<?=$service->geometry?>], getPointData('<?=addslashes($service->id)?>', '<?=addslashes($service->name)?>', '<?=addslashes($service->address)?>', '<?=addslashes(Service::$categoryService[$service->category])?>', '<?=addslashes($service->price)?>'), getPointOptions());
<?php endforeach; ?>
/**
* Можно менять опции кластеризатора после создания.
*/
clusterer.options.set({
gridSize: 80,
clusterDisableClickZoom: true
});
/**
* В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
* @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#add
*/
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
/**
* Спозиционируем карту так, чтобы на ней были видны все объекты.
*/
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true
});
});
</script>
