Google Maps API v3重绘以前保存的可编辑和可选择的形状

时间:2012-09-27 12:54:28

标签: javascript google-maps maps

我创建了一个应用程序,可以在地图上绘制形状,它们是可编辑的,可以选择。

这是通过向绘图管理器添加“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);
          });

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

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

以这种方式绘制形状后,它们是可编辑的,但我不能一次选择一个形状,以便例如删除它。即。使用先前编写的函数无法操纵形状。

有没有办法设置一个监听器?

1 个答案:

答案 0 :(得分:0)

我找到了解决问题的方法。我保存的形状是由循环绘制的,并且总是有一个变量名称,在循环运行时会增加。当循环运行时,我因此在每个形状上设置映射侦听器:

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

现在我可以在每个形状上设置相同的功能,用户可以像以前一样编辑它们,主要区别在于现在不能使用“选择”功能,所有形状看起来都是“全部”选中的时间(可以拖动的角落上的点在所有形状上始终可见)。