430
Like
Share
ReportHi 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.
Hope this helps.
--
Happy Coding
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 = newMicrosoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.getLocation();;
var location = newMicrosoft.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 = newMicrosoft.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 = newLocation(center.latitude, center.longitude);
var dragablePushpin = new Pushpin(loc, { color: '#00F', draggable: true });
map = newMicrosoft.Maps.Map(document.getElementById('myMap'), { center: loc, zoom: zoomLevel });
Events.addHandler(dragablePushpin, 'dragend', function (e) { pushPinDragEndEvent('pushpinDragEnd', e); });
map.entities.push(dragablePushpin);
var pushpin = newMicrosoft.Maps.Pushpin(newLocation(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
Gopinath
*This post is locked for comments