将动态标记限制为一个
Limit the dynamic markers to one
在下面的插件中,我可以通过选择标记工具来添加这么多标记。但我需要将它限制为只有一个。添加一个标记后,它应该禁用或用户不应该能够在地图上放置另一个标记。
我用过 ngMap https://ngmap.github.io/ 。谁能帮帮我
<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>
以下修改后的示例演示了如何在地图上添加标记后从绘图控件中删除marker mode
(以防止用户添加另一个标记)
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>
选项 2
另一种方法是在呈现第一个标记后禁止标记在地图上显示:
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>
在下面的插件中,我可以通过选择标记工具来添加这么多标记。但我需要将它限制为只有一个。添加一个标记后,它应该禁用或用户不应该能够在地图上放置另一个标记。
我用过 ngMap https://ngmap.github.io/ 。谁能帮帮我
<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>
以下修改后的示例演示了如何在地图上添加标记后从绘图控件中删除marker mode
(以防止用户添加另一个标记)
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>
选项 2
另一种方法是在呈现第一个标记后禁止标记在地图上显示:
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>