Элегантный способ выровнять streetViewControl (pegman) с mapTypeControl на BOTTOM_RIGHT с Google Maps API? - PullRequest
Новая
       24

Элегантный способ выровнять streetViewControl (pegman) с mapTypeControl на BOTTOM_RIGHT с Google Maps API?

0 голосов
/ 07 ноября 2019

Как я могу выровнять кнопку streetViewControl (pegman), чтобы она была смежной / встроенной в mapTypeControl?

enter image description here

Это моя карта_Опции 

 var mapOptions = {        
        zoom: 19,   
        minZoom: 5, 
        noClear: false,
        panControl: false,
        scaleControl: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.VERTICAL_BAR,
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },    
        streetViewControl: true,
        streetViewControlOptions: {
            style: google.maps.MapTypeControlStyle.VERTICAL_BAR,
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        overviewMapControl: true,
        rotateControl: false,
        mapTypeId: google.maps.MapTypeId.HYBRID //ROADMAP, SATELLITE, HYBRID, TERRAIN
        ,controlSize: 30    
    };

Мне удалось сделать это действительно ужасно следующим образом. 

// move the streetViewControl(pegman) to the left of mapTypeControl in a very ugly way
google.maps.event.addListenerOnce(map, 'idle', function () {

    setTimeout(function () {            
        var mapTypeControlObj = $("div[title='Show street map']").closest('.gmnoprint');
        var streetViewPegmanObj = $('.gm-svpc'); 
        $(streetViewPegmanObj).appendTo(mapTypeControlObj);            
        streetViewPegmanObj.css("left", "-29px");
        mapTypeControlObj.css("bottom", "10px");
    }, 1000)

});

, что приводит к хорошему результату

good result

Но как только я увеличу или уменьшу масштаб, он подскочит следующим образом:

enter image description here

Что я компенсирую в слушателе "zoom_changed" следующим образом 

google.maps.event.addListener(map, 'zoom_changed', function () {
    usrMapEventZoomChanged();

    setTimeout(function () {
        $("div[title='Show street map']").closest('.gmnoprint').css("bottom", "10px");
    }, 500)

});

Но все же при увеличении / уменьшениинесколько раз вскакивает и затем исправляет себя.

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

1 Ответ

0 голосов
/ 08 ноября 2019

Согласно документации для streetViewControlOptions:

Идентификатор позиции. Используется для указания положения элемента управления на карте. Положение по умолчанию встроено в элементы навигации (масштабирование и панорамирование). Если эта позиция пуста или совпадает с той, которая указана в zoomControlOptions или panControlOptions, элемент управления Street View будет отображаться как часть элементов навигации. В противном случае он будет отображаться отдельно.

Другими словами, его нельзя сгруппировать с элементами управления, кроме масштабирования и / или панорамирования, и это включает в себя пользовательские элементы управления.

Такжеобратите внимание, что VERTICAL_BAR не является действительным MapTypeControlStyle.

...