Thi*_*Raj 4 google-maps polygon google-maps-markers angularjs ng-map
我需要使用硬编码值在谷歌地图上绘制多边形。我使用了 ngMap ( https://ngmap.github.io/ ) 并使用了 ngMap 的绘图管理器,因为我也希望用户动态绘制多边形。如果我使用绘图管理器,则无法使用硬编码值绘制多边形。还有另一件事,如果用户将标记放在地图上。我需要得到它的坐标。(例如:获取警告框或控制台中的坐标)。任何人都可以
在这里帮助我Plunker: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>
Run Code Online (Sandbox Code Playgroud)
1.如何绘制多边形
要显示多边形,请使用属性设置为的shape指令:namepolygon
<shape path="{{vm.paths}}" name="polygon" ></shape>
Run Code Online (Sandbox Code Playgroud)
2. 如何通过谷歌地图绘图管理器获取标记位置
vm.onMapOverlayCompleted = function (e) {
if (e.type == google.maps.drawing.OverlayType.MARKER) {
var pos = e.overlay.getPosition(); //get marker position
alert(pos.toString());
}
};
Run Code Online (Sandbox Code Playgroud)
修改示例
<shape path="{{vm.paths}}" name="polygon" ></shape>
Run Code Online (Sandbox Code Playgroud)
vm.onMapOverlayCompleted = function (e) {
if (e.type == google.maps.drawing.OverlayType.MARKER) {
var pos = e.overlay.getPosition(); //get marker position
alert(pos.toString());
}
};
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2112 次 |
| 最近记录: |