как создать отступ по краю карты Google

Question

У меня есть очень загруженное приложение Google Maps, которое я создал, и я пытаюсь создать «буферную зону» вокруг внешнего края карты, чтобы команды Google Map не помещали туда что-либо. Моим решением было создать невидимые элементы div и добавить их на карту в качестве элементов управления, по одному для каждого из ребер. Кажется, это работает отлично, так как все команды Google видят их и корректируют соответствующим образом, и карта выглядит нормально. Например, fitBounds гарантирует, что мои границы не находятся под невидимыми слоями. Для верхней части, где у меня есть панель управления, это идеальное решение, но для других краев, где нет ничего, это создает проблему - я не могу щелкнуть карту или информационные окна под этими элементами управления, так как они принимают событие click.

Итак, я ищу одно из 2 решений: 1) могу ли я заставить свои невидимые элементы управления передавать клики на карту, или; 2) есть ли лучший способ дополнить края карты; что-то, что не требует большого количества математики каждый раз, когда я хочу вызвать fitBounds или panTo, будет предпочтительным, так как я автоматизирую большую часть движения карты

Приветствия

Answer 1

Мне удалось решить это.

Лучший способ добавить отступы к вашим картам - использовать невидимые элементы управления. Он создает отступы, которым подчиняются все другие функции карты без какого-либо дополнительного кодирования при вызове их. Вот как это сделать для всех, кому это нужно. Во-первых .. Я создаю функцию, чтобы упростить создание div.

function createDummyDiv(w, h){
    var out = $(document.createElement('div')).addClass('dummy-div').css('width', w).css('height', h);
    return out[0];
}

Затем я добавляю элементы управления по мере необходимости. В этом случае у меня есть обычное управление масштабированием в положении LEFT_CENTER, поэтому мне пришлось создать 2 для левой стороны. Это создает отступ в 10% слева, справа и снизу и отступ в 55 пикселей сверху под моей собственной панелью управления.

map.controls[google.maps.ControlPosition.TOP_CENTER].push(createDummyDiv('100%', '55px'));
map.controls[google.maps.ControlPosition.LEFT_TOP].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(createDummyDiv('10%', '100%'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(createDummyDiv('100%', '10%'));

Последнее решение моей проблемы - поместить их за слой карты с помощью css.

.dummy-div{ z-index: -100 !important; }

Надеюсь, это поможет кому-то еще

Answer 2

Попробуйте дать невидимому DIV отрицательный z-индекс, например, -10 * * тысяча одна

Answer 3

Для меня fitBounds api работал со вторым параметром (заполнение)

Добавление отступов в границы карты Google