对于角谷歌地图我想它可能只有一个折线从drawingModes而不是例如矩形绘制 [英] For angular google maps I want it possible for only a polyline to be drawn from the drawingModes and not a RECTANGLE for example
本文介绍了对于角谷歌地图我想它可能只有一个折线从drawingModes而不是例如矩形绘制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有关角谷歌地图我想它可能只有一个折线从drawingModes可以得出，而不是例如一个矩形。
我已经得到了实际工作折线和记录绘制完成时。
我只是想隐藏其他的选择。
我采用了棱角分明的版本1与JavaScript，使用角指令和模板。
总之我需要禁用其他绘图选项。
这是我的html：
＆LT; UI-GMAP，谷歌地图中心=config.map.center变焦=config.map.zoom选项=config.map.options事件= config.map.events拖动=真＆GT; ＆LT; UI-GMAP多边形路径=compatiblePolygon行程=polygonConfig.stroke补=polygonConfig.fill适合=真静态=真可见=polygonConfig.visible编辑=polygonConfig.editable拖动=polygonConfig.draggable点击=真事件=polygonConfig.events＆GT;
＆LT; / UI-GMAP多边形＆GT; ＆LT; UI-GMAP标记物模型=compatiblePointsCOORDS ='自我'idKey ='ID'
选项=pointsConfig.options
可点击=真＆GT;
＆LT; / UI-GMAP-标记＆GT; ＆LT; UI-GMAP绘图经理选项=drawingManagerOptions静态=真控=drawingManagerControl事件=config.drawing.events＆GT;＆LT; / UI-GMAP拉-经理＆gt; ＆LT; / UI-GMAP，谷歌地图＆GT;
这是我的指令链路的js code：
angular.module（app.directives）
.directive（地图，[$ rootScope，$超时，$窗口，uiGmapGoogleMapApi，uiGmapIsReady功能（$ rootScope，$超时，$窗口，uiGmapGoogleMapApi，uiGmapIsReady）{
返回{
限制：E，
templateUrl：模板/ map.html
链接：功能（范围，ELEM）{
//隐藏绘图选项
scope.drawingManagerOptions = {
drawingMode：google.maps.drawing.OverlayType.POLYGON，
drawingControl：真实，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
drawingModes：
//google.maps.drawing.OverlayType.MARKER，
//google.maps.drawing.OverlayType.CIRCLE，
//google.maps.drawing.OverlayType.POLYGON，
google.maps.drawing.OverlayType.POLYLINE
//google.maps.drawing.OverlayType.RECTANGLE
]
}，
的PolylineOptions：{
编辑：真
}
}; // TODO - 坐标绘制多边形
scope.drawPolygon =功能（polygonBounds）{
的console.log（drawPolygon）;
的console.log（polygonBounds）;
}; //触发一次绘制多边形完成。
scope.polylinecomplete =功能（DM，名称，范围，OBJ文件）{
变种多边形= OBJ文件[0];
变种坐标= [];
变种多边形= [];
polygons.push（多边形）; 变种polygonBounds = polygon.getPath（）; 对于（VAR I = 0; I＆LT; polygonBounds.length;我++）
{
coordinates.push（{纬度：polygonBounds.getAt（我）.lat（），LNG：polygonBounds.getAt（我）.lng（）}）;
//coordinates.push(new google.maps.LatLng（polygonBounds.getAt（ⅰ）.lat（），polygonBounds.getAt（ⅰ）.lng（）））;
} 的console.log（坐标）;
scope.drawPolygon（polygonBounds）;
}; //设置地图和图纸
scope.config = {
地图：{
放大：12，
泛：真实，
中央： {
纬度：51.5200，
东经：-0.220
}，
选择：{
滚轮：假的，
将streetViewControl：假的，
倾斜：45，
zoomControl，用于：真
}，
事件：{
}，
多边形：[]
}，
画画： {
事件：{
//circlecomplete：scope.polylinecomplete，
//markercomplete：scope.polylinecomplete，
//overlaycomplete：scope.polylinecomplete，
polygoncomplete：scope.polylinecomplete，
polylinecomplete：scope.polylinecomplete，
//rectanglecomplete：scope.polylinecomplete
}
}
};
}
};
}]）;
解决方案
只是删除/注释掉你不希望看到的绘图元素。如果你只想绘制折线，这里是如何做到这一点：
self.drawingManagerOptions = {
drawingMode：google.maps.drawing.OverlayType.POLYGON，
drawingControl：真实，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
drawingModes：
//google.maps.drawing.OverlayType.MARKER，
//google.maps.drawing.OverlayType.CIRCLE，
//google.maps.drawing.OverlayType.POLYGON，
google.maps.drawing.OverlayType.POLYLINE
//google.maps.drawing.OverlayType.RECTANGLE
]
}，
的MarkerOptions：{
可拖动：真
}，
的PolylineOptions：{
编辑：真
}，
rectangleOptions：polyOptions，
circleOptions：polyOptions，
的PolygonOptions：polyOptions
};
For angular google maps I want it possible for only a polyline to be drawn from the drawingModes and not a RECTANGLE for example.
I've got the actual polyline working and recording when the drawing is complete.
I just want to hide the other options.
I'm using angular version 1 with javascript, using an angular directive and template.
In short I need to disable the other drawing options.
This is my html:
<ui-gmap-google-map center="config.map.center" zoom="config.map.zoom" options="config.map.options" events="config.map.events" draggable="true">
<ui-gmap-polygon path="compatiblePolygon" stroke="polygonConfig.stroke" fill="polygonConfig.fill" fit="true" static="true" visible="polygonConfig.visible" editable="polygonConfig.editable" draggable="polygonConfig.draggable" clickable="true" events="polygonConfig.events">
</ui-gmap-polygon>
<ui-gmap-markers models="compatiblePoints" coords="'self'" idKey="'id'"
options="pointsConfig.options"
clickable="true">
</ui-gmap-markers>
<ui-gmap-drawing-manager options="drawingManagerOptions" static="true" control="drawingManagerControl" events="config.drawing.events"></ui-gmap-drawing-manager>
</ui-gmap-google-map>
This is my directive link js code:
angular.module("app.directives")
.directive("map", ["$rootScope", "$timeout", "$window", "uiGmapGoogleMapApi", "uiGmapIsReady", function ($rootScope, $timeout, $window, uiGmapGoogleMapApi, uiGmapIsReady) {
return {
restrict: "E",
templateUrl: "templates/map.html",
link: function (scope, elem) {
//Hides drawing options
scope.drawingManagerOptions = {
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.MARKER,
//google.maps.drawing.OverlayType.CIRCLE,
//google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE
//google.maps.drawing.OverlayType.RECTANGLE
]
},
polylineOptions: {
editable: true
}
};
//TODO - draw polygon with coordinates
scope.drawPolygon = function(polygonBounds){
console.log("drawPolygon");
console.log(polygonBounds);
};
//Fires once polygon drawing is complete.
scope.polylinecomplete = function(dm, name, scope, objs){
var polygon = objs[0];
var coordinates = [];
var polygons = [];
polygons.push(polygon);
var polygonBounds = polygon.getPath();
for (var i = 0; i < polygonBounds.length; i++)
{
coordinates.push({lat: polygonBounds.getAt(i).lat(), lng: polygonBounds.getAt(i).lng()});
//coordinates.push(new google.maps.LatLng(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng()));
}
console.log(coordinates);
scope.drawPolygon(polygonBounds);
};
//Settings for map and drawings
scope.config = {
"map": {
"zoom": 12,
"pan": true,
"center": {
"latitude": 51.5200,
"longitude": -0.220
},
"options": {
"scrollwheel": false,
"streetViewControl": false,
"tilt": 45,
"zoomControl": true
},
"events": {
},
"polygons": []
},
"drawing": {
"events": {
//"circlecomplete": scope.polylinecomplete,
//"markercomplete": scope.polylinecomplete,
//"overlaycomplete": scope.polylinecomplete,
"polygoncomplete": scope.polylinecomplete,
"polylinecomplete": scope.polylinecomplete,
//"rectanglecomplete": scope.polylinecomplete
}
}
};
}
};
}]);
解决方案
Just remove/comment out the drawing elements you dont want to see. If you want to draw only polyline, here is how to do it:
self.drawingManagerOptions = {
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.MARKER,
//google.maps.drawing.OverlayType.CIRCLE,
//google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE
//google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
draggable: true
},
polylineOptions: {
editable: true
},
rectangleOptions: polyOptions,
circleOptions: polyOptions,
polygonOptions: polyOptions
};
这篇关于对于角谷歌地图我想它可能只有一个折线从drawingModes而不是例如矩形绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
