Question

私はjavascriptに新しいがあります。マップでは、オーバーレイがクリックされたときに、そのクリックされたオーバーレイにアクセスできる関数が呼び出されるようにしようとしています。

ここに私のコードがあります。コンソールにエラーはありません。

<div style='width: 800px;'> 
    <div id="multi_overlays" style='width: 1000px; height: 600px;'></div> 
</div> 

<script type="text/javascript"> 
    handler = Gmaps.build('Google'); 

    handler.buildMap({ internal: {id: 'multi_overlays'}}, function(){ 

     var circles = handler.addCircles(
     [{ lat: 41.991873, lng: -70.652213, radius: 2000 }], 
     { strokeColor: '#FF0001'} 
    ); 

     var polylines = handler.addPolylines(
      [ 
      [ 
      ] 
     ], 
     { strokeColor: '#FF0000'} 
    ); 


     var polygons = handler.addPolygons(
      [ 
      //ccb_nw 
       [{lat:41.83,lng:-70.44},{lat:41.87,lng:-70.28},{lat:41.77,lng:-70.49},{lat:41.75,lng:-70.19}], 
      //ccb_se 
       [{lat: 41.984198, lng: -70.319776}, {lat: 41.970926, lng: -70.110349},{lat: 41.825776, lng: -70.164594},{lat: 41.803259, lng: -70.222959}], 
      //ccb_sw 
       [{lat: 41.887260, lng: -72.529131}, {lat: 41.920867, lng: -70.335363},{lat: 41.794781, lng: -70.283835},{lat: 41.783006, lng: -70.498755}], 
      ], 
       { strokeColor: '#FF0000'} 
     ); 


     handler.bounds.extendWith(polylines); 
     handler.bounds.extendWith(polygons); 
     handler.bounds.extendWith(circles); 
     handler.fitMapToBounds(); 

     markers = handler.addMarkers([{"lat":42.30010009999999,"lng":-70.2994764,"infowindow":"Bass bite is picking up"},{"lat":41.6820897,"lng":-69.95976639999999,"infowindow":"Tuna non existent"},{"lat":42.0417525,"lng":-70.6722767,"infowindow":"good trip"},{"lat":42.072454,"lng":-70.206835,"infowindow":"On fire"}]); 
     handler.bounds.extendWith(markers); 
     handler.fitMapToBounds(); 


    }); 
</script> 

私はクリックをリッスンするためにGoogleマップのaddListenerイベントを使用してみました：

handler.addListener('click', function(event){ 
    alert('the map was clicked'); 
}); 

上記のコードは動作しません。オーバーレイは表示されますが、クリックすると何も起こりません。

https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes

しかし、私はそれはオブジェクトが存在しないと言われますoverlayMouseTargetを追加しようとするたびに私はそれが窓ガラスに何かを持っているかもしれないと思います。私は非常に迷っています。オーバーレイをクリック可能にするにはどうすればよいですか？

Answer 1

使用しているマーカー/サークルに設定した変数を使用してリスナーを作成する必要があります。 これはあなたを助ける必要があります。

google.maps.event.addListener(<variable>, 'click', function (event) { 
     handleClick(event); // Your function here 
}); 

私はここに大きな例を持っている：私が正しく理解していれば https://snippetbox.xyz/9eb54a2a1f52dc1f5d41/