我需要使用硬编码值在谷歌地图上绘制多边形。我使用了 ngMap(https://ngmap.github.io/)并使用了 ngMap 的绘图管理器,因为我还希望用户动态绘制多边形。如果我使用绘图管理器,我无法使用硬编码值绘制多边形。还有一件事,如果用户将标记放在 map 上。我需要得到它的坐标。 (例如:获取警报框或控制台中的坐标)。谁能帮帮我吗
戳这里: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>
最佳答案
1.如何绘制多边形
要显示多边形,请使用 shape
带有 name
的指令属性设置为 polygon
:
<shape path="{{vm.paths}}" name="polygon" ></shape>
2.如何通过谷歌地图绘图管理器获取标记位置
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 - 如何使用 angularjs 在 ngMap 中使用硬编码值绘制多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34631298/