Question

我想在谷歌地图infoWindow（）里面调用javascript。我知道这是一个经典的问题。我在stackoverflow中读了很多类似的问题，但我找不到解决方案:(

我的代码：

<!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 = [
      ['Bondi Beach', 38.6391,23.3437],
      ["<scr"+"ipt type='text/javascript'>alert('test');</scr"+"ipt>", 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.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }



 } 
 google.maps.event.addDomListener(window, 'load', init); 
 </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>

有谁知道如何解决这个问题？

谢谢！

编辑：

Jonas Grumann的答案是正确的。事实上，我需要运行的javascript是在infowindow中调用TermCloud（）函数构建一个cloudword。我尝试下面的代码。请问??? ???

 <!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 = [
          ['Bondi Beach', 38.6391,23.3437],
          ["Hello", 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.setContent(locations[i][0]);
              infowindow.open(map, marker);
              var yourFunction = new YourFunction(locations[i][0])

            }
          })(marker, i));
        }


         var YourFunction = function(str) {
            this.init = function() {

          google.load("visualization", "1");
          google.setOnLoadCallback(draw);     

            }
            this.init();
        }

    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);
          }



     } 



     google.maps.event.addDomListener(window, 'load', init); 
     </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

找到一个解决方案 - 将infoWindow内容包装在div中，并在'domready'事件中为该div的id添加一个监听器（请参阅此SO thread）：

var infowindow = new google.maps.InfoWindow({
    content: '<div id="myInfoWinDiv">'+ myContent +'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
    $('#myInfoWinDiv').click(function() {
        //Do your thing
    });
});

在我的示例中，使用jQuery将单击处理程序附加到div。您可以将任何JS放在domready事件处理程序中。它需要在infoWindow的domready中完成，否则你无法确定该对象是否已被创建。

Answer 2

我认为调用函数click监听器应该可以工作（虽然没有测试过）：

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
      var yourFunction = new YourFunction()
    }
  })(marker, i));

然后，在所有谷歌地图之外的东西

var YourFunction = function() {
    this.init = function() {
        alert("You have clicked a marker");
    }
    this.init();
}

Answer 3

Google Map API V3中的click事件怎么样？

var infowindow = new google.maps.InfoWindow({
    content: '<div id="myInfoWinDiv">'+ myContent +'</div>'
});

google.maps.event.addListener(marker, 'click', function(e){
    infowindow.open(map, marker);
    // Other stuff goes here...
});

在infowindow google地图中调用javascript

3 个答案: