自定义图形控件[Google地图v3绘图库]

我正在使用Google Maps API的绘图库，我想用自定义按钮触发标记的绘制。自定义图形控件[Google地图v3绘图库]

我已经阅读文档的这一部分：

隐藏绘图控制使绘图工具控制为不显示，但所有的DrawingManager类的功能仍然可用。这样，如果需要，您可以实施自己的控制。从地图对象中移除DrawingManager将禁用所有绘图功能;如果要恢复绘图要素，则必须使用drawingManager.setMap（map）将其重新附加到地图上，或者创建一个新的DrawingManager对象。

但我找不出如何使用DrawingManager来做到这一点。

来源

2012-02-23 tdurand

按钮点击：

接通绘图标记： drawingManager.setDrawingMode（google.maps.drawing.OverlayType.MARKER）;

关闭： drawingManager.setDrawingMode（null）;

来源

2012-02-23 20:56:40 user1226919

谢谢，这是我一直在寻找;-) – tdurand 2012-02-24 02:45:28

同样适用于，OverlayType.CIRCLE， OverlayType.POLYGON – Sam 2015-10-05 10:24:29

您可以：

创建的DrawingManager不受管制，或某些控件被忽略，那么
添加自定义按钮它们，然后
添加处理这些按钮来触发函数@ user1226919提到。

例子：

var drawingManager = new google.maps.drawing.DrawingManager({ 
    drawingControl: false 
}); 
drawingManager.setMap(map); 

// drawingManager is now ready 

var marker_btn = document.createElement("button"); 
marker_btn.innerHTML = "Create Marker"; 

// add handlers 
marker_btn.addEventListener("click", (function() { 
    // closure handles local toggle variables 
    var toggled = false; 
    var originalHTML = marker_btn.innerHTML; 
    return function (e) { 
     if (toggled) { 
      drawingManager.setDrawingMode(null); 
      e.target.innerHTML = originalHTML; 
     } else { 
      drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER); 
      e.target.innerHTML = "Cancel"; 
     } 
     toggled = !toggled; 
    } 
})()); 

// add button to map controls 
map.controls[ google.maps.ControlPosition.TOP_CENTER ].push(marker_btn);

退房具有自定义多边形按钮的工作示例：https://codepen.io/bozdoz/pen/jZNXNP?editors=0010

来源

2018-01-28 21:53:42 bozdoz

自定义图形控件[Google地图v3绘图库]

回答

相关问题