我有一个mousedown的事件监听器。该事件在按下左右按钮时触发相同的结果。如何确定按下了哪个鼠标按钮?
google.maps.event.addListener(map, 'mousedown', function (e) {
console.log(e);
}
事件(e)返回Dm Class对象,并且只有属性: Z,latLng,像素。 它还返回原型函数stop()。
答案 0 :(得分:2)
经过大量的敲击,我认为我有一个解决方案。任何更好的想法和建议都将非常感激。
我试图在Google地图中模仿Google地球的创建路径功能。这是我的实验代码:
function PolylineMarker(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div_ = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
PolylineMarker.prototype = new google.maps.OverlayView();
PolylineMarker.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
// Create an IMG element and attach it to the DIV.
// var img = document.createElement("img");
// img.src = this.image_;
// img.style.width = "100%";
// img.style.height = "100%";
// div.appendChild(img);
// Set the overlay's div_ property to this DIV
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
PolylineMarker.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = (sw.x - 3 ) + 'px';
div.style.top = (ne.y - 3 ) + 'px';
div.style.width = (ne.x - sw.x + 6) + 'px';
div.style.height = (sw.y - ne.y + 6) + 'px';
div.style.background = 'red';
div.style.margin = '0 auto';
}
PolylineMarker.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
// Note that the visibility property must be a string enclosed in quotes
PolylineMarker.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
PolylineMarker.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
}
PolylineMarker.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
} else {
this.hide();
}
}
}
PolylineMarker.prototype.toggleDOM = function() {
if (this.getMap()) {
this.setMap(null);
} else {
this.setMap(this.map_);
}
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 15,
center: new google.maps.LatLng(27.703744, 85.333729),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 1,
map: map,
clickable: false,
icons: [{
'icon': {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
strokeOpacity: 0.8,
strokeWeight: 2,
strokeColor: '#000'
},
'offset': '100%',
'repeat': '100px'
}]
};
var polyline = null;
var mouseMoveHandler = null;
var button = '';
var isMouseReleased = false;
google.maps.event.addDomListener(document.getElementById("map-canvas"), 'mousedown', function(e) {
button = e.button;
isMouseReleased = false;
return false;
});
var mouseDownHandler = google.maps.event.addListener(map, 'mousedown', function (e) {
map.setOptions({
'draggable': false
});
if (!polyline) {
polyline = new google.maps.Polyline(polyOptions);
}
isMouseReleased = false;
setTimeout(function() {
if (! isMouseReleased) {
mouseMoveHandler = google.maps.event.addListener(map, 'mousemove', function (e) {
if (button == 0) {
var path = polyline.getPath();
/**
* Add new overlay
*/
var image = '';
var bounds = new google.maps.LatLngBounds(e.latLng, e.latLng);
var overlay = new PolylineMarker(bounds, image, map);
path.push(e.latLng);
}
e.stop();
});
}
}, 100);
e.stop();
});
google.maps.event.addListener(map, 'mouseup', function (e) {
isMouseReleased = true;
google.maps.event.clearListeners(map, 'mousemove');
google.maps.event.removeListener(mouseMoveHandler);
if (button == 0) {
polyline.getPath().push(e.latLng);
/**
* Add new overlay
*/
var image = '';
var bounds = new google.maps.LatLngBounds(e.latLng, e.latLng);
var overlay = new PolylineMarker(bounds, image, map);
map.setOptions({
'draggable': true
});
}
e.stop();
});
} // end of initialize function
google.maps.event.addDomListener(window, 'load', initialize);
答案 1 :(得分:0)
这是事件对象的属性,大多数人将其标记为e 在他们的事件处理程序中。它包含密钥的密钥代码 按下以触发事件。
根据你的代码添加它。
google.maps.event.addListener(map, 'mousedown', function (e) {
console.log(e.which);
}
检查控制台:
左键点击:1
中键点击:2
右键单击:3
检查Google docs后,您可以直接使用鼠标事件,而不是获取鼠标键码。
答案 2 :(得分:0)
直接转到其对象。 但 google是我不知道更改对象var名称(xa,ta,ha ...)的原因,因此按其位置获取它会更加安全,并且可以防止您不得不更改它时。这对我有用:
google.maps.event.addListener(map, 'mousedown', function (e) {
console.log('Button: ' + Object.value(e)[1].which);
}
控制台:
按钮:1