VEMap Pan triggers VEMap.onclick

Question

I'm using the Virtual Earth (or Bing!...) SDK and need to attach an event when someone clicks the map. Unfortunately panning the map also triggers the onclick event. Does anyone know of a work around?

function GetMap(){
map = new VEMap('dvMap');
map.LoadMap(new VELatLong(35.576916524038616,-80.9410858154297), 11, 'h',false);
mapIsInit = true;
map.AttachEvent('onclick', MapClick);

} function MapClick(e){ var clickPnt = map.PixelToLatLong(new VEPixel(e.mapX,e.mapY)); Message('Map X: ' + clickPnt.Longitude + '\nMap Y: ' + clickPnt.Latitude + '\nZoom: ' + e.zoomLevel); }

Answer 1

It all depends on what you're trying to do. You could check for which mouse button was pressed during the onclick event handler. For example: If it was the Left Mouse Button then do nothing, else if it's the Right Mouse Button then do your logic to display a message, or plot pushpin, etc.

To clarify, only Panning the Map using the Mouse will trigger the onclick event. If you use the little arrows on the navigation dashboard, it will not trigger the onclick event.

Answer 2

I'm encountering the same problem. It is certainly not what I would expect, a click event in my terminology implies that the distance between mouseDown and mouseUp is below a certain threshold.

Here is some code that works in my experiments:

<script type="text/javascript">
  var mouseDownLocation;
  var mouseClickThreshold = 5;

  function init()
  {
    var map = new VEMap('myMap');
    map.LoadMap(new VELatLong(-27.15,153),8,'r' ,false);
    map.AttachEvent("onmousedown", function(e) {
        var x = e.mapX;
        var y = e.mapY;
        mouseDownLocation = new VEPixel(x, y);
    });
    map.AttachEvent("onmouseup", function(e) {
        var x = e.mapX;
        var y = e.mapY;
        if(Math.abs(mouseDownLocation.x - x) + 
               Math.abs(mouseDownLocation.y - y) > mouseClickThreshold) {
            return;
        }
        pixel = new VEPixel(x, y);
        var LL = map.PixelToLatLong(pixel);
        document.getElementById("myMapInfo").innerHTML = 
               "Pixel X: " + x + " | Pixel Y: " + y + 
               "<br /> LatLong: " + LL + 
               "<br/>" + e.eventName;
    });
  }  
</script>

The message will be displayed only if the mouse didn't move too much between the down and up events, i.e. a normal click should trigger it, a drag shouldn't.

This is using the VE API in version 6.2 and expects two divs with IDs "myMap" and "myMapInfo". It's also code that's experimental and could be improved upon, but the general approach seems ok.

Answer 3

Thanks Peter, that is working great with 6.3 as well. I'm discovering Bing maps and I'm a bit lost in the event handlers, so that helped!