6

私はサイトを構築しており、住所を取得し、それを使用して 2D ロードマップ スタイルの Google マップを生成し、その隣にその住所のストリート ビューを表示するページを持っています。

私の問題は、これら 2 つのマップがサイトのほぼ全体の幅にまたがっており、ユーザーがページを下にスクロールするときにマウスをその上に移動させ、(マップを拡大しているときに) さらに下にスクロールできないことに混乱する可能性があることです。

2D マップでこれを無効にするのはかなり簡単でした

    //works to disable scroll wheel in 2D map   
var mapOptions = {
  zoom: 12,
  center: latlng,
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions );

//not working to disable scroll wheel in panorama
var panoramaOptions = {
  position: results[0].geometry.location,
  scrollwheel: false
};

panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions );

しかし、ストリート ビューでは、これらのオプションを使用してスクロール ホイールを無効にすることはできないようで、google-docs で対処されているこの問題を見つけることができません。これができるかどうか、またはそれにアプローチする方法についての提案を知っている人はいますか?

4

5 に答える 5

11

ストリートビューhttp://code.google.com/p/gmaps-api-issues/issues/detail?id=2557scrollwheel: falseに追加する Gmaps API v3 の問題に関する機能リクエストがありました。これは現在修正されています。オプション内で使用してください。scrollwheel: falseStreetViewPanorama

于 2011-04-19T20:13:22.730 に答える
3

ユーザーがマウスホイールを使用して下にスクロールすると、カーソルがGoogleストリートビューに引っ掛かり、ページを下にスクロールする代わりにズームを開始します。

Google マップでは、これを無効にできる scrollwheel プロパティが提供されていますが、残念ながらストリート ビューには実装されていないようです。

現時点で見つけた唯一の回避策は、@bennedich が前の回答で述べたように、空/透明な div をストリート ビュー div の真上に配置したことです。

ユーザーがマウスダウン イベントで jQuery を使用してこの空の div (css 可視性プロパティを使用) を非表示にすることでストリート ビュー エリアの任意の場所をクリックすると、コントロールが有効になり、ユーザーがマウスを離すと、この空の div が元に戻ります。これは基本的に、ユーザーがストリート ビュー コントロールを操作するたびに、一度クリックする必要があることを意味します。これは最善の解決策ではありませんが、スクロール時にマウスが動かなくなるよりはましです

于 2010-10-11T03:47:15.833 に答える
0

javascriptの方法についてはわかりませんが、htmlとcssを使用すると、マップ/ストリートビュー上にz-indexが高い非表示のdivを配置できます。

于 2010-07-27T22:17:10.073 に答える
0

この問題に対処するためのパッチが Google から提供されています。

現在有効な修正は、バージョン番号を明示的に 3.25 に設定するscrollwheel: falseことです。

例： https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25

于 2016-11-24T10:32:06.597 に答える
0

私の解決策は次のとおりでした。「ホイール」イベントを使用してストリートビューでマウスをスクロールするとすぐに、人為的にスクロールしてオーバーレイを前面に移動します。

$('.streetViewOverlay').click(function(e) {
   $(this).addClass('streetViewOverlayClicked');
});

document.querySelector('#street-view').addEventListener("wheel", function(evt) {
    $(document).scrollTop($(document).scrollTop() + evt.deltaY);
    $('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});



$('#street-view').mouseleave(function() {
    $('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});


var panorama;
  function initialize() {
    panorama = new google.maps.StreetViewPanorama(
        document.getElementById('street-view'),
        {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          zoom: 1,
          gestureHandling: 'cooperative',
           scrollwheel: false
        });
  }

.streetViewOverlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}

.streetViewOverlayClicked {
    z-index: 1;
}
于 2018-05-04T22:54:19.693 に答える