在 Google 地图 V3 上选择多边形

Question

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

企业主/管理员可以通过在 google 地图上将它们绘制为多边形来创建新区域。

我能够绘制多边形，select 在它们之间获取坐标并毫无问题地保存它们。

然而，当我尝试获取存储在数据库中的现有坐标并将它们绘制在屏幕上时，它们可以正确呈现，但我无法 select 它们。

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

我用来绘制现有坐标的代码是

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

我使用绘图管理器在屏幕上绘制多边形的代码也来自 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);

由于我使用的函数 select 在多边形之间使用绘图管理器检查覆盖是否完成，

google.maps.drawing.OverlayType.POLYGON

我无法select使用

绘制的多边形

google.maps.Polygon

所以 tldr

1 ) 如何检查我是否在 google 地图上 select 多边形？

或

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

谢谢。

Answer 1

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

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

检查文档 Polygon methods and events。

在 Google 地图 V3 上选择多边形

Selecting Polygon on Google Maps V3

javascript

google-maps

google-maps-api-3

geolocation

maps