Question

我的网站上有一个谷歌地图，由于某种原因，当页面最初加载时，信息窗口有一个滚动条，但点击其他标记并返回显示信息窗口的初始标记后，没有滚动条。

以下是页面加载时的屏幕截图：

enter image description here

用＆＃34; H＆＃34;点击其他标记后图标并返回到建筑物图标，滚动条消失了：

enter image description here

这是我的HTML / CSS / JQuery代码：

<!DOCTYPE html>

<html>

<head>
<title>Map Location</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
var firstOne = null;
$(document).ready(function () {
        initialize();
});

function initialize() {
    var centerMap = new google.maps.LatLng(41.04356, -73.784445);
    var myOptions = {
        zoom: 12,
        center: centerMap,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
        content: "loading...", maxWidth: 350
    });
    infowindow.setContent(firstOne.html);
    infowindow.open(map, firstOne);
    //var bikeLayer = new google.maps.BicyclingLayer();
    //bikeLayer.setMap(map);
}

var sites = [
    ['Administrative Office', 41.0237, -73.701239, 1, '<span class=ttl><b> Administrative Office</b></span><br><br><span class=sbj>0 Westchester Avenue<br>Purchase, NY 10577<br><img src="theImages/phone.png" width="12" height="12" /> 914.963.0700</span>'],
    ['Purchase Office', 41.005615, -73.69566551, 2, '<span class=ttl><b>Purchase Office</b></span><br><br><span class=sbj>3 Westchester Avenue<br>Purchase, NY 10577<br><img src="theImages/phone.png" width="12" height="12" /> 914.533.4570</span>'],
    ['Rye Office', 40.9756737, -73.65614, 3, '<span class=ttl><b>Rye Office</b></span><br><br><span class=sbj>45 Road<br>Rye, NY 10580<br><img src="theImages/phone.png" width="12" height="12" /> 914.845.8822</span>'],
    ['Scarsdale Office', 40.973478, -73.8433, 4, '<span class=ttl><b>Scarsdale Office</b></span><br><br><span class=sbj>6 White Plains Road, Suite 270<br>Scarsdale, NY 10583<br><img src="theImages/phone.png" width="12" height="12" /> 914.213.7670</span>'],
    ['White Plains Office', 41.04579, -73.7464, 5, '<span class=ttl><b>White Plains Office</b></span><br><br><span class=sbj>5 Westchester Avenue (GPS Enter: West Harrison)<br>White Plains, NY 10604<br><img src="theImages/phone.png" width="12" height="12" /> 914.672.0776</span>'],
    ['White Plains Office', 41.0563, -73.75618, 6, '<span class=ttl><b>White Plains Office</b></span><br><br><span class=sbj>5 Davfgs Avenue<br>White Plains, NY 10605<br><img src="theImages/phone.png" width="12" height="12" /> 914.541.2450</span>'],
    ['Yonkers Office', 40.9442, -73.8554, 6, '<span class=ttl><b>Yonkers Office</b></span><br><br><span class=sbj>5 Hill Blvd<br>Yonkers, NY 10710<br><img src="theImages/phone.png" width="12" height="12" /> 914.545.8022</span>']
];


function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        });
        var contentString = "Some content";
        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
        if(!firstOne) {
            firstOne = marker;
            marker.setIcon('theImages/hq.png');
        }
        else {
            marker.setIcon('theImages/hicon.png');
        }
    }           
}
</script>
<style>
.ttl {
    font-family: Arial, Verdana;
    font-size: 15px;
    color: #049600;
    text-align: left;
}
.sbj {
    font-family: Tahoma, Arial, Verdana;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
}
</style>
</head>

<body>
<div id="map_canvas" style="width: 1050px; height: 395px; line-height: normal ! important"></div>
</body>
</html>

页面加载时，没有滚动条。页面完全加载后，滚动条会显示出来。如何修复滚动条问题？

Answer 1

试试这个：

#map_canvas > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(3) > div > div.gm-style-iw {
    overflow: visible !important;
}

Answer 2

由于您看起来像是在信息窗口中包含大量信息的路线，因此您可以从追求构建自己的自定义信息窗口的路线中获益更多。他们在http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html有一个很好的例子。我注意到你的页面上也有jquery，你甚至可以看看这篇关于如何使用Google的“InfoBox”扩展来集成jQuery UI的帖子 - http://thewebstorebyg.wordpress.com/2012/10/24/google-maps-api-v3-tabs-inside-the-infowindow-using-infobox/

为什么Google Map infowindow有一个滚动条

2 个答案: