在谷歌地图V3上，如何实现点击事件响应矩形？

Question

在谷歌地图V3上，如何实现点击事件响应矩形？

jquerygoogle-mapseventsgoogle-maps-api-3click

3

我有一张地图，用户可以在上面画一些矩形，当用户画完所有的矩形后，他们可以点击这些矩形来启动一些事件，比如显示更多信息、调用 Web 服务、更改矩形属性等等。

我需要为每个矩形添加一个点击事件监听器，我尝试了以下代码，但它没有起作用。我还尝试了这个解决方案。

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

提前感谢。

- Andres

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ffflabs · Accepted Answer

有两件事。首先，您需要使您的矩形可点击。

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

其次，当绘图管理器在绘制时，所有的点击监听器都会被禁止。你需要在矩形绘制完成后将绘图模式设置为空。

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