Bing Maps API request returning Uncaught SyntaxError: Unexpected token :

I'm getting an error Uncaught SyntaxError: Unexpected token : (dev.virtualearth.net/:1)

Here is my javascript.

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        alert("Geolocation is not supported by this browswer or not enabled.");
    }
}

function showPosition(position) {
    $.ajax({
        url: 'http://dev.virtualearth.net/REST/v1/Locations/',
        dataType: 'jsonp',
        data: {
            q: position.coords.latitude + ',' + position.coords.longitude,
            key: '***'
        }
    }).then(function(data) {
        //alert("Latitude: " + position.coords.latitude + "<br /> Longitude: " + position.coords.longitude +
        //"<br /> Province: " + data.resourceSets.resources[0].address.locality);
        console.log(data.toString());
    });


}

The json returned is valid but not sure where the error is occuring.


There are a few issues with your query:

  • Coordinates should not be passed into the query parameter like you are doing it. This will not reverse geocode the location for you like I think you are trying to do. The coordinates should be part of the URL like .../Location/latitude,longitude?key=
  • Also set the jsonp parameter of the ajax method in addition to the dataType.
  • Instead of using the navigator, use the GeoLocationProvider class that is part of the Bing Maps API. The Navigator class is not supported on older browsers, however, some older browsers do have other means of getting a users location. The GeoLocationProvider class wraps all these different methods together for you. This also gives you the option to show an accuracy circle and set the map view if you want.
  • Use a session key with the REST services instead of your Bing Maps key. This will make this service request a non-billable transaction.
  • Here is a code sample that lets you get the users location and reverse geocodes it:

    <!DOCTYPE html>
    <html>
    <head>
      <title></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="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    
      <script type="text/javascript">
        var map, sessionKey;
    
        function GetMap()
        {   
            map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
                credentials: "YOUR_BING_MAPS_KEY"
            });
    
            map.getCredentials(function(c){
                sessionKey = c;
            });
        }
    
        function getLocation() {
            var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);  
            geoLocationProvider.getCurrentPosition({ 
                showAccuracyCirle: false, 
                updateMapView: false,
                successCallback: showPosition
            });
        }
    
        function showPosition(position) {
    
            $.ajax({
                url: 'http://dev.virtualearth.net/REST/v1/Locations/' + position.center.latitude + ',' + position.center.longitude,
                dataType: "jsonp",
                jsonp: "jsonp",
                data: {
                    key:sessionKey
                },
                success: function (result) {
                    if (result &&
                        result.resourceSets &&
                        result.resourceSets.length > 0 &&
                        result.resourceSets[0].resources &&
                        result.resourceSets[0].resources.length > 0) {
                        alert(result.resourceSets[0].resources[0].address.formattedAddress);
                    }else{
                        alert("No Results Found");
                    }            
                },
                error: function (e) {
                    alert(e.statusText);
                }
            });
        }
        </script>   
    </head>
    <body onload="GetMap();">
        <div id='myMap' style="position:relative;with:800px;height:600px;"></div><br/>
        <input type="button" onclick="getLocation()" value="test"/>
    </body>
    </html>
    
    链接地址: http://www.djcxy.com/p/8028.html

    上一篇: 未捕获的SyntaxError:意外的标记}

    下一篇: Bing Maps API请求返回未捕获的SyntaxError:意外的令牌: