如何獲取已編輯形狀的新座標並動態計算中心

Question

我在我的應用程序中使用了ngmap。我能夠使用shape從座標顯示多邊形。現在我想讓這個多邊形可編輯。我引用了這個link，我的多邊形現在是可編輯的。問題是我找不到新的座標。

在drawing-manager中是否有任何事件爲onMapOverlayCompleted？

如何獲得新座標？

而且我怎麼能計算center屬性的值動態

Answer 1

這取決於形狀的類型，在Rectangle情況來確定調整大小界限，你可以利用bounds_changed事件。下面的例子演示如何打印矩形的尺寸調整後的尺寸：

var app = angular.module('myapp', ['ngMap']); 
 
app.controller('DrawingManagerCtrl', function (NgMap) { 
 
    var vm = this; 
 
    
 
    NgMap.getMap().then(function (map) { 
 
      vm.map = map; 
 
    }); 
 

 
    
 

 
    vm.rectShapeResized = function (e) { 
 
     var rect = vm.map.shapes[0]; //get the first instance of shape 
 
     console.log(rect.getBounds().toString()); //print a new bounds 
 
    }; 
 
});

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script> 
 
<script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 

 

 
<div ng-app="myapp" ng-controller="DrawingManagerCtrl as vm"> 
 
    <ng-map zoom="7" center="48.8588377,2.2775177" map-type-id="ROADMAP" street-view-control-options="{position: 'LEFT_CENTER'}"> 
 
     
 
     <shape name="rectangle" 
 
      editable="true" on-bounds_changed="vm.rectShapeResized()" 
 
      bounds="[ [48.190, 2.649], [48.899, 3.443] ]"> 
 
      </shape> 
 
    </ng-map> 
 
</div>