Google地圖標記不可見。爲什麼？

-1

這下面的代碼，如果我點擊第一個複選框&然後單擊其他兩個選擇&取消選擇工作正常。看來主要的問題是if(document.getElementById('mapCheck').checked) - 這一行。Google地圖標記不可見。爲什麼？

如果我刪除此行則標記將只添加到地圖，但基於複選框的檢查屬性不能被刪除（顯然是因爲不會再有，如果其他條件來檢查選中複選框屬性）。

<!DOCTYPE html> 
     <html> 
     <head> 
     <script 
     src="http://maps.googleapis.com/maps/api/js"> 
     </script> 

     <!-- For dynamic table --> 

     <style> 

     table, th, td { 
      border: 1px solid black; 
      border-collapse: collapse; 
     } 
     th, td { 
      padding: 5px; 
      text-align: center; 
     } 
     table#appraiserTable tr:nth-child(even) { 
      background-color: #eee; 
     } 
     table#appraiserTable tr:nth-child(odd) { 
      background-color:#fff; 
     } 
     table#appraiserTable th { 
      background-color: black; 
      color: white; 
     } 
     </style> 

     <script> 
     var lat=[10,20,30,40]; 
     var lon=[10,20,30,40]; 
     var appraiserName=["A1","A2","A3","A4"]; 
     var appraiserLocation=["L1","L2","L3","L4"]; 
     document.write("<table id=appraiserTable border=1 style=margin-top:10px; margin-left:10px;>") 
     document.write("<tr><th>Select</th><th>Appraiser Name</th><th>Location</th></tr>"); 
      for (row=0; row<lat.length; row++) { 
      document.write("<tr>") 
      for (col=1; col<=3; col++) { 
       if(col==1) 
        document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' value='checked' onchange='showOrHideMarkers("+lat[row]+","+lon[row]+");'/></td>") 
       if(col==2) 
        document.write("<td width='200'>"+appraiserName[row]+"</td>") 
       if(col==3) 
        document.write("<td width='350'>"+appraiserLocation[row]+"</td>") 
       } 
       document.write("</tr>") 
     } 
     document.write("</table>") 

     var map; 
     var markers=[]; 


     //load all markers to an array 
     function loadMarkers(){ 
     for(var i=0;i<lat.length;i++) 
     { 
     var markerCenter = new google.maps.LatLng(lat[i],lon[i]); 

      var marker=new google.maps.Marker({ 
      position: markerCenter, 
      }); 
     markers.push(marker); 
     } 
     } 


     // Shows or Hides markers currently in the array. 
     function showOrHideMarkers(latitude,longitude) { 

     var index; 
      for(var i=0;i<lat.length;i++) 
      { 
      if(lat[i]==latitude && lon[i]==longitude) 
      { 
       index=i; 
       break; 
      } 
      } 

     //User selects the check box to see the marker in Google Map 
     if(document.getElementById('mapCheck').checked) 
     { 
     console.log(latitude+" : "+longitude+" : "+index) 
     markers[index].setMap(map); 
     } 

     //User unselects the checkbox not to see the marker 
     else 
     { 
     console.log(latitude+" : "+longitude+" : "+index) 
     markers[index].setMap(null); 
     } 

     } 


     var myCenter=new google.maps.LatLng(51.508742,-0.120850); 
     //Initializing the Map 
     function initialize() 
     { 
     var mapProp = { 
      center:myCenter, 
      zoom:5, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
      }; 

     map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

     loadMarkers(); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
     <style> 
     div.absolute { 
      position: absolute; 
      top: 10px; 
      right: 10px; 
      width: 200px; 
      height: 100px; 
      border: 3px solid #8AC007; 
     } 
     </style> 
     </head> 

     <body> 
     <div id="googleMap" style="width:500px;height:380px;" class="absolute"></div> 
     </body> 
     </html>

來源

2015-07-20 Anurag Chakraborty

很少有錯誤。第一個：

if(document.getElementById('mapCheck').checked)

不起作用。你有4個複選框，你使用的是getElementById，它將得到第一個帶有id的值。基本上只有第一個複選框會以這種方式工作。

二。雖然您可以使用SetMap，但最好使用標記上的setVisible。

祝您的項目順利。以下是更新的工作代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://maps.googleapis.com/maps/api/js"></script> 

     <!-- For dynamic table --> 

     <style> 
      table, th, td { 
        border: 1px solid black; 
        border-collapse: collapse; 
      } 
      th, td { 
        padding: 5px; 
        text-align: center; 
      } 
      table#appraiserTable tr:nth-child(even) { 
        background-color: #eee; 
      } 
      table#appraiserTable tr:nth-child(odd) { 
       background-color:#fff; 
      } 
      table#appraiserTable th { 
        background-color: black; 
        color: white; 
      } 
     </style> 

     <script> 
      var lat=[10,20,30,40]; 
      var lon=[10,20,30,40]; 
      var appraiserName=["A1","A2","A3","A4"]; 
      var appraiserLocation=["L1","L2","L3","L4"]; 
      document.write("<table id=appraiserTable border=1 style=margin-top:10px; margin-left:10px;>") 
      document.write("<tr><th>Select</th><th>Appraiser Name</th><th>Location</th></tr>"); 
       for (row=0; row<lat.length; row++) { 
        document.write("<tr>") 
        for (col=1; col<=3; col++) { 
          if(col==1) 
           document.write("<td><input type='checkbox' id='mapCheck' name='myTextEditBox' value='checked' onchange='showOrHideMarkers(this,"+lat[row]+","+lon[row]+");'/></td>") 
          if(col==2) 
           document.write("<td width='200'>"+appraiserName[row]+"</td>") 
          if(col==3) 
           document.write("<td width='350'>"+appraiserLocation[row]+"</td>") 
         } 
         document.write("</tr>") 
      } 
      document.write("</table>") 

      var map; 
      var markers=[]; 


      //load all markers to an array 
      function loadMarkers(){ 
      for(var i=0;i<lat.length;i++) 
      { 
      var markerCenter = new google.maps.LatLng(lat[i],lon[i]); 

       var marker=new google.maps.Marker({ 
       position: markerCenter, 
       }); 
      marker.setMap(map); 
      marker.setVisible(false) 
      markers.push(marker); 
      } 
      } 


      // Shows or Hides markers currently in the array. 
      function showOrHideMarkers(o,latitude,longitude) { 
      var index; 
       for(var i=0;i<lat.length;i++) 
       { 
        if(lat[i]==latitude && lon[i]==longitude) 
        { 
          index=i; 
          break; 
        } 
       } 

      //User selects the check box to see the marker in Google Map 
      if(o.checked) 
      { 
      console.log('showing: '+index) 
      markers[index].setVisible(true) 
      } 

      //User unselects the checkbox not to see the marker 
      else 
      { 
      console.log('hiding: '+index) 
      markers[index].setVisible(false) 
      } 

      } 


      var myCenter=new google.maps.LatLng(51.508742,-0.120850); 
      //Initializing the Map 
      function initialize() 
      { 
      var mapProp = { 
       center:myCenter, 
       zoom:5, 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 

      map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

      loadMarkers(); 
      } 

      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
     <style> 
      div.absolute { 
        position: absolute; 
        top: 10px; 
        right: 10px; 
        width: 200px; 
        height: 100px; 
        border: 3px solid #8AC007; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="googleMap" style="width:500px;height:380px;" class="absolute"></div> 
    </body> 
</html>

來源

2015-07-20 09:46:19

太謝謝你了。有用。 –

如果我在標記中添加動畫（即在'loadMarkers'函數'marker'對象中添加'animation：google.maps.Animation.BOUNCE'）。然後，如果我選擇複選框並取消選擇它並再次選擇它，動畫停止工作。你有什麼想法，爲什麼？ –

只需將marker [index] .setAnimation（google.maps.Animation.BOUNCE）;在標記前面[index] .setVisible（true）; –

Google地圖標記不可見。爲什麼？

回答

相關問題