无法删除 ui-gmap-google-map 中的选定多边形
Not able to delete selected polygon in ui-gmap-google-map
我可以使用 Google 绘图管理器绘制多个多边形。现在我无法从多个多边形中 select 特定多边形并删除和编辑它。也无法在编辑或删除后获取新数组。
我的demo.js代码如下:
$scope.map = {
center: { latitude: 19.997454, longitude: 73.789803 },
zoom: 10,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
//radius: 15000,
stroke: {
color: '#08B21F',
weight: 2,
opacity: 1
},
fill: {
color: '#08B21F',
opacity: 0.5
},
geodesic: true, // optional: defaults to false
draggable: false, // optional: defaults to false
clickable: false, // optional: defaults to true
editable: false, // optional: defaults to false
visible: true, // optional: defaults to true
control: {},
refresh: "refreshMap",
options: { scrollwheel: true },
Polygon: {
visible: true,
editable: true,
draggable: true,
geodesic: true,
stroke: {
weight: 3,
color: 'red'
}
},
source: {
id: 'source',
coords: {
'latitude': 19.9989551,
'longitude': 73.75095599999997
},
options: {
draggable: false,
icon: 'assets/img/person.png'
}
},
isDrawingModeEnabled: true
};
$scope.drawingManagerOptions = {
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
]
},
circleOptions: {
fillColor: '#BCDCF9',
fillOpacity:0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
},
polygonOptions: {
fillColor: '#BCDCF9',
strokeColor: '#57ACF9',
fillOpacity: 0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
}
};
var coords = [];
var polygon;
$scope.eventHandler = {
polygoncomplete: function (drawingManager, eventName, scope, args) {
polygon = args[0];
var path = polygon.getPath();
for (var i = 0 ; i < path.length ; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
},
};
$scope.removeShape = function () {
google.maps.event.clearListeners(polygon, 'click');
google.maps.event.clearListeners(polygon, 'drag_handler_name');
polygon.setMap(null);
}
而我的HTML代码如下:
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control">
<ui-gmap-marker coords="map.source.coords"
options="map.source.options"
idkey="map.source.id">
</ui-gmap-marker>
<ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" events="eventHandler"></ui-gmap-drawing-manager>
</ui-gmap-google-map>
您可以找到多边形图像以供参考:
现在我想 select 下图中的多边形之一,并想删除或更新它。
一些帮助将非常可观。
通过 ui-google-map 插件的 drawing manager doc, you could get the google.maps.drawing.DrawingManager 对象通过控制属性(放一个对象)
<ui-gmap-drawing-manager control="drawingManagerControl" options="drawingManagerOptions"></ui-gmap-drawing-manager>
和
$scope.drawingManagerControl = {};
//Now get the drawingManager object
var drawingManager = $scope.drawingManagerControl.getDrawingManager();
拥有这个对象是主要工作。
现在您可以查看所需的一切。对于你的情况,你需要 overlaycomplete 事件,它会在你每次绘制形状时监听(=> polygon , circle, polyline)
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
});
newShape
是绘制的新形状,在您的例子中是多边形,因此您可以像 Polygon object 一样使用它,并且可以在本参考中使用您需要的所有内容。
Now I want to select one of polygon from following image and want to
delete or update it.
为此,我们将通过在全局变量中分配它来区分所选的多边形:例如var selectedShape;
现在,为这个绘制的多边形添加一个点击事件侦听器并将其更新为 selectedShape,现在要删除或更新,您可以使用 selectedShape 变量。
var selectedShape;
... ...
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
});
最后,您可以通过将他的地图设置为 null selectedShape.setMap(null);
来删除所选形状,并通过将其可编辑设置为 true 来更新形状 shape.setEditable(true);
最后,为了使这些点击事件成为可能,您需要将所有形状的可点击选项添加为 true。
PS:使用IsReady Service在处理地图之前准备好地图
正在工作的 plunker:https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/
更新:
But how to get all co-ordinates of multiple polygon after edit or
draw.
您的脚本中已经有了这个,在 polygonecomplete ($scope.eventHandler) 中。现在您可以将它添加到 overlaycomplete 事件侦听器中,并且每次更新形状时(请参见下面的代码)
But challenge is how to identify which polygon is edited on the
map and how to update that specific polygon from my array
您可以为每个创建的形状推入一个数组并可以对其进行管理:
...
var allShapes = []; //the array contains all shape, to save in end
....
//get path coords: I use your code there
function getShapeCoords(shape) {
var path = shape.getPath();
var coords = [];
for (var i = 0; i < path.length; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
return coords;
}
....
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
...
// get coordinate of the polygon
var shapeCoords = getShapeCoords(newShape);
// pushing this shape to allShapes array
allShapes.push(newShape);
});
在删除函数中,您可以通过所选形状的索引删除id
//delete selected shape
function deleteSelectedShape() {
if (!selectedShape) {
alert("There are no shape selected");
return;
}
var index = allShapes.indexOf(selectedShape);
allShapes.splice(index, 1);
selectedShape.setMap(null);
}
现在你有了 allShapes 数组,最后你可以循环它然后获取每个坐标并保存在你的数据库中。
我更新了 plunker 并添加了一些调试日志给你看。
github 中的这段代码可能会有所帮助:
https://github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html
我可以使用 Google 绘图管理器绘制多个多边形。现在我无法从多个多边形中 select 特定多边形并删除和编辑它。也无法在编辑或删除后获取新数组。
我的demo.js代码如下:
$scope.map = {
center: { latitude: 19.997454, longitude: 73.789803 },
zoom: 10,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
//radius: 15000,
stroke: {
color: '#08B21F',
weight: 2,
opacity: 1
},
fill: {
color: '#08B21F',
opacity: 0.5
},
geodesic: true, // optional: defaults to false
draggable: false, // optional: defaults to false
clickable: false, // optional: defaults to true
editable: false, // optional: defaults to false
visible: true, // optional: defaults to true
control: {},
refresh: "refreshMap",
options: { scrollwheel: true },
Polygon: {
visible: true,
editable: true,
draggable: true,
geodesic: true,
stroke: {
weight: 3,
color: 'red'
}
},
source: {
id: 'source',
coords: {
'latitude': 19.9989551,
'longitude': 73.75095599999997
},
options: {
draggable: false,
icon: 'assets/img/person.png'
}
},
isDrawingModeEnabled: true
};
$scope.drawingManagerOptions = {
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
]
},
circleOptions: {
fillColor: '#BCDCF9',
fillOpacity:0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
},
polygonOptions: {
fillColor: '#BCDCF9',
strokeColor: '#57ACF9',
fillOpacity: 0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
}
};
var coords = [];
var polygon;
$scope.eventHandler = {
polygoncomplete: function (drawingManager, eventName, scope, args) {
polygon = args[0];
var path = polygon.getPath();
for (var i = 0 ; i < path.length ; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
},
};
$scope.removeShape = function () {
google.maps.event.clearListeners(polygon, 'click');
google.maps.event.clearListeners(polygon, 'drag_handler_name');
polygon.setMap(null);
}
而我的HTML代码如下:
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control">
<ui-gmap-marker coords="map.source.coords"
options="map.source.options"
idkey="map.source.id">
</ui-gmap-marker>
<ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" events="eventHandler"></ui-gmap-drawing-manager>
</ui-gmap-google-map>
您可以找到多边形图像以供参考:
现在我想 select 下图中的多边形之一,并想删除或更新它。
一些帮助将非常可观。
通过 ui-google-map 插件的 drawing manager doc, you could get the google.maps.drawing.DrawingManager 对象通过控制属性(放一个对象)
<ui-gmap-drawing-manager control="drawingManagerControl" options="drawingManagerOptions"></ui-gmap-drawing-manager>
和
$scope.drawingManagerControl = {};
//Now get the drawingManager object
var drawingManager = $scope.drawingManagerControl.getDrawingManager();
拥有这个对象是主要工作。 现在您可以查看所需的一切。对于你的情况,你需要 overlaycomplete 事件,它会在你每次绘制形状时监听(=> polygon , circle, polyline)
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
});
newShape
是绘制的新形状,在您的例子中是多边形,因此您可以像 Polygon object 一样使用它,并且可以在本参考中使用您需要的所有内容。
Now I want to select one of polygon from following image and want to delete or update it.
为此,我们将通过在全局变量中分配它来区分所选的多边形:例如var selectedShape;
现在,为这个绘制的多边形添加一个点击事件侦听器并将其更新为 selectedShape,现在要删除或更新,您可以使用 selectedShape 变量。
var selectedShape;
... ...
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
});
最后,您可以通过将他的地图设置为 null selectedShape.setMap(null);
来删除所选形状,并通过将其可编辑设置为 true 来更新形状 shape.setEditable(true);
最后,为了使这些点击事件成为可能,您需要将所有形状的可点击选项添加为 true。 PS:使用IsReady Service在处理地图之前准备好地图
正在工作的 plunker:https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/
更新:
But how to get all co-ordinates of multiple polygon after edit or draw.
您的脚本中已经有了这个,在 polygonecomplete ($scope.eventHandler) 中。现在您可以将它添加到 overlaycomplete 事件侦听器中,并且每次更新形状时(请参见下面的代码)
But challenge is how to identify which polygon is edited on the map and how to update that specific polygon from my array
您可以为每个创建的形状推入一个数组并可以对其进行管理:
...
var allShapes = []; //the array contains all shape, to save in end
....
//get path coords: I use your code there
function getShapeCoords(shape) {
var path = shape.getPath();
var coords = [];
for (var i = 0; i < path.length; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
return coords;
}
....
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
...
// get coordinate of the polygon
var shapeCoords = getShapeCoords(newShape);
// pushing this shape to allShapes array
allShapes.push(newShape);
});
在删除函数中,您可以通过所选形状的索引删除id
//delete selected shape
function deleteSelectedShape() {
if (!selectedShape) {
alert("There are no shape selected");
return;
}
var index = allShapes.indexOf(selectedShape);
allShapes.splice(index, 1);
selectedShape.setMap(null);
}
现在你有了 allShapes 数组,最后你可以循环它然后获取每个坐标并保存在你的数据库中。
我更新了 plunker 并添加了一些调试日志给你看。
github 中的这段代码可能会有所帮助: https://github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html