1

我的网站上有导航栏，下面有一个谷歌地图，在一个 100% 宽的 div 中。当访问者来到页面并尝试向下滚动时，谷歌地图会缩小而不是向下滚动，所以我猜焦点是地图所在的 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

请参阅“滚轮”选项。

于 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 回答