限制动态标记一 [英] Limit the dynamic markers to one
本文介绍了限制动态标记一的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面plunker，我可以通过选择标记工具添加这么多的标记。但我需要限制到只有一个。添加一个标记后，应禁用或用户不应该能够把另一个标记在地图上。结果
我已经使用ngMap https://ngmap.github.io/ 。任何人都可以请帮我
＆LT; NG-地图缩放=13中心=37.774546，-122.433523
图型-ID =路线图
街道视图 - 控制选项={位置：LEFT_CENTER'}＆GT;
＆LT;拉丝经理
上overlaycomplete =vm.onMapOverlayCompleted（）
绘图控制选项={位置：TOP_CENTER'，drawingModes：['多边形'，'标记']}
drawingControl =真
drawingMode =空 rectangleOptions ={填充颜色：红色}
circleOptions ={填充颜色：＃FFFF00，fillOpacity：1，strokeWeight，用于：5，可点击：假的，zIndex的：1，可编辑：真正}＆GT;
＆LT; /绘图经理＆gt;
该plunker是在这里： http://plnkr.co/edit/Hboz7DnD30JZAiNgD1G5?p=preVIEW
解决方案
下面的修改的例子演示了如何从绘图控制删除标记模式一旦标记在地图上添加（，以prevent如加标记的用户的）
\r
\r\r
\r VAR应用= angular.module（'MyApp的'，['ngMap']） ;\r
app.controller（'DrawingManagerCtrl'，函数（）{\r
VAR VM =这一点;\r
\r
vm.drawingControlOptions = {\r
位置：TOP_CENTER'，\r
drawingModes：['多边形'，'标记']\r
}\r
\r
vm.onMapOverlayCompleted =功能（E）{\r
\r
如果（e.type == google.maps.drawing.OverlayType.MARKER）{\r
vm.drawingControlOptions.drawingModes.splice（1，1）; //删除标记模式\r
}\r
};\r
}）; \r
＆LT;脚本src=\"https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places\"></script>\r
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.3.15/angular.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;脚本src=\"https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js\"></script>\r
＆LT; DIV NG-应用程序=的myappNG控制器=DrawingManagerCtrl为VM＆GT;\r
＆LT; NG-地图缩放=13中心=37.774546，-122.433523\r
图型-ID =路线图\r
街道视图 - 控制选项={位置：LEFT_CENTER'}＆GT;\r
＆LT;拉丝经理上overlaycomplete =vm.onMapOverlayCompleted（）\r
绘图控制选项={{vm.drawingControlOptions}}\r
drawingControl =真\r
drawingMode =空\r
rectangleOptions ={填充颜色：红色}\r
circleOptions ={填充颜色：＃FFFF00，fillOpacity：1，strokeWeight，用于：5，可点击：假的，zIndex的：1，可编辑：真正}＆GT;\r
＆LT; /绘图经理＆gt;\r
＆LT; / NG-地图＆GT;\r
＆LT; / DIV＆GT; \r
选项2
另一种方法是从一旦第一标记被渲染在地图上显示禁止标志：
\r
\r\r
\r VAR应用= angular.module（'MyApp的'，['ngMap']） ;\r
app.controller（'DrawingManagerCtrl'，函数（）{\r
VAR VM =这一点;\r
vm.markersCounter = 0;\r
vm.onMapOverlayCompleted =功能（E）{\r
如果（e.type == google.maps.drawing.OverlayType.MARKER）{\r
vm.markersCounter ++;\r
如果（vm.markersCounter→1）\r
e.overlay.setMap（NULL）; //从diplaying禁止标志..\r
}\r
};\r
}）; \r
＆LT;脚本src=\"https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places\"></script>\r
＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.3.15/angular.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;脚本src=\"https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js\"></script>\r
＆LT; DIV NG-应用程序=的myappNG控制器=DrawingManagerCtrl为VMNG点击=disableClick（1）＆GT;\r
＆LT; NG-地图缩放=13中心=37.774546，-122.433523\r
图型-ID =路线图\r
街道视图 - 控制选项={位置：LEFT_CENTER'}＆GT;\r
＆LT;拉丝经理上overlaycomplete =vm.onMapOverlayCompleted（）\r
上点击=vm.onClicked（）\r
绘图控制选项={位置：TOP_CENTER'，drawingModes：['多边形'，'标记']}\r
drawingControl =真\r
drawingMode =空\r
rectangleOptions ={填充颜色：红色}\r
circleOptions ={填充颜色：＃FFFF00，fillOpacity：1，strokeWeight，用于：5，可点击：假的，zIndex的：1，可编辑：真正}＆GT;\r
＆LT; /绘图经理＆gt;\r
＆LT; / NG-地图＆GT;\r
＆LT; / DIV＆GT; \r
In the below plunker, i can add so many markers by selecting marker tool. But i need to limit it to only one. after adding one marker it should disable or the user should not be able to put another marker on map.
i have used ngMap https://ngmap.github.io/ . can anyone please help me
<ng-map zoom="13" center="37.774546, -122.433523"
map-type-id="ROADMAP"
street-view-control-options="{position: 'LEFT_CENTER'}">
<drawing-manager
on-overlaycomplete="vm.onMapOverlayCompleted()"
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','marker']}"
drawingControl="true"
drawingMode="null"
rectangleOptions="{fillColor:'red'}"
circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}" >
</drawing-manager>
the plunker is here : http://plnkr.co/edit/Hboz7DnD30JZAiNgD1G5?p=preview
解决方案
The following modified example demonstrates how to remove marker mode from drawing control once the marker is added on map (in order to prevent the user from adding another markers)
var app = angular.module('myapp', ['ngMap']);
app.controller('DrawingManagerCtrl', function () {
var vm = this;
vm.drawingControlOptions = {
position: 'TOP_CENTER',
drawingModes: ['polygon', 'marker']
}
vm.onMapOverlayCompleted = function (e) {
if (e.type == google.maps.drawing.OverlayType.MARKER) {
vm.drawingControlOptions.drawingModes.splice(1, 1); //remove marker mode
}
};
});
<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="13" center="37.774546, -122.433523"
map-type-id="ROADMAP"
street-view-control-options="{position: 'LEFT_CENTER'}">
<drawing-manager on-overlaycomplete="vm.onMapOverlayCompleted()"
drawing-control-options="{{vm.drawingControlOptions}}"
drawingControl="true"
drawingMode="null"
rectangleOptions="{fillColor:'red'}"
circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
</drawing-manager>
</ng-map>
</div>
Option 2
Another approach would be to disable marker from displaying on map once the first marker is rendered:
var app = angular.module('myapp', ['ngMap']);
app.controller('DrawingManagerCtrl', function () {
var vm = this;
vm.markersCounter = 0;
vm.onMapOverlayCompleted = function (e) {
if (e.type == google.maps.drawing.OverlayType.MARKER) {
vm.markersCounter++;
if (vm.markersCounter > 1)
e.overlay.setMap(null); //disable marker from diplaying ..
}
};
});
<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-click="disableClick(1)">
<ng-map zoom="13" center="37.774546, -122.433523"
map-type-id="ROADMAP"
street-view-control-options="{position: 'LEFT_CENTER'}">
<drawing-manager on-overlaycomplete="vm.onMapOverlayCompleted()"
on-click="vm.onClicked()"
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','marker']}"
drawingControl="true"
drawingMode="null"
rectangleOptions="{fillColor:'red'}"
circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
</drawing-manager>
</ng-map>
</div>
这篇关于限制动态标记一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
