Javascript 自定义按钮与谷歌地图绘图
我正在使用与谷歌地图相关联的绘图工具,方法是:Javascript 自定义按钮与谷歌地图绘图,javascript,google-maps,Javascript,Google Maps,我正在使用与谷歌地图相关联的绘图工具,方法是: var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.Marker, drawingControl: true, drawingControlOptions: { position: google.maps.Contro
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.Marker,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.Top_Center,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
]
},
});
drawingManager.setMap(map);
这很好,但我想知道如何使用自定义按钮代替多边形工具的默认控件。这样,当我按下按钮时,它处于激活状态,当我再次按下按钮时,它将停用
这是我的自定义工具栏:
<div id="toolbar-container" class="toolbar-container">
<div class="toolbar no-select">
<div class="toolbar-button" id="clear-button">Clear Polygon</div>
<div class="toolbar-button" id="polygon-button">Polygon</div>
</div>
</div>
清晰多边形
多边形
我试着查看api,但什么也找不到
作为参考,这是我使用的网站:
在此方面的任何帮助都将不胜感激 中有一个预定义的方法来创建新的自定义控件和事件处理 我已经在initialize()函数中创建了新控件 希望这对你有帮助。。看看我的小提琴
您可以参考,并在谷歌地图上获得一些自定义按钮的想法。我希望我能为这个杰出的例子投票给您更多!
// Create the DIV to hold the control and call the HomeControl() constructor
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(homeControlDiv);
//To set CSS and handling event for the control
function HomeControl(controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'blue';
controlUI.style.height = '23px';
controlUI.style.marginTop = '5px';
controlUI.style.marginLeft = '-9px';
controlUI.style.paddingTop = '1px';
controlUI.style.cursor = 'pointer';
controlUI.title = 'Your Custom function..';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.padding = '11px';
controlText.innerHTML = 'Custom Text';
controlText.style.color = '#fff';
controlUI.appendChild(controlText);
// Setup the click event listeners
google.maps.event.addDomListener(controlUI, 'click', function () {
alert('Your Custom function..');
});
}