Question

在下面的plunker中，我可以通过选择标记工具添加这么多标记。但我需要将其限制为只有一个。添加一个标记后，它应该禁用或用户不能在地图上放置另一个标记。
我使用过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>

plunker在这里：http://plnkr.co/edit/Hboz7DnD30JZAiNgD1G5?p=preview

Answer 1

以下已修改示例演示了在地图上添加标记后如何从绘图控件中删除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>

Plunker

选项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>

Plunker

将动态标记限制为一个

1 个答案:

选项2