我有一个 mousedown 事件监听器。该事件在按下左右按钮时触发相同的结果。如何确定按下了哪个鼠标按钮？
google.maps.event.addListener(map, 'mousedown', function (e) {
console.log(e);
}
事件 (e) 返回 Dm 类对象，并且仅具有以下属性：Z、latLng、像素。它还返回原型函数 stop()。
问问题
2360 次
3 回答
2
经过大量的头部撞击之后，我想我有一个解决方案的解决方法。任何更好的想法和建议将不胜感激。
我试图在谷歌地图中模仿谷歌地球的创建路径功能。这是我的实验代码：
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);
这是我的演示：http: //jsfiddle.net/himal/C6jMU/2/
于 2013-07-11T09:56:13.827 回答
0
这是事件对象的一个属性，大多数人在他们的事件处理程序中将其标记为 e。它包含被按下以触发事件的键的键码。
根据您的代码将其添加到其中。
google.maps.event.addListener(map, 'mousedown', function (e) {
console.log(e.which);
}
检查控制台：
左键单击：1
中键单击：2
右键单击：3
检查Google 文档后，您可以直接使用他们的鼠标事件，而不是获取鼠标键码。
于 2013-07-11T04:31:25.033 回答
0
直接找到它的对象。但是谷歌因为我不知道更改对象变量名称（xa，ta，ha ...）的原因，所以通过它的位置获取它更安全，并且可以防止您不时更改它。这对我有用：
google.maps.event.addListener(map, 'mousedown', function (e) {
console.log('Button: ' + Object.value(e)[1].which);
}
安慰：
按钮：1
于 2018-07-02T17:37:35.193 回答