如何使用 angularjs 在 ngMap 中使用硬编码值绘制多边形

Question

我需要使用硬编码在 google 地图上绘制多边形 values.I 使用了 ngMap ( https://ngmap.github.io/ ) 并使用了 ngMap 的绘图管理器，因为我也想要用户动态绘制多边形。如果我使用绘图管理器，我无法使用硬编码值绘制多边形。还有另一件事，如果用户将标记放在地图上。我需要得到它的坐标。（对于 example:get 警报框或控制台中的坐标）。谁能帮帮我
笨蛋在这里：http://plnkr.co/edit/keRsKthRAwX89WOWeYwZ?p=preview

<ng-map zoom="12" center="28.623457, 77.196452"
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>

Answer 1

1.如何绘制多边形

要显示多边形，请使用 shape 指令并将 name 属性设置为 polygon：

<shape path="{{vm.paths}}"  name="polygon" ></shape>

2。如何通过 Google Maps Drawing Manager

获取标记位置

vm.onMapOverlayCompleted = function (e) {
    if (e.type == google.maps.drawing.OverlayType.MARKER) {
        var pos = e.overlay.getPosition();  //get marker position
        alert(pos.toString());
    }
};

修改示例

var app = angular.module('myapp', ['ngMap']);
app.controller('DrawingManagerCtrl', function () {
    var vm = this;
    vm.paths = "[[28.646359, 77.259623],[28.645153, 77.207438],[28.680098, 77.120921],[28.680098, 77.259623]]";


    vm.onMapOverlayCompleted = function (e) {
        if (e.type == google.maps.drawing.OverlayType.MARKER) {
            var pos = e.overlay.getPosition();
            alert(pos.toString());
        }
    };
});

 <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="12" center="28.623457, 77.196452"
                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>


            <shape path="{{vm.paths}}"  name="polygon" ></shape>
        </ng-map>
</div>

Plunker

如何使用 angularjs 在 ngMap 中使用硬编码值绘制多边形

How to draw polygon using hardcoded values in ngMap using angularjs

google-maps

polygon

google-maps-markers

angularjs

ng-map