Introduction
If we want to perform different things on click event & drag event for pushpin, for that first of all, we have to identify the event, it is click event or drag event performed by the user.
Problem
In Bing Map, if you want to perform both click event and drag event, you have to make pushpin as draggable. So the problem is that, click event of pushpin always performs drag events (dragstart & dragend).
Solution
May be, there are many solutions to detect the click event or drag event of pushpin. I have one solution for it.
I always use calculation of the position (drag start position & drag end position of pushpin) for this scenario. First of all, store the position (Longitude/Latitude) of pushpin. On click event handler, calculate the new longitude & latitude position of pushpin after click action, get the differences of longitude & latitude (according to your requirement in Map, you can set differences in decimal point or number part). If differences (in longitude/latitude) is more than our set points, it means, it is drag event, otherwise click event. After identifying the event, you can do the things according to event (click event/drag event).
You can easily understand the solution from the code, so I am attaching the code below:
MapEvents.html
<!DOCTYPE HTML PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title> Bing Map Markers</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type='text/javascript'
src='http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'></script>
<script type='text/javascript'
src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js'>
</script>
<script type='text/javascript'>
var vMap;
function getMap() {
var vStartLat = 36.1700250;
var vStartLng = -86.7727043;
var vStartPoint = new Microsoft.Maps.Location(vStartLat, vStartLng);
vMap = new Microsoft.Maps.Map(document.getElementById('myMap'),
{ center: vStartPoint, zoom: 5, mapTypeId: Microsoft.Maps.MapTypeId.road,
typeName: 'homeMarker' });
var vPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(32.489089, -97.778004),
{ draggable: true, typeName: 'pin1' });
vPin.Metadata = { id: 'pin1' };
Microsoft.Maps.Events.addHandler(vPin, 'click', showInfo);
Microsoft.Maps.Events.addHandler(vPin, 'mouseover', changeCursor);
Microsoft.Maps.Events.addHandler(vPin, 'mouseout', revertCursor);
vMap.entities.push(vPin);
$('.pin1').children().attr('title', 'Map Marker 1');
var vPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(40.489089, -75.778004),
{ draggable: true, typeName: 'pin2' });
vPin.Metadata = { id: 'pin2' };
Microsoft.Maps.Events.addHandler(vPin, 'click', showInfo);
Microsoft.Maps.Events.addHandler(vPin, 'mouseover', changeCursor);
Microsoft.Maps.Events.addHandler(vPin, 'mouseout', revertCursor);
vMap.entities.push(vPin);
$('.pin2').children().attr('title', 'Map Marker 2');
}
function showInfo(e) {
if (e.target.Metadata) {
var vPinNewLoc = e.target.getLocation();
var vLatitude = 0;
var vLongitude = 0;
var fAmnt = 0.0;
if (e.target.Metadata.id == 'pin1') {
vLatitude = 32.489089;
vLongitude = -97.778004;
}
else if (e.target.Metadata.id == 'pin2') {
vLatitude = 40.489089;
vLongitude = -75.778004;
}
if (vLatitude.toFixedDown(3) == vPinNewLoc.latitude.toFixedDown(3) &&
vLongitude.toFixedDown(3) == vPinNewLoc.longitude.toFixedDown(3)) {
alert('Click event');
}
else {
alert('Drag event');
}
}
}
function changeCursor(e) {
vMap.getRootElement().style.cursor = 'pointer';
}
function revertCursor(e) {
vMap.getRootElement().style.cursor = 'hand';
}
Number.prototype.toFixedDown = function (digits) {
var n = Math.pow(10, digits);
return parseInt(this * n) / n;
};
</script>
<script>$(document).ready(function () { getMap(); });</script>
</head>
<body>
<div id='myMap' style='position: absolute;
width:100%;height:99%;'></div>
</body>
</html>
