1

サイトにナビゲーション バーがあり、その下に 100% 幅の div に Google マップがあります。訪問者がページに来て下にスクロールしようとすると、下にスクロールするのではなく、Google マップがズームアウトするので、マップがある map/div 要素にフォーカスがあると思います。誰か助けて、これを修正するためのコード スニペットを投げてくれませんか? 多くのユーザーは、適切にスクロールできないため、マップの下に何かがあることさえ知りません。コードは次のとおりです。

<body onload="initialize()">

    <header>
        <div class="wrap clearfix">

            <h1 class="logo"><a href="#" title=""><img src="assets/images/txt/logo.png"/></a></h1>
        </div>


        <nav class="main-nav" role="navigation">

            <ul class="wrap">
                <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="About">About</a></li>
                <li><a href="#" title="Bio">Bio</a></li>
            </ul>

        </nav>

    </header>

  <div id="map_canvas" style="width:100%; height:100%"></div>

  <div class="main" role="main">

  Some webpage content here

  </div>
4

3 に答える 3

2

マップを初期化するときに、マウス ホイールを使用したときにズームを無効にするオプションを設定できます。

https://developers.google.com/maps/documentation/javascript/reference#MapOptions

'scrollwheel' オプションを参照してください。

于 2013-02-20T20:17:59.227 に答える
0

オプションは次のとおりです。

  1. マップを小さくして、常にマップが重ならないようにします。
  2. ある種の目に見えない dom 要素をマップ上に配置して、カーソルがマップと相互作用しないようにします。（これにより、マップ上のスクロールズームなどが無効になります）次のようなもの：

HTML

<div class="overlay"></div>

CSS

.overlay {
height:100%;
width:100%;
position:absolute;
top:0px; /*adjust to move it down */
}
于 2013-02-20T15:39:42.547 に答える
0

詳細な手順は次のとおりです。Javascript ファイルを編集し、ブラウザでアクセスできることを確認してください。(/js/mycode.js)。HTML ファイルを編集し、コピーして貼り付けるだけです (JS を編集する必要はありません)。

HTML (/map.html):

<head>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
   <script src="/js/mycode.js"></script>
</head>

<body>
    <div id="map-canvas" style="height:400px;"></div>
</body>

Javascript (/js/mycode.js): (コピーして貼り付けるだけです! )

if ($('#map-canvas').length) {
        var map,
            service;

        jQuery(function($) {
            $(document).ready(function() {
                var latlng = new google.maps.LatLng(26.13485, -73.87206);
                var myOptions = {
                    zoom: 16,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    scrollwheel: false
                };

                map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                marker.setMap(map);


                $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
                    google.maps.event.trigger(map, 'resize');
                    map.setCenter(latlng);
                });
            });
        });
    }

スタイル、緯度と経度、およびその他のマップ パラメータを編集します。そして、どうぞ！

于 2014-11-18T16:14:49.347 に答える