Fatal编程技术网
  • javascript/
  • 在infowindowgooglemap中调用javascript

在infowindowgooglemap中调用javascript

javascript google-maps

在infowindowgooglemap中调用javascript,javascript,google-maps,Javascript,Google Maps,我试图在google map infoWindow（）中调用javascript。我知道这是个经典问题。我在stackoverflow上读过很多类似的问题，但我找不到解决方法：（ 我的代码： <!DOCTYPE> <html> <head> <link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/

我试图在google map 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> 


矩形覆盖
#映射{
宽度：1200px；
高度：700px；
} 
函数init（）{
变量myOptions={
中心：新google.maps.LatLng（38.12240423.862591），
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP
}; 
var map=new google.maps.map（document.getElementById（'map'），myOptions）；
变量位置=[
['Bondi Beach'，38.6391,23.3437]，
[“警报（‘测试’）；”，37.893，23.936999998]
];
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i
有人知道如何解决这个问题吗

谢谢大家!

编辑：

这个问题的答案是正确的。 事实上，我需要运行的javascript是在infowindow中构建一个cloudword，调用TermCloud（）函数。我尝试下面的代码。有什么想法吗

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


矩形覆盖
#映射{
宽度：1200px；
高度：700px；
} 
函数init（）{
变量myOptions={
中心：新google.maps.LatLng（38.12240423.862591），
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP
}; 
var map=new google.maps.map（document.getElementById（'map'），myOptions）；
变量位置=[
['Bondi Beach'，38.6391,23.3437]，
[“你好”，37.893，23.936999998]
];
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i
我认为调用函数click listener应该可以工作（但尚未测试）：

然后，除了所有谷歌地图的东西

var YourFunction = function() {
    this.init = function() {
        alert("You have clicked a marker");
    }
    this.init();
}
找到了一个解决方案--将infoWindow内容包装到一个div中，并在“domready”事件中为该div的id添加一个侦听器（请参见此）：

var infowindow=new google.maps.infowindow({
内容：'+myContent+''
});
google.maps.event.addListener（infowindow，'domready'，function（）{
$（'#myInfoWinDiv'）。单击（函数（）{
//做你的事
});
});
在我的示例中，使用jQuery将一个click处理程序附加到div。您可以将任何JS放入domready事件处理程序中。这需要在infoWindow的domready中完成，否则您无法确定对象是否已创建。

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

var infowindow=new google.maps.infowindow({
内容：'+myContent+''
});
google.maps.event.addListener（标记，'click'，函数（e）{
信息窗口。打开（地图、标记）；
//其他东西在这里。。。
});
是您正在寻找的吗？您在控制台中看到任何错误吗？控制台中没有错误请回答！但我有一个新问题。请参见编辑！太短，无法编辑，但您缺少
）
在倒数第二个
}
之后。感谢您的关注，GooseI不想用评论来表达感谢，但我必须说谢谢。这个答案让我的网络游戏完全成为可能。非常感谢。 
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
    });
});

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