在谷歌地图V3上选择多边形

Question

我的项目是为在线商务创建一个区域管理模块。

商家/管理员可以在谷歌地图上绘制POLYGONS来创建新的区域。

我能够绘制多边形，选择它们，获取坐标并保存，没有任何问题。

但是当我尝试从数据库中获取现有坐标并将它们绘制在屏幕上时，它们会被正确渲染，但我无法选中它们。

我一直在使用谷歌的代码示例来测试功能。

我用于绘制现有坐标的代码如下：

var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];

// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});

bermudaTriangle.setMap(map);
}

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

我正在使用Drawing Manager在屏幕上绘制多边形的代码也来自Google的示例。

function initialize() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(22.344, 114.048),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      zoomControl: true
    });

    var polyOptions = {
      strokeWeight: 0,
      fillOpacity: 0.45,
      editable: true
    };
    // Creates a drawing manager attached to the map that allows the user to draw
    // markers, lines, and shapes.
    drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      markerOptions: {
        draggable: true
      },
      polylineOptions: {
        editable: true
      },
      rectangleOptions: polyOptions,
      circleOptions: polyOptions,
      polygonOptions: polyOptions,
      map: map
    });

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        if (e.type != google.maps.drawing.OverlayType.MARKER) {
        // Switch back to non-drawing mode after drawing a shape.
        drawingManager.setDrawingMode(null);

        // Add an event listener that selects the newly-drawn shape when the user
        // mouses down on it.
        var newShape = e.overlay;
        newShape.type = e.type;
        google.maps.event.addListener(newShape, 'click', function() {
          setSelection(newShape);
        });
        setSelection(newShape);
      }
    });

    // Clear the current selection when the drawing mode is changed, or when the
    // map is clicked.
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    google.maps.event.addListener(map, 'click', clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

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

由于我使用的函数用于通过绘图管理器检查覆盖完整性来选择多边形。

google.maps.drawing.OverlayType.POLYGON

我无法选择使用绘图工具绘制的多边形

google.maps.Polygon

简而言之：

1）如何在谷歌地图上检查是否选择了多边形？

或者

2）如何使用绘图管理器绘制预定义的多边形点？

谢谢。

- Javid

---

“选择多边形”是什么意思？点击它吗？ - MrUpsidown

你是否有多个初始化函数？能否提供一个最小、完整、可测试和易读的示例，以演示问题？我在发布的代码中遇到了JavaScript错误Uncaught ReferenceError: clearSelection is not defined。 - geocodezip

Uncaught ReferenceError: deleteSelectedShape is not defined - geocodezip

通过单击多边形来选择它。 - Javid

工作代码：http://codepen.io/anon/pen/qEvGYE - Javid

Answer 1

为多边形添加点击事件监听器并获取其路径：

google.maps.event.addListener(bermudaTriangle, 'click', function () {
    var polygonPaths = this.getPaths();
});

请查看详细记录的多边形方法和事件。

- MrUpsidown

---

我已经在 CodePen 上尝试过，并写了一段可解决我的问题的代码。http://codepen.io/anon/pen/qEvGYE - Javid