如何获取编辑形状的新坐标并动态计算中心
How to get new coordinates of the edited shape and calculate the center dynamically
我在我的应用程序中使用 ngmap
。我能够使用 shape
从其坐标显示多边形。现在我想让这个多边形可编辑。我引用了这个 link,我的多边形现在可以编辑了。问题是我找不到如何获取新坐标。
在drawing-manager
中有onMapOverlayCompleted
这样的事件吗?
如何获取新坐标?
还有如何动态计算 center
属性的值
这取决于形状类型,在 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>
我在我的应用程序中使用 ngmap
。我能够使用 shape
从其坐标显示多边形。现在我想让这个多边形可编辑。我引用了这个 link,我的多边形现在可以编辑了。问题是我找不到如何获取新坐标。
在drawing-manager
中有onMapOverlayCompleted
这样的事件吗?
如何获取新坐标?
还有如何动态计算 center
属性的值
这取决于形状类型,在 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>