CODEWITHSUNDEEP
javascriptbing-mapsbing
softya
softya

Reputation: 260

Get latitude and longitude on event click - Bing Maps and webv8

I'm using the Bing Maps API...

And I want to get the latitude and longitude on click function. This is my HTML code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
    <script type='text/javascript'>
        var map;

        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {});
            Microsoft.Maps.Events.addHandler(map, 'click', function () { set_latitudes_and_longitude(map); });
        }

        function set_latitudes_and_longitude(map)
        {
            console.log(map);
            // How can I wright something like
            // map.getLat or map.getLong?

        }
    </script>
</body>
</html>

On console.log(map); I did not find anything referring to latitude and longitude...

Upvotes: 2

Views: 1350

Answers (2)

hoogw
hoogw

Reputation: 5525

working sample:

 // .. .. add guided thin line as selecting envelope .. ..
                _envelopeCoords = [
                  new Microsoft.Maps.Location(SWlat, SWlong),
                  new Microsoft.Maps.Location(SWlat, NElong),
                  new Microsoft.Maps.Location(NElat, NElong),
                  new Microsoft.Maps.Location(NElat, SWlong),
                ];

                // Construct the polygon. add bing polygon: https://github.com/microsoft/BingMapsV8CodeSamples/blob/main/Samples/Polygons/Basics/Polygon%20Basics.html 
                _envelopeBingShapePolygon = new Microsoft.Maps.Polygon(
                        _envelopeCoords, 
                        {
                            fillColor:   "rgba(255, 0, 0, 0)",
                            strokeColor: "rgba(255, 0, 0, 0.9)",
                            strokeThickness: 0.7
                        }
                  );
                
                  //Add mouse events to the polygon. https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/map-shapes-polylines-and-polygons/polygon-events
                  Microsoft.Maps.Events.addHandler(_envelopeBingShapePolygon, 'click', handleEnvelopeClick );
                  function handleEnvelopeClick(MouseEvent) {
                    console.log('you clicked envelop square, will trigger ajax data from clicked lat lng location', MouseEvent.location, MouseEvent.location.latitude, MouseEvent.location.longitude)
                    ajax_data(MouseEvent.location.longitude, MouseEvent.location.latitude)
                  }
                
                  map.entities.push(_envelopeBingShapePolygon);

Upvotes: 1

softya
softya

Reputation: 260

I did this and it worked:

<script type='text/javascript'>
    var map;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {});
        Microsoft.Maps.Events.addHandler(map, 'click', function (e) { set_latitudes_and_longitude(e); });
    }

    function set_latitudes_and_longitude(map)
    {
        console.log(map.location.latitude);
        console.log(map.location.longitude);
        // How can I write something like 
        // map.getLat or map.getLong?
        
    }
</script>

Upvotes: 2

Related Questions