Как отключить перетаскивание/прокрутку улиц Google

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

источник

2014-01-15 Marco Marsala

API Google не предоставляет эту возможность, но мне удалось работать, поместив невидимый div поверх представления «Улица», не допуская при этом события, связанные с основным видом улиц. . Я создал тумблер кнопки «Drag Street View/Drag веба-страница) Кнопка может динамически отображать/скрывать Street управления представлением в соответствии с включенным/выключенным состоянием Просмотра улиц

Пример здесь:. http://www.genovaperte.it/item/antico-forno-ursida/ Пожалуйста, смотрите его из мобильное сенсорное устройство, потому что кнопка переключения требуется и показана в моем контексте только для мобильных устройств с сенсорным экраном. На настольных устройствах Street View всегда доступен для навигации по умолчанию, потому что нет проблем с этим.

Краткое описание кода (здесь используется jQuery и Modernizr):

CSS:

.draggable-street-view-toggle-button { cursor: pointer; background-color: #fff; border: solid 2px @firstThemeColor; z-index: 1000; position: absolute; right: 40px; padding: 10px; } /* the toggle button appearance. right = 40px to not overlap the close button */ 
.prevent-dragging { position: absolute; width: 100%; height: 400px; z-index: 999; } /* the hidden layer to prevent draggin events reach the underlying Street View */ 
#directory-main-bar.hide-gmnoprint .gmnoprint { display: none; } /* class dynamically added/removed to toggle controls */

HTML:

<div id="directory-main-bar"> 
... Here you have to initialize your Street view via Google API or with your preferred jQuery plugin like GMAP3 ... 
I recommend these options: defaultDisableUI = false, enableCloseButton : true, and zoomControl : Modernizr.touch ? false : true, 
</div>

JS:

function toggleStreetViewControls(state) { 
    mapDiv = $("#directory-main-bar"); 
    if(!state) { 
     $('<div class="prevent-dragging"></div>').height(400).insertBefore(mapDiv); /* 400 is the Street View height you've chosen when setupping it */ 
     mapDiv.addClass('hide-gmnoprint'); 
    } 
    else { 
     $('.prevent-dragging').remove(); 
     mapDiv.removeClass('hide-gmnoprint'); 
    } 
} 

if (Modernizr.touch){ 
    var swDraggableButton = $('<div class="draggable-street-view-toggle-button"></div>').insertBefore(mapDiv); 
    $('<div class="prevent-dragging"></div>').height({!$themeOptions->directoryMap->mapHeight}).insertBefore(mapDiv); 
     mapDiv.addClass('hide-gmnoprint'); 
    } 
    swDraggableButton.click(function() { 
      if($(this).hasClass('active')){ 
        $(this).removeClass('active').addClass('inactive').text({__ 'Drag web page'}); 
        toggleStreetViewControls(false); 
      } else { 
        $(this).removeClass('inactive').addClass('active').text({__ 'Drag Street view'}); 
        toggleStreetViewControls(true); 
      } 
    }); 
}

источник

2014-01-15 12:31:57

Как отключить перетаскивание/прокрутку улиц Google

ответ

Смежные вопросы