Изменить положение информационного окна при увеличении / уменьшении карты Google - PullRequest
Новая
       13

Изменить положение информационного окна при увеличении / уменьшении карты Google

0 голосов
/ 27 сентября 2018

Я использую шикарный плагин Google Map на своем веб-сайте.Но существует проблема, заключающаяся в том, что информационное окно остается в том же положении, когда карта Google увеличивает / уменьшает масштаб.Как мы можем изменить положение информационного окна, зависит от карты Google?

1 Ответ

0 голосов
/ 27 сентября 2018

Вам нужно будет отследить положение при увеличении и вручную поместить окно.

Используйте это для обнаружения увеличения: 

  map.addListener('zoom_changed', function() {
    infowindow.setContent('Zoom: ' + map.getZoom());
  });

Затем получите элемент DOM и поменяйте его местами, как всегда.Если вы сделаете свой элемент DOM в фиксированной или абсолютной позиции, он не должен меняться.Если вы хотите сделать это с помощью Google Maps API.Вы можете использовать это: 

infobox = new InfoBox({
         content: document.getElementById("infobox"),
         disableAutoPan: false,
         maxWidth: 150,
         pixelOffset: new google.maps.Size(-140, -45),
         zIndex: null,
         boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') 0% 100% no-repeat",
            opacity: 0.75,
            width: "280px"
        },
        infoBoxClearance: new google.maps.Size(1, 1),
        alignBottom: true
    });

Инфобокс - это ваш элемент DOM, который будет принимать контент.alignBottom: делает так, чтобы он всегда прилипал к нижней части.

Если вы хотите настроить его положение при увеличении, используйте прослушиватель событий масштабирования, а затем поменяйте местами его смещения. 

var ib= new InfoBox({
    ....//other properties,
    pixelOffset: new google.maps.Size(-25, 0) //where your marker's height is 25px
});

Источники:

Fitbounds [Stackoverflow]

Положение Info Box [Stackoverflow]

...