我正在使用谷歌地图应用程序接口V3与绘图管理器,以添加和保存标记到地图。它可以很好地与默认的绘图管理器工具配合使用。我将drawingMode设置为null,因此在单击标记按钮之前它是不活动的-这适用于默认设置。
我现在有了自己的自定义HTML按钮,当单击它时,它会激活绘图管理器标记工具:
<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>
我的Javascript是:
document.getElementById('add-event-button').onclick = function()
{
drawingMode: google.maps.drawing.OverlayType.MARKER;
}
但是当它被点击时,它什么也不做,并且返回0错误。我换掉了
drawingMode: google.maps.drawing.OverlayType.MARKER;
使用
alert("button was clicked ");
要查看它是否正在读取按钮,请单击它,然后它就可以工作了。那么应该添加什么来激活标记工具呢??
发布于 2015-03-05 04:02:52
这对我来说很有效(不需要jquery):
document.getElementById('add-event-button').onclick = function() {
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
}
工作代码片段:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
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.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
document.getElementById('add-event-button').onclick = function() {
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>
<div id="map-canvas"></div>
发布于 2015-03-05 01:01:00
您可能需要通过drawingManager setOptions方法来执行此操作,例如:
drawingManager.setOptions({
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.MARKER]
}
});
所以在你的例子中:
document.getElementById('add-event-button').onclick = function()
{
drawingManager.setOptions({
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.MARKER]
}
});
}
发布于 2015-03-05 01:16:11
$("#add-event-button").click( function(){
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
});
https://stackoverflow.com/questions/28860132
复制相似问题