яндекс-карты: кластеры и полет к маркеру

<script src="//api-maps.yandex.ru/2.1/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

<script type="text/javascript">

    ymaps.ready(function () {
        var myMap = new ymaps.Map('objects_map', {
                center: [55.62437, 37.714321],
                zoom: 9,
                behaviors: ['default', 'scrollZoom']
            }),
            myGeoObjects = [];

        myGeoObjects[0] = new ymaps.Placemark([55.123456, 37.123456], {
            name: 'name1',
            balloonContent: 'название маркера 1'
        }, {
            iconLayout: 'default#image',
            iconImageHref: '/images/marker.png',
            iconImageSize: [32, 32]
        });

        myGeoObjects[1] = new ymaps.Placemark([55.654321, 37.654321], {
            name: 'name2',
            balloonContent: 'название маркера 2'
        }, {
            iconLayout: 'default#image',
            iconImageHref: '/images/marker.png',
            iconImageSize: [32, 32]
        });

        var customItemContentLayout = ymaps.templateLayoutFactory.createClass(
            '{{ properties.balloonContent|raw }}'
        );

        var myClusterer = new ymaps.Clusterer({
            clusterDisableClickZoom: false,
            clusterOpenBalloonOnClick: true,
            clusterHideIconOnBalloonOpen: false,
            clusterBalloonContentLayout: 'cluster#balloonCarousel',
            clusterBalloonItemContentLayout: customItemContentLayout,
            clusterBalloonPanelMaxMapArea: 0,
            clusterBalloonContentLayoutWidth: 250,
            clusterBalloonContentLayoutHeight: 235,
            clusterBalloonPagerSize: 5
        });

        myClusterer.options.set({
            gridSize: 50
        });
        myClusterer.add(myGeoObjects);
        myMap.geoObjects.add(myClusterer);
        myMap.setBounds(myClusterer.getBounds(), {
            checkZoomRange: true
        });

        if (window.location.hash != '') {
            var hash = window.location.hash.substr(1);
            if (window.location.hash != '') {
                var hash = window.location.hash.substr(1);
                pm = ymaps.geoQuery(myGeoObjects).search('properties.name == "' + hash + '"');
                pn = pm.getCenter(myMap);
                myMap.setCenter(pn);
                pm.getCentralObject(myMap).balloon.open();
            }
        }

        ids = {
            '0': [55.987654, 37.987654],
            '1': [55.654321, 37.654321]
        };

        function to_marker() {

            var id = this.getAttribute("data-rel");

            myMap.panTo(ids[id]).then(function () {
                myMap.setZoom(17, {smooth: true});
                myGeoObjects[id].balloon.open();
            });


            return false;
        }

        var a = document.getElementsByClassName('to_marker');
        for (var i = 0, n = a.length; i < n; ++i) {
            a[i].onclick = to_marker;
        }

    });

</script>

<div id="map">
    <div class="left">
        <ul>
            <li>
                <a class="to_marker" data-rel="0">адрес 1</a>
            </li>
            <li>
                <h3 class="to_marker" data-rel="1">адрес 2</h3>
            </li>
        </ul>
    </div>
    <div class="right">
        <div id="objects_map"></div>
    </div>
</div>



Подписаться на рассылку новостей сайта через FeedBurner:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *