javascript - Google Maps API v3 重绘之前保存的可编辑和可选形状

Question

我创建了一个应用程序，可以在 map 上绘制形状，并且可以编辑和选择它们。

这是通过向绘图管理器添加“overlaycomplete”监听器并编写用于设置所选形状或清除选择或删除形状的函数来实现的:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {

        drawingManager.setDrawingMode(null);

        var shape = e.overlay;
        shape.type = e.type;

        google.maps.event.addListener(shape, 'click', function() {
            select(shape);
          });

所有形状的详细信息都可以保存在数据库中。我现在需要使用相同的形状重新创建 map ，这些形状应该可以再次编辑。从数据库加载详细信息后，我重新创建了形状，但似乎无法在它们上设置监听器以便使用与之前使用的相同的功能。通过指定形状即可简单地重新绘制:

shape = new google.maps.Polygon({
                map: map,
                paths: paths,
                zIndex: 90,
                strokeWeight: 0,
                fillColor: color,
                fillOpacity: 0.65,
                editable: true
              });

以这种方式绘制形状后，它们是可编辑的，但我无法一次选择一个形状，例如删除它。 IE。无法使用之前编写的函数来操作形状。

有没有办法设置监听器？

Answer 1

我已经找到了解决我的问题的方法。我保存的形状是通过循环绘制的，并且始终有一个变量名称，该名称在循环运行时递增。因此，当循环运行时，我在每个形状上设置 map 监听器:

varString = "shape"+i;

    //Output shape
    window[varString] = new google.maps.Polygon({
                map: map,
                paths: paths,
                zIndex: 90,
                strokeWeight: 0,
                fillColor: color,
                fillOpacity: 0.65,
                myIndex: i,
                editable: true
              });

    google.maps.event.addListener(window[varString],"mouseout",function(){
                 path = this.getPath();
                 area = google.maps.geometry.spherical.computeArea(path);
                                     alert("area");
                });

现在我可以在每个形状上设置相同的功能，并且用户可以像以前一样编辑它们，主要区别在于现在不可能使用“选择”功能，并且所有形状似乎都被“选择”了次(可拖动的 Angular 上的点在所有形状上始终可见)。