Google地图叠加可点击

时间:2016-05-10 22:48:28

标签: javascript google-maps google-maps-api-3 google-api

我是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 Maps addListener事件来监听点击次数:

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

上述代码不起作用。显示叠加层但单击它们时没有任何反应。我认为它可能与窗格有关:

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

但每次我尝试添加overlayMouseTarget时,它都会告诉我该对象不存在。我很失落。如何使叠加层可点击?

1 个答案:

答案 0 :(得分:-1)

您需要使用为正在使用的标记/圆圈设置的变量来创建侦听器。 这应该可以帮到你:

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

我在这里有一个更大的例子: https://snippetbox.xyz/9eb54a2a1f52dc1f5d41/