Google Maps JavaScript API比例多边形保持纵横比

Question

我在地图上绘制了一个多边形。现在我想重新调整多边形的大小以保持纵横比。我不想使用google.maps.Rectangle。

这是我的代码

 var pointsPoly = getPoints(); 
/* */
 var ply = new google.maps.Polygon({
        strokeWeight: 3,
        fillColor: '#5555FF',
        paths: pointsPoly ,
        draggable:true
    });

 for (var i=0; i<pointsPoly.length; i++){
     var marker_scale = {
            map: map,
            icon: iconScale,
            flat: true,
            draggable: true,
            raiseOnDrag: false,
            position: ply.getPath().getAt(i),
            id: i
        };

        var point = new google.maps.Marker(marker_scale);
        google.maps.event.addListener(point, "drag",  
                              update_polygon_closure(ply, i));
         marker_edge[i] = point; 

    }

那么我应该在update_polygon_closure()做什么？

Answer 1

以下是使用 update_polygon_closure 方法的方法。

• 不要使多边形可编辑editable: false。
• 为多边形的每个角创建一个标记。
• 最后，让每个标记都可拖动，并在其上设置一个事件监听器“drag”事件来更新多边形。

用于创建标记和添加事件侦听器的代码：

for (var i=0; i<coordinates.length; i++){
    marker_options.position = coordinates[i];
    var point = new google.maps.Marker(marker_options);

    google.maps.event.addListener(point, "drag", update_polygon_closure(polygon, i));
}

其中update_polygon_closure定义为：

function update_polygon_closure(polygon, i){
    return function(event){
       polygon.getPath().setAt(i, event.latLng); 
    }
}

多边形的完整代码是here。您可以为矩形自定义它。