Как найти управление увеличением буклета в нужном месте

Я хочу поместить элемент управления увеличением в середине справа от карты, то есть в середине правой стороны карты. Я нашел решение поместить управление масштабированием в разные углы, используя следующий код

var map = new L.map("map-container",{ zoomControl: false });

   new L.Control.Zoom({ position: 'topleft' }).addTo(map);

Таким образом, позиции могут быть

topleft
topright
bottomleft
bottomright

Но моя цель - поставить окно управления в середине справа. Или даже я поставил элемент управления в углу, я хочу добавить некоторый запас к вершине. Как я могу это сделать? Есть ли идея?

Ответ 1

По умолчанию мы можем создать дополнительные местозаполнители элемента управления, помимо 4-х предусмотренных углов.

Приятным преимуществом является то, что он позволяет поместить несколько элементов управления в один из этих заполнителей. Они будут складываться без наложения, как в стандартных углах.

JavaScript:

// Create additional Control placeholders
function addControlPlaceholders(map) {
    var corners = map._controlCorners,
        l = 'leaflet-',
        container = map._controlContainer;

    function createCorner(vSide, hSide) {
        var className = l + vSide + ' ' + l + hSide;

        corners[vSide + hSide] = L.DomUtil.create('div', className, container);
    }

    createCorner('verticalcenter', 'left');
    createCorner('verticalcenter', 'right');
}
addControlPlaceholders(map);

// Change the position of the Zoom Control to a newly created placeholder.
map.zoomControl.setPosition('verticalcenterright');

// You can also put other controls in the same placeholder.
L.control.scale({position: 'verticalcenterright'}).addTo(map);

Тогда становится легко стилизовать эти заполнители с помощью CSS, потому что их родитель DOM - это сам контейнер карты. Следовательно, top, bottom, left и right могут быть указаны с процентами (которые используют родительские измерения).

CSS:

.leaflet-verticalcenter {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    top: 50%; /* possible because the placeholder parent is the map */
    transform: translateY(-50%); /* using the CSS3 Transform technique */
    padding-top: 10px;
}

.leaflet-verticalcenter .leaflet-control {
    margin-bottom: 10px;
}

Что касается вертикального центрирования самого заполнителя, вы можете использовать свою любимую технику. Здесь я использовал CSS3 Transform, чтобы сместить заполнитель на половину его высоты.

При необходимости (например, для совместимости со старыми браузерами) вы можете использовать метод "вычислить под нагрузкой" для выполнения этого смещения, аналогично ответу iH8. Но вам больше не нужно запускать его при изменении размера карты, только при добавлении новых элементов управления в заполнитель.

Демонстрационная версия: https://plnkr.co/edit/bHJwfm598d1Ps7MpLG0k?p=preview

Примечание: в настоящее время для этого существует открытый PR (Leaflet/Leaflet # 5554), но, поскольку он несовместим со старыми версиями Internet Explorer, он вряд ли будет объединен с ядром Leaflet.

Ответ 2

Возьмите высоту контейнера карты, разделите на два. Вычтите высоту контейнера зума, разделенную на два. Используйте абсолютное позиционирование и назначьте верхнюю позицию:

var mapHalfHeight = map.getSize().y / 2,
    container = map.zoomControl.getContainer(),
    containerHalfHeight = parseInt(container.offsetHeight / 2),
    containerTop = mapHalfHeight - containerHalfHeight + 'px';

container.style.position = 'absolute';
container.style.top = containerTop;

Пример на Плункер: http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

Обратите внимание, что когда вы не используете контейнер карты фиксированного размера, вам придется делать это каждый раз, когда размер контейнера карты изменяется. Добавьте его в метод и подключите к событию изменения размера карты, как в приведенном примере.

Ответ 3

Это можно сделать чуть проще, с одной строкой CSS. Работает с адаптивным дизайном (Bootstrap) и добавляет дополнительные кнопки с помощью Leaflet.EasyButton.

.leaflet-control-container { position: absolute; right: 56px }

Ответ 4

Если ваша карта не сложная, самый простой способ - использовать CSS.

В вашем случае вы можете просто добавить следующий CSS:

.leaflet-top {
bottom: 0;
}

.leaflet-top .leaflet-control-zoom {
top:50%;
transform: translateY(-50%);
}

Ответ 5

Самый простой и точный

var map = L.map('map', {
    maxZoom: 20,
    minZoom: 6,
    zoomControl: false
});

L.control.zoom({
    position: 'bottomright'
}).addTo(map);