Hi,
Today, we have got some requirement where the users should be able to drag the Pin on the Map and we should get the Latitude and Longitude of that position.
We have to use "dragend" event for it.
Here is the full html of the same. Just replace BING-MAP-KEY with your Bing Map Key.
Hope this helps.
--
Happy Coding
Today, we have got some requirement where the users should be able to drag the Pin on the Map and we should get the Latitude and Longitude of that position.
We have to use "dragend" event for it.
Here is the full html of the same. Just replace BING-MAP-KEY with your Bing Map Key.
<html>
<head>
<title>Drag Pushpin</title>
<metahttp-equiv='Content-Type'content='text/html; charset=utf-8'/>
<styletype='text/css'>
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Segoe UI',Helvetica,Arial,Sans-Serif;
}
</style>
</head>
<body>
<divid='printoutPanel'></div>
<divid='divLatitudeUp'></div>
<divid='divLongitudeUp'></div>
<divid='myMap'></div>
<scripttype='text/javascript'src='https://www.bing.com/api/maps/mapcontrol?key=BING-MAP-KEY&callback=loadMapScenario'asyncdefer></script>
<scripttype='text/javascript'>
var zoomLevel = 10;
var map;
function handleArgs(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;
}
}
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 = new Microsoft.Maps.Map(document.getElementById('myMap'), { center: loc, zoom: zoomLevel });
Events.addHandler(dragablePushpin, 'dragend', function (e) { handleArgs('pushpinDragEnd', e); });
map.entities.push(dragablePushpin);
}
</script>
</body>
</html>
Hope this helps.
--
Happy Coding
Gopinath