Google Maps API V3 determine which button is pressed in maps mousedown event listener -
i have event listener mousedown. event fires same result on left , right button press. how determine mouse button has been pressed ?
google.maps.event.addlistener(map, 'mousedown', function (e) { console.log(e); }
the event (e) returns dm class object , has properties: z, latlng, pixel. returns prototype function stop().
after of head banging, think have workaround solution. better ideas , suggestions appreciated.
i trying mimic google earth's creating path feature in google maps. here experimental code:
function polylinemarker(bounds, image, map) { // initialize properties. this.bounds_ = bounds; this.image_ = image; this.map_ = map; // define property hold image's // div. we'll create div // upon receipt of add() method we'll // leave null now. this.div_ = null; // explicitly call setmap() on overlay this.setmap(map); } polylinemarker.prototype = new google.maps.overlayview(); polylinemarker.prototype.onadd = function() { // note: overlay's receipt of onadd() indicates // map's panes available attaching // overlay map via dom. // create div , set basic attributes. var div = document.createelement('div'); div.style.border = "none"; div.style.borderwidth = "0px"; div.style.position = "absolute"; // create img element , attach div. // var img = document.createelement("img"); // img.src = this.image_; // img.style.width = "100%"; // img.style.height = "100%"; // div.appendchild(img); // set overlay's div_ property div this.div_ = div; // add overlay map via 1 of map's panes. // we'll add overlay overlayimage pane. var panes = this.getpanes(); panes.overlaylayer.appendchild(div); } polylinemarker.prototype.draw = function() { // size , position overlay. use southwest , northeast // position of overlay peg correct position , size. // need retrieve projection overlay this. var overlayprojection = this.getprojection(); // retrieve southwest , northeast coordinates of overlay // in latlngs , convert them pixels coordinates. // we'll use these coordinates resize div. var sw = overlayprojection.fromlatlngtodivpixel(this.bounds_.getsouthwest()); var ne = overlayprojection.fromlatlngtodivpixel(this.bounds_.getnortheast()); // resize image's div fit 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 visibility property must 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);
here demo : http://jsfiddle.net/himal/c6jmu/2/
Comments
Post a Comment