形式不顯示上述谷歌地圖背景

-1

<html> 
<head lang="en"> 
<meta charset="UTF-8"> 

<!-- Font awesome css file--> 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" type="text/css" /> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="css/clockpick.css"> 

<!-- Superslide css file--> 


<!-- Google fonts --> 

<style> 
    @media (min-width: 1200px) { 
     .container { 
      width: 500px; 
      height: 400px; 
      z-index: 1; 
      position: relative 

     } 
    } 
    #googlemaps { 
     height: 400px; 
     width: 500px; 
     position:absolute; 
     top: 0; 
     left: 0; 
     z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */ 
    } 
</style> 

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 

<![endif]--> 
<title></title> 
</head> 
<body> 
<br> <br> <br> 
<div class="row"> 
<div id="googlemaps"> 
<div class="container"> 

    <form class="form-horizontal" action='login.php' method="POST"> 
     <br> 
     <fieldset> 
      <div id="legend"> 
       <legend class="">Travel Detail</legend> 
      </div> 
      <div class="control-group"> 
       <!-- Username --> 
       <label class="control-label" for="ploc">PickUp location</label> 
       <div class="controls"> 
        <input type="text" id="ploc" name="ploc" placeholder="Enter PickUp location" class="input-xlarge"> 
       </div> 
      </div> 


      <div class="control-group"> 
       <!-- Password--> 
       <label class="control-label" for="dloc">Drop Off Location</label> 
       <div class="controls"> 
        <input type="text" id="dloc" name="dloc" placeholder="Enter Drop Off Location" class="input-xlarge"> 
       </div> 
      </div> 
      <label class="control-label" for="startDate">Date</label> 
      <div class='input-group date' id='startDate'> 
       <input type='text' class="form-control" name="startDate" /> 
       <span class="add-on"> 
    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
    </span> 
       </span> 
      </div> 
      <label class="control-label" for="startDate">Time</label> 
      <div class="input-group clockpicker"> 

       <input type="text" class="form-control" value="09:30"> 
<span class="input-group-addon"> 
    <span class="glyphicon glyphicon-time"></span> 
</span> 
      </div> 
      <br> 
      <br> 
      <button type="button" class="btn btn-primary btn-lg" id="next">Next</button> 
     </fieldset> 
    </form> 
</div>

</body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
    <script src="js/bootstrap.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap- datepicker/1.3.0/js/bootstrap-datepicker.min.js" type="text/javascript"> </script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap- datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js" type="text/javascript"> </script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js" type="text/javascript"></script> 
    <script type="text/javascript" src="js/clockpicker.js"></script> 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script> 
    $(document).ready(function() { 
    var position = [28.6139, 77.2090]; 

    function showGoogleMaps() { 

     var latLng = new google.maps.LatLng(position[0], position[1]); 

     var mapOptions = { 
      zoom: 16, // initialize zoom level - the max value is 21 
      streetViewControl: false, // hide the yellow Street View pegman 
      scaleControl: true, // allow users to zoom the Google Map 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: latLng 
     }; 

     map = new google.maps.Map(document.getElementById('googlemaps'), 
       mapOptions); 

     // Show the default red marker at the location 
     marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      draggable: false, 
      animation: google.maps.Animation.DROP 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', showGoogleMaps); 
    $('#startDate').datepicker(); 
    $('.clockpicker').clockpicker(); 
    }); 


    </script> 
    </html>

我已經甚至改變了我的容器和谷歌地圖id在CSS中的z-index屬性但仍然沒有解決p roblem.Please幫助。

來源

2015-05-04 ten do

是'.container'置於絕對或相對??否則'z-index'將不會執行任何操作。 – LinkinTED

它被放置在相對位置 –

因此，您定位'.container'元素時存在問題，但是除了您嘗試定位它的部分之外，您的所有代碼都存在？ – MrUpsidown

這裏如果有幫助...使用這個jsfiddle ..................................... ........

jsfiddle

<div id="googlemaps"></div> 
    <div id="contactform"> 
     <input type="text"> 
    </div> 

    var position = [17.385120, 78.486399]; 

    function showGoogleMaps() { 

     var latLng = new google.maps.LatLng(position[0], position[1]); 

     var mapOptions = { 
      zoom: 16, // initialize zoom level - the max value is 21 
      streetViewControl: false, // hide the yellow Street View pegman 
      scaleControl: true, // allow users to zoom the Google Map 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: latLng 
     }; 

     map = new google.maps.Map(document.getElementById('googlemaps'), 
      mapOptions); 

     // Show the default red marker at the location 
     marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      draggable: false, 
      animation: google.maps.Animation.DROP 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', showGoogleMaps); 

#googlemaps { 
    height: 100%; 
    width: 100%; 
    position:absolute; 
    top: 0; 
    left: 0; 
    z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */ 
} 

#contactform { 
    position: relative; 
    z-index: 1; /* The z-index should be higher than Google Maps */ 
    width: 300px; 
    margin: 60px auto 0; 
    padding: 10px; 
    background: black; 
    height: auto; 
    opacity: .45; /* Set the opacity for a slightly transparent Google Form */ 
    color: white; 
}

來源

2015-05-04 09:18:06

形式不顯示上述谷歌地圖背景

回答

相關問題