Question

我的网站上有导航栏，下面是Google地图，在100％宽的div中。当访问者进入页面并尝试向下滚动时，Google地图会缩小，而不是向下滚动，因此我猜焦点位于地图所在的地图/ 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>

Answer 1

初始化地图时，您可以设置一个选项，以便在使用鼠标滚轮时禁用缩放。

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

请参阅'scrollwheel'选项。

Answer 2

您的选择是：

让地图变小，这样他们就不会总是有地图。
在地图上放置一些不可见的dom元素，这样他们的光标就不会与地图进行交互。（这会禁用地图上的滚动缩放等），例如：

HTML

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

CSS

.overlay {
height:100%;
width:100%;
position:absolute;
top:0px; /*adjust to move it down */
}

Answer 3

这是详细的程序。确保编辑您的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);
                });
            });
        });
    }

现在编辑样式，纬度和经度以及其他地图参数。你走吧！

由于谷歌地图，页面滚动“已禁用”

3 个答案: