Fatal编程技术网
  • css/
  • Css 谷歌全屏地图有垂直滚动条

Css 谷歌全屏地图有垂直滚动条

css google-maps-api-3

Css 谷歌全屏地图有垂直滚动条,css,google-maps-api-3,Css,Google Maps Api 3,我正在尝试用Javascript API构建一个全屏Google地图，我有点成功了，我唯一想放弃的就是一个垂直滚动条 以下是我在index.php中的代码： <!DOCTYPE html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> <meta http-equiv="content-type" content="text

我正在尝试用Javascript API构建一个全屏Google地图，我有点成功了，我唯一想放弃的就是一个垂直滚动条

以下是我在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>
我注意到，当我向下滚动滚动条时，底部有几个像素厚的白色区域

我的想法是，用我的noob的话来说，我的全屏map div向下推另一个元素，这导致了滚动条…但我对CSS几乎一无所知，所以这只是一个猜测

有人能给我指出我的错误所在吗

如果我留下了一些重要的东西，请询问更多细节，请耐心等待，我是这个论坛和网站设计的新手：）

致意
Rolf添加
填充：0；保证金：0到您的CSS


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
} 






代码片段：



var自定义图标={
面包店：{
名称：'backaren'，
图标：'http://localhost/img/customMapIcons/bakery.png'
},
肉类：{
姓名：'Fleisch'，
图标：'http://localhost/img/customMapIcons/meat.png'
},
鱼：{
名称：“Fisch/Meeresfrüchte”，
图标：'http://localhost/img/customMapIcons/fish.png'
},
水果：{
名称：“Obst/Früchte”，
图标：'http://localhost/img/customMapIcons/fruit.png'
},
其他：{
名称：“桑斯蒂格斯”，
图标：'http://localhost/img/customMapIcons/other.png'
}
};
变量映射样式=[{
特征类型：“poi”，
elementType:“标签”，
样式：[{
能见度：“关闭”
}]
}];
变量映射选项={
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP，
disableDefaultUI:true，
样式：贴图样式
};
函数加载（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：新google.maps.LatLng（53.5508,9.9928），
缩放：13，
mapTypeControl:false，
街景控制：错误
});
var infoWindow=new google.maps.infoWindow；
下载URL（“genxml.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i”+
“”+addressline_2+”

”+
“”+电话号码+”

”+
“
”+
'' +
'' +
“
Öffnungszeiten
”+
'' +
'' +
'' +
“蒙塔格”+
''从'u-mon+'-'+到'u-mon+''+
'' +
'' +
“迪恩斯塔格”+
''从_tue+'-''到_tue+''+
'' +
'' +
“米特沃奇”+
''从''u wed+'-''到''u wed+''+
'' +
'' +
“唐纳斯塔格”+
''从_-thu+'-''到_-thu+''+
'' +
'' +
“弗雷塔格”+
''从_fri+'-''到_fri+''+
'' +
'' +
“桑斯塔格”+
''从''u sat+'-''到''u sat+''+
'' +
'' +
“桑塔格”+
''从太阳+'-''到太阳+''+
'' +
'' +
'' +
“
”+
'' +
'' +
'' +
'';
var icon=customIcons[storetype]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
图标：icon.icon
});
bindInfoWindow（标记、地图、infoWindow、html）；
}
});
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}
google.maps.event.addDomListener（窗口“加载”，加载）

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
左：0px；
}


这就像一个符咒！感谢您的帮助，我现在将阅读一些关于边距和填充的讲座，以了解原因：）

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}