Limit the dynamic markers to one

问题:

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

回答1:

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>

Plunker

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>

Plunker