為什么document.getElementById（“id”）不起作用？

Question

我有以下代碼（使用谷歌地圖API V3繪制地圖）：

 <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% ; width:100%;}
      </style>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
      <script type="text/javascript">

        var previousPosition = null;

        function initialize() {
          map = new google.maps.Map(document.getElementById("map_canvas"), {
                zoom: 19,
                center: new google.maps.LatLng(48.858565, 2.347198),
                mapTypeId: google.maps.MapTypeId.ROADMAP
              });
        }

        if (navigator.geolocation)
          var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
        else
          alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");

        function successCallback(position){
          map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            map: map
          });
          if (previousPosition){
            var newLineCoordinates = [
               new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
               new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];

            var newLine = new google.maps.Polyline({
              path: newLineCoordinates,
              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2
            });
            newLine.setMap(map);
          }
          previousPosition = position;
        };
      </script>
    </head>

    <body onload="initialize()">
      <div id="map_canvas"></div>
    </body>

    </html>

它工作得很好（你可以測試它），但當我把：

<div id="a">
 <div id="map_canvas"></div>
</div>

代替：

 <div id="map_canvas"></div>

它不起作用了...

為什么它在第二個版本中不起作用？

PS：我剛剛給出了一個代表我真實代碼的簡單代碼（只是讓你更容易理解）......

編輯：我真的不明白，我認為這是一個選擇問題...正如邁克爾哈倫所說。

我嘗試在我的代碼中執行此操作但是當我單擊“單擊我”時它不起作用...

<!DOCTYPE html> 
<html>

<head>
<style>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
/*
 #content,#right = #a,#map_canvas{..
*/
#content,#right { width:70%; height: 100%;margin-left:2%;  box-shadow: 0px 5px 5px 5px #aaa; }

</style>


<title>Géolocalisation restreinte</title>
<%@include file="includes/head.html" %>  
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript">

    function drawMap(){
   var locTunisie= new google.maps.LatLng(33.858565, 10.347198);
   map = new google.maps.Map(document.getElementById("right"), {
            zoom: 6,
            center:locTunisie,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });     
}



</script>

</head>

<body>

<!-- iclure le  header-->
<%@include file="includes/header.html" %>     
<!-- fin inclure -->   

<div id="notification"><!-- zone de notification -->

</div>

<!--  Le contenu  -->
<div id="content">
    <form name="f">


<!--  draw the map Here  -->
         <div id="right">

        </div> 

    <div id="left">
        <a onclick="drawMap()">Click Here</a>

        <input type="date" placeholder="Date debut jj-mm-aaaa" name="dateDeb" id="dateDeb">&rarr;<input type="date"placeholder="Date Fin jj-mm-aaaa" name="dateFin"id="dateFin">
        <br/>
        <br/>

        <div class="scrollbar-b">

        <table class="newspaper-a" summary="">
    <caption>Liste des Automobile en lignes</caption>
    <thead>
        <tr>
            <th scope="col">Type</th>
            <th scope="col">Matriculation</th>
            <th scope="col">Marque</th>
            <th scope="col">Model</th>


        </tr>
    </thead>

           <tbody id="onLine">

           </tbody>
         </table>  
       </div>  <br/><br/>   
       <div class="scrollbar-b">       
        <table class="newspaper-a" summary="">
    <caption>Liste des Automobile hors lignes</caption>
    <thead>
        <tr>
            <th scope="col">Type</th>
            <th scope="col">Matriculation</th>
            <th scope="col">Marque</th>
            <th scope="col">Model</th>


        </tr>
    </thead>

           <tbody id="offline">

           </tbody>
         </table>  

        </div>
    </div>  




    </form>
</div>      
<!--  Fin contenu  -->    


<!-- iclure le footer-->
<%@include file="includes/footer.html" %>   
<!-- fin iclure-->
</body>
</html>

Answer 1

問題是100％大小的地圖容器最初被窗口作為根元素限制。 但是當你將它嵌套在另一個div中時，它現在被那個 div（它小得多）（即0）所限制。

你需要使外部div更大：

#a, #map_canvas { height: 100% ; width:100%;}
^^^

為什么document.getElementById（“id”）不起作用？

問題描述

1 個解決方案

解決方案1
5 已采納 2012-04-24 16:55:04

為什么document.getElementById（“id”）不起作用？

問題描述

1 個解決方案

解決方案1 5 已采納 2012-04-24 16:55:04

解決方案1
5 已采納 2012-04-24 16:55:04