구글지도 스트리트 뷰 파노라마 스크롤 휠의 거짓은 여전히 ​​스크롤 휠을 여기에 구글 스트리트 뷰 문제의

Question

jsfiddle을 잡는다 그것을 할 때 StreetViewPanorama를 통해 페이지를 스크롤 할 수 있지만,이 예제는 일반지도를 드래그 할 수 있습니다처럼 스트리트 드래그 할 수 없습니다합니다 : https://jsfiddle.net/Ltjz44gg/3/

가 좋아, StreetViewPanorama를 Google지도에서이 스크롤 휠 문제로 싸우고있다을 전망. 기본지도와 StreetViewPanorama를 모두 사용하고 있습니다. 여기에 내 코드의 기초입니다 :

var theMapOptions = 
{ 
    backgroundColor  : "#B0C0C6", 
    zoom    : 16, 
    maxZoom    : 20, 
    minZoom    : 2, 
    disableDefaultUI : true, 
    center    : new google.maps.LatLng(Property.map['lat'], Property.map['lng']), 
    mapTypeId   : google.maps.MapTypeId.ROADMAP, 
    mapTypeControl  : false, 
    zoomControl   : true, 
    panControl   : true, 
    streetViewControl : true, 

    panControlOptions: { 
     position: google.maps.ControlPosition.TOP_LEFT 
    }, 

    zoomControlOptions: { 
     style : google.maps.ZoomControlStyle.LARGE, 
     position: google.maps.ControlPosition.TOP_LEFT 
    } 
}; 

var theStreetMapOptions = 
{ 
    position : new google.maps.LatLng(Property.map['lat'], Property.map['lng']), 
    pov: { 
     heading: 135, 
     pitch: -10 
    }, 
    scrollwheel: false, // If I remove this scrolling occurs in map, if I keep it the page is still not able to be scrolled, why? 
    motionTrackingControlOptions: { 
     position: google.maps.ControlPosition.LEFT_BOTTOM 
    } 
}; 

var theMap = new google.maps.Map(document.getElementById('mapID'), theMapOptions); 
// A custom styles json array (not included, since it's irrelevant) 
theMap.setOptions({styles: styles}); 


var theMapMarkerOptions = 
{ 
    map   : theMap, 
    position : new google.maps.LatLng(Property.map['lat'], Property.map['lng']), 
    draggable : false, 
    visible  : true 
} 

var theMapMarker = new google.maps.Marker(theMapMarkerOptions); 
theMapMarker.Map = theMap; 

theMapMarker.setMap(theMap); 

var theStreetMap = new google.maps.StreetViewPanorama(document.getElementById('map-street'), theStreetMapOptions); 
theMap.setStreetView(theStreetMap); 

이를 출력 할 때 그러나 스크롤 휠은 여전히 ​​잡은 내 마우스가 StreetViewPanorama를지도의 내부에있는 경우 더 이상 웹 페이지를 스크롤 할 수없는 생각되고있다. 그래서 여기에 또 다른 길을 걸어서 오버레이 div를 설정하여지도에서 기본 Google지도가 스크롤 할 때와 같은 방식으로 작동하도록하고 다음을 수행했습니다.

map-street의 컨테이너는 컨테이너입니다. StreetViewPanorama Map btw를 보유하고 있습니다.

HTML :

<div id="mapID" class="col-xs-24 col-md-12"></div> 
<div id="map-street" class="col-xs-24 col-md-12"><div class="block-scrolling fade"><p></p></div></div> 

이하 :

.transition (@transition) { 
    -webkit-transition: @transition; 
    -moz-transition: @transition; 
    -ms-transition:  @transition; 
    -o-transition:  @transition; 
} 

.block-scrolling { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,.3); 
    z-index: 2; 
    .transition(all .25s linear); 
    p { 
     position: relative; 
     text-align: center; 
     top: 50%; 
     transform: translateY(-50%); 
     color: white; 
     font-size: 26px; 
    } 
} 

JQuery와 :

이

// Need to simulate scroll over google map for StreetViewPanorama, so this code is needed! 
$(document).on('keydown keyup', function(e) { 
    var io = e.type == 'keydown' ? 0 : 1; 

    if ((e.ctrlKey || e.metaKey) && $('.block-scrolling').data('mouseover')) { 
     e.preventDefault(); 

     console.log($('.block-scrolling').data('mouseover')); 

     if (io === 0) 
      $('.block-scrolling').css({zIndex: -1}); 
     else 
      $('.block-scrolling').removeClass('in').css({zIndex: 2}); 

     return false; 
    } 
    else 
     $('.block-scrolling').css({zIndex: 2}); 

    return true; 
}); 


$(".block-scrolling").mouseenter(function() { 
    clearTimeout($(this).data('timeoutId')); 
    $(this).data('mouseover', true); 
}).mouseleave(function(){ 
    var scrollingElement = $(this), 
     timeoutId = setTimeout(function(){ 
      scrollingElement.data('mouseover', false); 
     }, 50); 
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over 
    scrollingElement.data('timeoutId', timeoutId); 
}); 

$(".block-scrolling").on('scroll wheel DOMMouseScroll mousewheel touchstart', function(e) { 

    var $this = $(this), 
     $text = e.type == 'touchstart' ? 'Use two fingers to move the map' : (e.type == 'wheel' ? 'Use ⌘ + scroll to zoom the map' : 'Use Ctrl + scroll to zoom the map'); 

    clearTimeout($.data(this, 'scrollTimer')); 
    $this.find('p').html($text); 
    $this.addClass('in'); 

    var scrollingElement = $(this); 

    if (e.type == 'touchstart') 
    { 
     if (e.hasOwnProperty('touches') && e.touches.length && e.touches.length > 1) 
      $this.css({zIndex: -1}); 
    } 

    $.data(this, 'scrollTimer', setTimeout(function() { 
     scrollingElement.removeClass('in'); 
    }, 2000)); 
}); 

JQuery와 코드는 구글지도가 기본지도를 제공 것과 매우 가까이 위로 스크롤 , 그러나, 기본 구글 맵 오버레이가 visibl 경우에도 (지도에) 드래그 수 있도록하는 것 같습니다 이자형. 이 부분은 다른 사람들의 jquery 마우스 이벤트보다 css 포인터 이벤트를 사용하지 않으면 작동하지 않기 때문에, 내 인생에서 볼 수 없습니다.

스크롤 휠 : false가 실제로 작동하고 스크롤 할 때 마우스가 해당 StreetViewPanorama Map 요소 (map-street)를 초과하면 웹 페이지가 여전히 스크롤되도록 허용하는 것이 좋습니다. scrollwheel: false을 전혀 필요로하지 않는 정상적인지도를 실제로 표시 할 때 Google지도가 실제로 작동했던 방식대로 작동하면 좋을 것입니다. 그러나 스크롤 휠이없는 경우 : 파노라마보기는 마우스를 해당보기의 스크롤에 잡습니다.

StreetViewPanorama에서 스크롤 휠을 사용 중지하고 스크롤 할 때 마우스를 잡지 않는 방법 (StreetView지도를 관리하는 동안) 지도 스트리트 뷰에 스크롤을 유지하지만 (여전히 페이지를 스크롤 할 수 있도록하면서)와 오버레이가 있습니까 Google지도 좋아해요,하지만 여전히 허용하는 방법

또는

정확한처럼 (드래그합니다 기본 Google지도가하는 것처럼)?

두 번째 질문에 대한 답변을 선호하지만 둘 중 하나를 수행합니다. StreetViewPanorama를 드래그하는 방법이 있다면 block-scrolling div 요소로 해결할 수도 있습니다 (StreetViewPanorama 옵션을 사용하여이 작업을 수행 할 방법이없는 경우).

Answer 1

코드가 변경되었습니다.
https://jsfiddle.net/Ltjz44gg/19/

StreetViewPanorama 제스처 핸디 옵션을 이해하지 못하고 mouseout을 수신 할 수 없습니다. 그래서 당신은 "이상한"해결책을 만들 수 있습니다. 이 같은

뭔가 :
업데이트 CSS :

* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.block-scrolling { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,.3); 
    z-index: 2; 
    -webkit-transition: (all .25s linear); 
    -moz-transition: (all .25s linear); 
    -ms-transition:  (all .25s linear); 
    -o-transition:  (all .25s linear); 
    opacity: 0; 
    pointer-events: none; 
} 
.block-scrolling.show{ 
    opacity: 1; 
} 
.block-scrolling.hide{ 
    opacity: 0; 
} 
.block-scrolling p { 
     position: relative; 
     text-align: center; 
     top: 50%; 
     transform: translateY(-50%); 
     color: white; 
     font-size: 26px; 
     -webkit-user-select: none; 
     -moz-user-select: none;  
     -ms-user-select: none;  
     user-select: none; 
    } 

div[class^='col'], div[class*=' col'] { 
    height: 300px; 
} 

.col-xs-24 { 
    float: left; 
    width: 100%; 
} 

@media (min-width: 992px) { 
    .col-md-12 { 
    float: left; 
    width: 50%; 
    } 
} 

업데이트 JS :

var theMapOptions = { 
    backgroundColor : "#B0C0C6", 
    zoom  : 16, 
    maxZoom  : 20, 
    minZoom  : 2, 
    disableDefaultUI : true, 
    center  : new google.maps.LatLng(37.869085, -122.254775), 
    mapTypeId  : google.maps.MapTypeId.ROADMAP, 
    mapTypeControl : false, 
    zoomControl  : true, 
    panControl  : true, 
    streetViewControl : true, 

    panControlOptions: { 
    position: google.maps.ControlPosition.TOP_LEFT 
    }, 

    zoomControlOptions: { 
    style : google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.TOP_LEFT 
    } 
}; 

var theStreetMapOptions = { 
    position : new google.maps.LatLng(37.869085, -122.254775), 
    pov: { 
    heading: 135, 
    pitch: -10 
    }, 
    motionTrackingControlOptions: { 
    position: google.maps.ControlPosition.LEFT_BOTTOM 
    } 
}; 

var theMap = new google.maps.Map(document.getElementById('mapID'), theMapOptions); 
// A custom styles json array (not included, since it's irrelevant) 
// theMap.setOptions({styles: styles}); 

var theMapMarkerOptions = { 
    map  : theMap, 
    position : new google.maps.LatLng(37.869085, -122.254775), 
    draggable : false, 
    visible : true 
}; 

var theMapMarker = new google.maps.Marker(theMapMarkerOptions); 
theMapMarker.Map = theMap; 

theMapMarker.setMap(theMap); 

var theStreetMap = new google.maps.StreetViewPanorama(document.getElementById('map-street'), theStreetMapOptions); 
theMap.setStreetView(theStreetMap); 

jQuery(document).ready(function($) { 
    var ctrl = false, mouseover = false; 
    var waitForScroll = function() { 
    $('.block-scrolling').removeClass('show hide'); 
    }; 
    var disableScroll = function() { 
    $('.block-scrolling').removeClass('hide').addClass('show'); 
    }; 
    var enableScroll = function() { 
    $('.block-scrolling').removeClass('show').addClass('hide'); 
    }; 

    theMap.addListener('idle', function(e){  
    $('#map-street .widget-scene').on('scroll wheel DOMMouseScroll mousewheel touchstart touchmove', function(e) { 
     var $overlay = $('.block-scrolling'), 
     $text = e.type.indexOf('touch') >=0 ? 'Use two fingers to move the map' : (e.type == 'wheel' ? 'Use ⌘ + scroll to zoom the map' : 'Use Ctrl + scroll to zoom the map'); 
     $overlay.find('p').html($text); 
     if (ctrl || (e.type.indexOf('touch') >=0 && e.hasOwnProperty('touches') && e.touches.length > 1)) { 
     enableScroll(); 
     } else { 
     e.stopPropagation(); 
     disableScroll(); 
     } 
    }).on('mouseenter', function(e){ 
     $(this).focus(); 
    }).on('mouseleave touchend', function(e){ 
     waitForScroll(); 
    }).on('keydown keyup', function(e) { 
     var io = e.type == 'keydown' ? 0 : 1; 
     if ((e.ctrlKey || e.metaKey || e.which === 17 || e.which === 91)) { 
     ctrl = false; 
     if (io === 0) { 
      ctrl = true; 
      enableScroll(); 
     } 
     if (io === 1) { 
      waitForScroll(); 
     } 
     } 
    }); 
    }); 

});