Hi Everyone,
Today I was working on Bing Maps and the requirement was there are some static locations and we have to calculate the distance between the draggable Pushpin and static locations.
Here is the full HTML of the same, please make sure that you replace BING-MAP-KEY with your key.
<html>
<head>
<title>Drag
Pushpin</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style type='text/css'>
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Segoe UI',Helvetica,Arial,Sans-Serif;
}
</style>
</head>
<body>
<div id='printoutPanel'></div>
<div id='divLatitudeUp'></div>
<div id='divLongitudeUp'></div>
<div id='divDistance'></div>
<div id='myMap'></div>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=BING-MAP-KEY&callback=loadMapScenario' async defer></script>
<script type='text/javascript'>
var zoomLevel = 10;
var map;
var vLatitude = "17.53512546311542";
var vLongitude = "78.3292079101957";
// Pushpin Dragend
event.
function pushPinDragEndEvent(id, e) {
var point = new
Microsoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.getLocation();;
var location = new
Microsoft.Maps.Location(loc.latitude, loc.longitude);
if (id == "pushpinDragEnd") {
document.getElementById("divLatitudeUp").innerHTML = "Latitude : " +
loc.latitude;
document.getElementById("divLongitudeUp").innerHTML = "Longitude : " +
loc.longitude;
getDistanceBetweenLocations(location, new Microsoft.Maps.Location(vLatitude, vLongitude));
}
}
function loadMapScenario() {
var map = new
Microsoft.Maps.Map(document.getElementById('myMap'), { zoom: zoomLevel });
var center = map.getCenter();
var Events = Microsoft.Maps.Events;
var Location = Microsoft.Maps.Location;
var Pushpin = Microsoft.Maps.Pushpin;
var loc = new
Location(center.latitude, center.longitude);
var dragablePushpin = new Pushpin(loc, { color: '#00F', draggable: true });
map = new
Microsoft.Maps.Map(document.getElementById('myMap'), { center: loc, zoom: zoomLevel });
Events.addHandler(dragablePushpin, 'dragend', function (e) { pushPinDragEndEvent('pushpinDragEnd', e); });
map.entities.push(dragablePushpin);
var pushpin = new
Microsoft.Maps.Pushpin(new
Location(vLatitude, vLongitude), {
icon: 'https://bingmapsisdk.blob.core.windows.net/isdksamples/defaultPushpin.png',
anchor: new Microsoft.Maps.Point(12, 39),
});
map.entities.push(pushpin);
}
// Calculate
distance between two locations.
function getDistanceBetweenLocations(Location1, Location2) {
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialMath', function () {
var vDistance = Microsoft.Maps.SpatialMath.getDistanceTo(Location1,
Location2, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
document.getElementById('divDistance').innerHTML = "Distance in Miles : " +
vDistance;
});
}
</script>
</body>
</html>
Hope this helps.
--
Happy Coding