Javascript 页面滚动“；残疾人士；因为谷歌地图_Javascript_Jquery

Javascript 页面滚动“；残疾人士；因为谷歌地图

javascript jquery

Javascript 页面滚动“；残疾人士；因为谷歌地图,javascript,jquery,Javascript,Jquery,我在我的网站上有导航栏，下面有谷歌地图，在一个100%宽的分区中。当访问者来到页面并尝试向下滚动时，Google map会缩小，而不是向下滚动，因此我猜焦点是地图所在的map/div元素。有人能帮我解决这个问题吗？很多用户甚至不知道地图下面有什么东西，因为他们无法正确滚动。下面是一个代码： <body onload="initialize()"> <header> <div class="wrap clearfix">

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







这里有一些网页内容

您可以选择：

把地图缩小一些，这样他们就不会总是把地图放在上面

在地图上放置某种不可见的dom元素，这样他们的光标就不会与地图交互。（这将禁用地图上的滚动缩放等）类似于：

HTML

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

请参阅“滚轮”选项。

以下是详细的步骤。确保编辑您的Javascript文件，并且可以在浏览器中访问它！（/js/mycode.js）。只需编辑HTML文件，复制并粘贴（无需编辑JS）

HTML（/map.HTML）：

现在编辑样式、纬度和经度以及其他地图参数。给你

但是如果有人想缩放地图呢？我想他们可以点击地图然后缩放？但是，默认情况下，页面本身可以滚动，而不是谷歌地图主页上总是有巨大的地图，而这个“问题”只发生在那里。我对jQuery/JS一无所知，但我想用一些简单的代码片段来实现这一点会非常简单：\如果您只想显示地图而不需要交互，那么只需要html和css。答案已用代码更新

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

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

<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>

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);
                });
            });
        });
    }