【发布时间】：2016-03-16 18:04:17
【问题描述】：
我正在尝试使用 Javascript API 构建全屏谷歌地图，我有点成功，我唯一想离开的就是垂直滚动条。
这是我在 index.php 中的代码：
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>LiebensMittel...weil das Herz mitisst!</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwsmcd75BCfaB9-VmeO5Q4mGK1aJ7f6Lk" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
bakery: {
name: 'Backwaren',
icon: 'http://localhost/img/customMapIcons/bakery.png'
},
meat: {
name: 'Fleisch',
icon: 'http://localhost/img/customMapIcons/meat.png'
},
fish: {
name: 'Fisch / Meeresfrüchte',
icon: 'http://localhost/img/customMapIcons/fish.png'
},
fruit: {
name: 'Obst / Früchte',
icon: 'http://localhost/img/customMapIcons/fruit.png'
},
other: {
name: 'Sonstiges',
icon: 'http://localhost/img/customMapIcons/other.png'
}
};
var mapStyles =[
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
styles: mapStyles
};
function load() {
var map = new google.maps.Map(document.getElementById('map'),{
center: new google.maps.LatLng(53.5508, 9.9928),
zoom: 13,
mapTypeControl: false,
streetViewControl: false
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var storename = markers[i].getAttribute("storename");
var addressline_1 = markers[i].getAttribute("addressline_1");
var addressline_2 = markers[i].getAttribute("addressline_2");
var storetype = markers[i].getAttribute("storetype");
var phonenumber = markers[i].getAttribute("phonenumber");
var mailaddress = markers[i].getAttribute("mailaddress");
var webpage = markers[i].getAttribute("webpage");
var from_mon = markers[i].getAttribute("from_mon");
var to_mon = markers[i].getAttribute("to_mon");
var from_tue = markers[i].getAttribute("from_tue");
var to_tue = markers[i].getAttribute("to_tue");
var from_wed = markers[i].getAttribute("from_wed");
var to_wed = markers[i].getAttribute("to_wed");
var from_thu = markers[i].getAttribute("from_thu");
var to_thu = markers[i].getAttribute("to_thu");
var from_fri = markers[i].getAttribute("from_fri");
var to_fri = markers[i].getAttribute("to_fri");
var from_sat = markers[i].getAttribute("from_sat");
var to_sat = markers[i].getAttribute("to_sat");
var from_sun = markers[i].getAttribute("from_sun");
var to_sun = markers[i].getAttribute("to_sun");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = '<table style="width: 100%;" border="0">'+
'<tbody>'+
'<tr>'+
'<td style="text-align: left; vertical-align: top;">'+
'<h1>' + storename + '</h1>'+
'<p>' + addressline_1 + '</p>'+
'<p>' + addressline_2 + '</p><br>'+
'<p>' + phonenumber + '</p><br>'+
'<a href="mailto:' + mailaddress + '">Email schreiben</a><br>'+
'<a target="_blank" href="' + webpage + '">Webseite</a></td>'+
'<td style="text-align: left; vertical-align: top;"><img alt="Liebensmittel.de" src="http://localhost/img/infoWindowIcons/lm_logo_small.png">'+
'<br><b>Öffnungszeiten</b><br>'+
'<table style="width: 100%" border="0">'+
'<tbody>'+
'<tr>'+
'<td>Montag</td>'+
'<td>' + from_mon + ' - ' + to_mon + '</td>'+
'</tr>'+
'<tr>'+
'<td>Dienstag</td>'+
'<td>' + from_tue + ' - ' + to_tue + '</td>'+
'</tr>'+
'<tr>'+
'<td>Mittwoch</td>'+
'<td>' + from_wed + ' - ' + to_wed + '</td>'+
'</tr>'+
'<tr>'+
'<td>Donnerstag</td>'+
'<td>' + from_thu + ' - ' + to_thu + '</td>'+
'</tr>'+
'<tr>'+
'<td>Freitag</td>'+
'<td>' + from_fri + ' - ' + to_fri + '</td>'+
'</tr>'+
'<tr>'+
'<td>Samstag</td>'+
'<td>' + from_sat + ' - ' + to_sat + '</td>'+
'</tr>'+
'<tr>'+
'<td>Sonntag</td>'+
'<td>' + from_sun + ' - ' + to_sun + '</td>'+
'</tr>'+
'</tbody>'+
'</table>'+
'<br>'+
'</td>'+
'</tr>'+
'</tbody>'+
'</table>';
var icon = customIcons[storetype] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map"></div>
</body>
</html>
这里是 style.css：
html, body {
height: 100%;
}
#map{
width:100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
}
我注意到，当我向下滚动滚动条时，底部有几个像素厚的白色区域。
我的想法是，用我的菜鸟的话来说，我的全屏地图 div 会向下推另一个元素，这会导致滚动条......但我对 CSS 几乎一无所知，所以这只是一个猜测。
谁能指出我的错误所在的正确方向？
如果我留下了一些重要的东西，请询问更多细节，请耐心等待，我是这个论坛和网页设计的新手 :)
最好的问候 罗尔夫
【问题讨论】：
标签： css google-maps-api-3