Click here to Skip to main content
15,867,704 members
Articles / Web Development / HTML
Tip/Trick

How to Detect in Bing Map Version 7, It Is Click Event or Drag Event for pushpin?

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
27 Feb 2017CPOL1 min read 6.4K   42   1  
Detect whether the event is click event or drag event of pushpin, performed by user in Bing Map

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

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' });

            //Adding the 2 map markers
            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;

                //Setting the default Latitude & Longitude of pushpin into variables
                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;
                }

                //I am calculating the differences for latitude and longitude in 3 decimal values.
                // vPinNewLoc.latitude = new latitude of pushpin
                // vPinNewLoc.longitude = new longitude of pushpin
                if (vLatitude.toFixedDown(3) == vPinNewLoc.latitude.toFixedDown(3) && 
                  vLongitude.toFixedDown(3) == vPinNewLoc.longitude.toFixedDown(3)) {
                    alert('Click event');
                    //You can do the things what you want in Click Event
                }
                else {
                    alert('Drag event');
                    //You can do the things what you want in 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>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --