mousedown のイベントリスナーがあります。このイベントは、左右のボタンを押したときに同じ結果を発生させます。どのマウス ボタンが押されたかを確認するにはどうすればよいですか?
google.maps.event.addListener(map, 'mousedown', function (e) {
console.log(e);
}
イベント (e) は Dm Class オブジェクトを返し、Z、latLng、pixel のプロパティのみを持ちます。また、プロトタイプ関数 stop() も返します。
多くの頭をぶつけた後、この解決策の回避策があると思います。より良いアイデアや提案をいただければ幸いです。
Google マップで Google Earth のパス作成機能を模倣しようとしていました。これが私の実験コードです：
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/
これはイベント オブジェクトのプロパティであり、ほとんどの人はイベント ハンドラで e とラベル付けします。イベントをトリガーするために押されたキーのキーコードが含まれています。
コードに従って、それに which を追加します。
google.maps.event.addListener(map, 'mousedown', function (e) {
console.log(e.which);
}
コンソールを確認します。
左クリック: 1
中ボタンクリック: 2
右クリック: 3
Google docsを確認した後、マウスのキーコードを取得する代わりに、マウスイベントを直接使用できます。