6

Google マップの 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 は、情報ウィンドウ内で TermCloud() function を呼び出すクラウドワードを作成することです。以下のコードを試します。何かアイデアをください???

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

3 に答える 3

8

解決策を見つけました - infoWindow コンテンツを div でラップし、その div の id の「domready」イベントにリスナーを追加します (このSO スレッドを参照):

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 にアタッチされています。domready イベント ハンドラーには任意の JS を配置できます。infoWindow の domready で実行する必要があります。そうしないと、オブジェクトが作成されたことを確認できません。

于 2013-11-30T00:40:16.307 に答える
2

関数クリックリスナーを呼び出すとうまくいくはずです（ただし、テストしていません）：

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

次に、すべてのGoogleマップのものの外に

var YourFunction = function() {
    this.init = function() {
        alert("You have clicked a marker");
    }
    this.init();
}
于 2013-09-11T13:00:58.197 に答える