google-maps - Google Maps API V3 确定在 map mousedown 事件监听器中按下哪个按钮

Question

我有一个 mousedown 事件监听器。按下左右按钮时，该事件会触发相同的结果。如何确定按下了哪个鼠标按钮？

google.maps.event.addListener(map, 'mousedown', function (e) {
  console.log(e);
}

事件 (e) 返回 Dm 类对象，并且仅具有以下属性: Z、纬度、像素。 它还返回原型(prototype)函数stop()。

Answer 1

经过一番绞尽脑汁，我想我已经找到了解决这个问题的方法。如果有更好的想法和建议，我们将不胜感激。

我试图模仿 Google 地球在 Google map 中创建路径的功能。这是我的实验代码:

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/