如何防止div可見兩次？

我有一些標記的谷歌地圖。當點擊標記從JavaScript函數獲取數據時。該函數返回一個雲字。問題是結果在兩個方面是可見的： 1）在infowindow中點擊標記 2）在網站頂部。我想僅在第一種情況下才可見。如何防止div可見兩次？

我的代碼：

<!DOCTYPE> 
    <html> 
     <head> 
    <link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/> 
    <script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <title>Rectangle Overlay</title> 
     <style type="text/css"> 
     #map { 
     width:1200px; 
     height: 700px; 
     } 
     </style> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
    function init() { 
    var myOptions = { 
     center: new google.maps.LatLng(38.122404, 23.862591), 
     zoom: 3, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById('map'),myOptions); 

     var locations = [ 
      [document.getElementById('tcdiv'), 38.6391,23.3437], 
      [document.getElementById('tcdiv2'), 37.893, 23.936999999999998] 
     ]; 


    var infowindow = new google.maps.InfoWindow(); 

     var marker, i; 

     for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 

       infowindow.open(map, marker); 
    infowindow.setContent(locations[i][0]); 


      } 
      })(marker, i)); 
     } 


    } 



    google.maps.event.addDomListener(window, 'load', init); 
    </script> 

     <div id="tcdiv"></div> 
    <script type="text/javascript"> 
     google.load("visualization", "1"); 
     google.setOnLoadCallback(draw); 
     function draw() { 
     data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Label'); 
     data.addColumn('number', 'Value'); 
     data.addColumn('string', 'Link'); 
     data.addRows(3); 
     data.setValue(0, 0, 'First Term'); 
     data.setValue(0, 1, 10); 
     data.setValue(1, 0, 'Second'); 
     data.setValue(1, 1, 30); 
     data.setValue(1, 2, 'http://www.google.com'); 
     data.setValue(2, 0, 'Third'); 
     data.setValue(2, 1, 20); 
     var outputDiv = document.getElementById('tcdiv'); 
     var tc = new TermCloud(outputDiv); 
     tc.draw(data, null); 
     } 
    </script> 


      <div id="tcdiv2"></div> 
    <script type="text/javascript"> 
     google.load("visualization", "1"); 
     google.setOnLoadCallback(draw); 
     function draw() { 
     data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Label'); 
     data.addColumn('number', 'Value'); 
     data.addColumn('string', 'Link'); 
     data.addRows(3); 
     data.setValue(0, 0, 'test1'); 
     data.setValue(0, 1, 10); 
     data.setValue(1, 0, 'test2'); 
     data.setValue(1, 1, 30); 
     data.setValue(1, 2, 'http://www.google.com'); 
     data.setValue(2, 0, 'test3'); 
     data.setValue(2, 1, 20); 
     var outputDiv = document.getElementById('tcdiv2'); 
     var tc = new TermCloud(outputDiv); 
     tc.draw(data, null); 
     } 
    </script> 


    </head> 
    <body> 
    <h1>Service</h1> 
    <h2> Map <h2> 
    <div id="map"></div> 

     </script> 
    </td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body> 
    </html>

來源

2013-09-21 Jimmysnn

可以隱藏2個的div，當您點擊標記，刪除類。

<!DOCTYPE> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/> 
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Rectangle Overlay</title> 
    <style type="text/css"> 
    #map { 
    width:1200px; 
    height: 700px; 
    } 
    .hideme { 
    position : absolute; 
    top: -999px; 
} 
    </style> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
function init() { 
var myOptions = { 
    center: new google.maps.LatLng(38.122404, 23.862591), 
    zoom: 3, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map'),myOptions); 

    var locations = [ 
     [document.getElementById('tcdiv'), 38.6391,23.3437], 
     [document.getElementById('tcdiv2'), 37.893, 23.936999999999998] 
    ]; 


var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      locations[i][0].className = ""; 
      infowindow.open(map, marker); 
infowindow.setContent(locations[i][0]); 


     } 
     })(marker, i)); 
    } 


} 



google.maps.event.addDomListener(window, 'load', init); 
</script> 

    <div id="tcdiv" class="hideme"></div> 
<script type="text/javascript"> 
    google.load("visualization", "1"); 
    google.setOnLoadCallback(draw); 
    function draw() { 
    data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Label'); 
    data.addColumn('number', 'Value'); 
    data.addColumn('string', 'Link'); 
    data.addRows(3); 
    data.setValue(0, 0, 'First Term'); 
    data.setValue(0, 1, 10); 
    data.setValue(1, 0, 'Second'); 
    data.setValue(1, 1, 30); 
    data.setValue(1, 2, 'http://www.google.com'); 
    data.setValue(2, 0, 'Third'); 
    data.setValue(2, 1, 20); 
    var outputDiv = document.getElementById('tcdiv'); 
    var tc = new TermCloud(outputDiv); 
    tc.draw(data, null); 
    } 
</script> 


     <div id="tcdiv2" class="hideme"></div> 
<script type="text/javascript"> 
    google.load("visualization", "1"); 
    google.setOnLoadCallback(draw); 
    function draw() { 
    data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Label'); 
    data.addColumn('number', 'Value'); 
    data.addColumn('string', 'Link'); 
    data.addRows(3); 
    data.setValue(0, 0, 'test1'); 
    data.setValue(0, 1, 10); 
    data.setValue(1, 0, 'test2'); 
    data.setValue(1, 1, 30); 
    data.setValue(1, 2, 'http://www.google.com'); 
    data.setValue(2, 0, 'test3'); 
    data.setValue(2, 1, 20); 
    var outputDiv = document.getElementById('tcdiv2'); 
    var tc = new TermCloud(outputDiv); 
    tc.draw(data, null); 
    } 
</script> 


</head> 
<body> 
<h1>Service</h1> 
<h2> Map <h2> 
<div id="map"></div> 

    </script> 
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body> 
</html>

來源

2013-09-21 16:21:04 ias

如何防止div可見兩次？

回答

相關問題