Question

我已经使用我的页面名称和导航栏创建了一个标题。我在页面底部有一个页脚。

当我试图将谷歌api放在他们之间的div中时，它会造成严重破坏;在移动设备上，标题被覆盖在PC上，当我滚动时，页脚会出现在页面上！

如何防止这两件事情发生？

*{
   margin: 0;
   padding: 0;
   }/*
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   }*/
html,
body {
   height:100%;
   width: 100%;
}

 h1{
   color:#39ff14;
   font-family: 'Nunito';
   padding-top: 5%;
   text-align: left;
   margin-left: 10%;
   font-size: 20px;
}
a {
    text-decoration: none;
    display: block;
    padding: 8px;
    background-color: black;
}

#container {
   min-height:100%;
   position:relative;
}
#header {
   padding:0;
   margin:0;
   background:black;
   position: fixed;
   width: 100%;
   height: 15%;
}
#header h1{
   margin-left: 14px;
   margin-top: 10px;
   margin-bottom: 10px;
   padding:0;
   display: block;

}
#header h2{
   color: #39ff14;
   font-family: 'Nunito';  
   font-size: 14px; 
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}
li {
   float:left;
   display: inline;
}
.navbar{
   text-decoration: none;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #333;
}
.active {
    background-color: #39ff14;
    color: black;
}

#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   left:0;
   right:0;
   width:100%;
   height:10%;   /* Height of the footer */
   background:black;
   color: white;
   font-family: 'Montserrat';
   vertical-align: middle;
   text-align: center;
}

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="refresh" content="5">
	<link type="text/css" rel="stylesheet" href="Styles.css" />
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
	<title>My Map App</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        margin-top:7%;
        height: 100%;
        width: 100%;
      }
  </style>
</head>
<body>

<header>
<div id="container">
	<div id="header">
   		<h1>My Map App</h1>
		<div class=navbar>
			<ul>
				<li><a href="index.php"><h2>Home</h2></a></li>
				<li><a href="maptest.html"><h2>More</h2></a></li>
				<li><a href="marathon.php"><h2>Less</h2></a></li>
			</ul>
		</div>
	</div>
</header>

  <div id="map"></div>

    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };
      //
      //

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(52.948616, -1.169131),
          zoom: 17
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          //downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
          	downloadUrl('http://localhost/projectgmaps/map_xml.php', function(data) {

            var xml = data.responseXML;
            //alert (xml);
            var markers = xml.documentElement.getElementsByTagName('marker');
            //alert (markers);
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');

              //alert (type);
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                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>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
    </script>

<div id="body"></div>
<div id="footer">All Rights Reserved.</div>
</div>
</body>
</html>

提前致谢！

如何在页眉和页脚之间获取Google API地图

0 个答案: