Google Maps API V3确定在地图mousedown事件侦听器中按下了哪个按钮

时间:2013-07-11 04:20:12

标签: google-maps google-maps-api-3

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

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

事件(e)返回Dm Class对象,并且只有属性: Z,latLng,像素。 它还返回原型函数stop()。

3 个答案:

答案 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);

以下是我的演示:http://jsfiddle.net/himal/C6jMU/2/

答案 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