我有一个地图,使用ng-map指令,还有一个<drawing-manager>
允许我在地图上绘制形状的地图。
我只想允许我的用户在地图上绘制一个多边形,这是我的HTML:
<div ng-controller="CreateOrderController as vm" map-lazy-load="https://maps.google.com/maps/api/js"
map-lazy-load-params="{{googleMapsUrl}}">
<ng-map zoom="4" center="33.134394, 53.664248"
map-type-id="ROADMAP">
<drawing-manager
on-overlaycomplete="vm.onMapOverlayCompleted()"
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"
drawingControl="true"
drawingMode="null">
</drawing-manager>
</ng-map>
</div>
这是我的控制器:
var vm = this;
$scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=myKeyIsHere&sensor=false&libraries=drawing";
NgMap.getMap().then(function(map) {
vm.map = map;
});
vm.onMapOverlayCompleted = function(e){
var shapePath=e.overlay.getPath().getArray(); //This returns an array of drawn polygon cordinates
//Just for example, here I want to delete the drawn polygon:
$scope.deletePolygon();
};
$scope.deletePolygon = function() {
//According to Google's docs: https://developers.google.com/maps/documentation/javascript/examples/polyline-remove
vm.map.setMap(null);
};
该deletePolygon
函数返回错误:
未捕获的TypeError:vm.map.setMap不是函数
我知道地图对象不包含setMap
函数,但是Google文档说我可以使用以下方法删除多边形形状setMap(null)
关于如何删除/删除多边形的任何想法?
向overlaycomplete
事件的回调函数传递一个类型为type的参数google.maps.drawing.OverlayCompleteEvent
,根据文档,该overlay
参数具有引用新创建的对象的参数。您需要调用.setMap(null)
该对象。因此,您的代码应如下所示:
vm.onMapOverlayCompleted = function(e){
var shapePath= e.overlay.getPath().getArray(); //This returns an array of drawn polygon cordinates
e.overlay.setMap(null); //this will delete any created shape (polygon, polyline, etc) right after it is created. If you want to instead delete it later, just store the reference to overlay and call setMap(null) on it later.
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句