事件在谷歌地图V3上点击矩形

Question

我有一个地图,用户可以绘制一些矩形,用户绘制所有矩形后,他们可以点击它们开始一些事件,如显示更多信息,调用Web服务,更改矩形的属性等.

我需要为每个矩形添加一个click事件监听器,我尝试了以下代码,但它不起作用.我也试过这个解决方案.

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(10.066611095611856,-69.33721108996582),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.HYBRID,
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);


var drawingManager = new google.maps.drawing.DrawingManager({
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
      },
      rectangleOptions: {
          fillColor: '#0011aa',
          fillOpacity: 1,
          strokeWeight: 5,
          clickable: false,
          editable: true,
          zIndex: 1
        }
});

drawingManager.setMap(map);

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) {
        /* DOES NOT WORK */
        google.maps.event.addListener(rectangle, 'click', function() {
            console.log(rectangle);
        });
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

谢谢你的提议.

Answer 1

两件事情.首先,您需要使您的矩形可以点击.

  var drawingManager = new google.maps.drawing.DrawingManager({
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
      },
      rectangleOptions: {
          fillColor: '#0011aa',
          fillOpacity: 1,
          strokeWeight: 5,
          clickable: true,
          editable: true,
          zIndex: 1
        }
});

第二.绘图管理器正在绘制时,所有单击侦听器都被禁止.矩形完成后,您需要将绘图模式设置为null.

  google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) {
        drawingManager.setDrawingMode(null);
         /* DOES WORK */
        google.maps.event.addListener(rectangle, 'click', function() {
            console.log(rectangle);
        });
  });