Клуб API Карт

масштабирование карты, в зависимости от наличия ГеоПоинтов

Пост в архиве.

Есть следующий код отображения на карте группы меток по клику на checkbox

 

<div class="map-block">
    <div class="map-box" id="YMapsID"></div>
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=APz9f04BAAAAiP7-IwIAYJ0COXyY4awE8WRypLdIC0yKD3AAAAAAAAAAAABa3k-tfMl7gp1zKvBuWXQ_nXRYeg==" type="text/javascript"></script>
    <script type="text/javascript">
        var map;
        function showAddress (value) {
            var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()}
            YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
                if (this.length()) {
                    geoResult = this.get(0);
                    map.addOverlay(geoResult);
                    map.setBounds(geoResult.getBounds()
                }
            }
        }
        function startmap() {
            map = new YMaps.Map(document.getElementById("YMapsID")
            map.addControl(new YMaps.TypeControl()
            map.addControl(new YMaps.Zoom()
            showAddress('[*coordinate*]');
        }
        startmap(
        var groups = new Array;
        var groupsimgs = new Array;
        function showgroup(gid) {
            var group = groups[gid];
            
            var s = new YMaps.Style(
            s.iconStyle = new YMaps.IconStyle(
            s.iconStyle.href = "/assets/images/map_bulits/"+groupsimgs[gid];
            s.iconStyle.size = new YMaps.Point(15, 15);
            s.iconStyle.offset = new YMaps.Point(-12, -25);
            
            for(var i in group) {
                var mvals = group[i].split(",");
                var placemark = new YMaps.Placemark(new YMaps.GeoPoint(mvals[0], mvals[1]), {style: s}
                map.addOverlay(placemark);
            }
            var bounds = new YMaps.GeoCollectionBounds(placemark);
            map.setCenter(bounds.getCenter(), bounds.getMapZoom(map)-1);
            return false;
        }
        function showgroups() {
            map.removeAllOverlays(
            showAddress('[*coordinate*]');
            if($('#group1').attr('checked') == 'checked') showgroup(1);
            if($('#group2').attr('checked') == 'checked') showgroup(2);
            if($('#group3').attr('checked') == 'checked') showgroup(3);
            if($('#group4').attr('checked') == 'checked') showgroup(4);
            if($('#group5').attr('checked') == 'checked') showgroup(5);
            if($('#group6').attr('checked') == 'checked') showgroup(6);
        }
    </script>
    <div class="checkbox">
    <h4 style="margin-bottom: 15px;">Условные обозначения</h4>
    <div class="line">
        <input id="group1" type="checkbox" onClick="showgroups();" />
        <img src="/assets/images/map_bulits/school_bul.png" alt="Школа" width="15" height="15"/>
        <span>Школа</span>
    </div>
    <script type="text/javascript">
        groups[1] = new Array;
        groupsimgs[1] = 'school_bul.png';
        groups[1].push('30.465873,59.911873');
        groups[1].push('30.464028,59.91392');
        groups[1].push('30.456346,59.912175');
    </script>
    <div class="line">
        <input id="group2" type="checkbox" onClick="showgroups();" />
        <img src="/assets/images/map_bulits/sk_bul.png" width="15" alt="Спортивный центр"/>
        <span>Спортивный центр</span>
    </div>
    <script type="text/javascript">
        groups[2] = new Array;
        groupsimgs[2] = 'sk_bul.png';
        groups[2].push('30.471281,59.91545');
        groups[2].push('30.462354,59.915968');
    </script>
    <div class="line">
        <input id="group3" type="checkbox" onClick="showgroups();" />
        <img src="/assets/images/map_bulits/shop_bul.png" alt="Магазин" width="15" height="15"/>
        <span>Магазин</span>
    </div>
    <script type="text/javascript">
        groups[3] = new Array;
        groupsimgs[3] = 'shop_bul.png';
        groups[3].push('30.459179,59.915968');
        groups[3].push('30.464243,59.919243');
    </script>
    <div class="line">
        <input id="group4" type="checkbox" onClick="showgroups();" />
        <img src="/assets/images/map_bulits/hospital_bul.png" alt="Больница" width="15" height="15"/>
        <span>Больница</span>
    </div>
    <script type="text/javascript">
        groups[4] = new Array;
        groupsimgs[4] = 'hospital_bul.png';
        groups[4].push('30.491708,59.925491');
    </script>
    <div class="line">
        <input id="group5" type="checkbox" onClick="showgroups();" />
        <img src="/assets/images/map_bulits/police_bul.png" alt="Полиция" width="15" height="15"/>
        <span>Полиция</span>
    </div>
    <script type="text/javascript">
        groups[5] = new Array;
        groupsimgs[5] = 'police_bul.png';
        groups[5].push('30.471367,59.915149');
    </script>
    <div class="line">
        <input id="group6" type="checkbox" onClick="showgroups();" />
        <img src="/assets/images/map_bulits/ds_bul.png" alt="Детский сад" width="15" height="15"/>
        <span>Детский сад</span>
    </div>
    <script type="text/javascript">
        groups[6] = new Array;
        groupsimgs[6] = 'icon_object_map06.png';
        groups[6].push('30.459179,59.919825');
        groups[6].push('30.456947,59.919544');
    </script>
    </div>
</div>

Как резльтат все прекрасно работает, но никак не могу реализовать масштабирование карты, так чтобы были видны все геопоинты, не зависимо от их количества.

все эксперименты с YMaps.GeoCollectionBounds не увенчались успехом, подскажите как можно реализовать данную функцию?

4 комментария
Александр Новиков
28 января 2016, 05:39
Вот знаете... что-то лень весь код анализировать с утра. Но есть один настораживающий момент... bounds и центр карты вы ставите после цикла и по последней точке...
А это уже изначально нелогично.

Основной принцип работы с груповыми bounds или же bounds для коллекций следующий:

1. Создали bounds
2. В цикле при создании точек добавляем их и в bounds
3. После цикла по собраному bounds позиционируем карту.

это понятно...но у меня момент в том что я проверяю check для каждой и группы и снова их отрисовываю...а как на это дело повесить чтобы все объекты попали в область отрисовки?

Александр Новиков
28 января 2016, 05:39
формировать дополнительно общую группы или коллекцию для всех точек и по ней центровать.

а в вашем коде меня даже центровка по элементам группы смущает, не говоря уже о центровке по всем объектам на карте.

 а в вашем коде меня даже центровка по элементам группы смущает, не говоря уже о центровке по всем объектам на карте.

 

а что именно?

 

а если при check как сейчас очистить слой, потом запустить цикл проверки check и при true отрисовывать группы, а bounds собирать и после цикла по нему сделать центровку?