Question

我有一些带有一些标记的谷歌地图。当点击标记从javascript函数获取数据时。该函数返回一个cloudword。问题是结果在两个方面可见： 1）点击标记时在infowindow 2）在网站的顶部。我希望只在第一种情况下才能看到。

我的代码：

 <!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>

Answer 1

您可以隐藏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>

如何防止div两次可见？

1 个答案: