百度地图API跨域报错:Uncaught SyntaxError: Unexpected token :

    |     2016年3月8日   |   学习偶记   |     评论已关闭   |    9825

群里网友聊天,说jquery下用ajax调用百度地图API出错。

用的是http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding 百度API手册中的例子:

url是:http://api.map.baidu.com/geocoder/v2/?address=北京市海淀区上地十街10号&output=json&ak=E4805d16520de693a3fe707cdc962045&callback=showLocation

(调试过程略……总之很苦逼),chrome浏览器总是报错:Uncaught SyntaxError: Unexpected token : ,点击chrome里报错的链接,可以看到返回结果是json数据{“status”:220,”message”:”APP Referer校验失败”} 。

无意中从另外一篇文章中,复制粘贴了一个url,奇迹出现了,程序正常了。

八万秒博客(80000s.com)原创

总结:因为返回的值错误,导致报错:Uncaught SyntaxError: Unexpected token :

那么问题来了,返回值 {“status”:220,”message”:”APP Referer校验失败”} 是标准的json数据,为什么会报返回值错误呢?

让正确的程序返回值告诉你。

简洁型代码:

<script type="text/javascript">
    function showLocation(json)
    {
        alert("status = "+json.status);
        alert("location.lng = "+json.result.location.lng);
        alert("location.lat = "+json.result.location.lat);
        alert("precise = "+json.result.precise);
        alert("confidence = "+json.result.confidence);
        alert("level = "+json.result.level);
    }
    //chrome开发者模式中network中的链接为:http://api.map.baidu.com/geocoder/v2/?address=%E5%8C%97%E4%BA%AC%E5%B8%82%E6%B5%B7%E6%B7%80%E5%8C%BA%E4%B8%8A%E5%9C%B0%E5%8D%81%E8%A1%9710%E5%8F%B7&output=json&ak=42b8ececa9cd6fe72ae4cddd77c0da5d&callback=showLocation&jsoncallback=jQuery1113027515446790494025_1457447914946&_=1457447914947
    $.getJSON('http://api.map.baidu.com/geocoder/v2/?address=北京市海淀区上地十街10号&output=json&ak=42b8ececa9cd6fe72ae4cddd77c0da5d&callback=showLocation&jsoncallback=?');
</script>

上述代码和百度手册例子中的区别在:
A、ak不一样(百度的ak可以在浏览器中打开,偶尔可以获得正常值,大部分都是status:220)
B、url我增加了&jsoncallback=? 这个参数。这个参数是用来解决ajax跨域的问题,相当于把jsonp返回值复制给callback回调。如果不加这个参数,浏览器会报:No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 错误,即禁止跨域。

jquery ajax跨域

另外,为了能让用户更好的看到调试结果,附上复杂型的代码。

<script type="text/javascript">
    chrome调试显示的链接地址:http://api.map.baidu.com/geocoder/v2/?callback=success_jsonpCallback&address=%E5%8C%97%E4%BA%AC%E5%B8%82%E6%B5%B7%E6%B7%80%E5%8C%BA%E4%B8%8A%E5%9C%B0%E5%8D%81%E8%A1%9710%E5%8F%B7&output=json&ak=42b8ececa9cd6fe72ae4cddd77c0da5d&_=1457445298793
    带回调函数返回的值:showLocation&&showLocation({"status":0,"result":{"location":{"lng":116.30815063007,"lat":40.056890127931},"precise":1,"confidence":80,"level":"\u9053\u8def"}})
    (删除jsonpCallback:"showLocation",)不带回调函数返回的值:http://api.map.baidu.com/geocoder/v2/?callback=jQuery111309129727012477815_1457445643011&address=%E5%8C%97%E4%BA%AC%E5%B8%82%E6%B5%B7%E6%B7%80%E5%8C%BA%E4%B8%8A%E5%9C%B0%E5%8D%81%E8%A1%9710%E5%8F%B7&output=json&ak=42b8ececa9cd6fe72ae4cddd77c0da5d&_=1457445643012
    (删除jsonp: 'callback',)不带回调函数返回的值:http://api.map.baidu.com/geocoder/v2/?callback=jQuery1113016362871322780848_1457445695494&address=%E5%8C%97%E4%BA%AC%E5%B8%82%E6%B5%B7%E6%B7%80%E5%8C%BA%E4%B8%8A%E5%9C%B0%E5%8D%81%E8%A1%9710%E5%8F%B7&output=json&ak=42b8ececa9cd6fe72ae4cddd77c0da5d&_=1457445695495

    $.ajax({
        url : 'http://api.map.baidu.com/geocoder/v2/',
        type : 'GET',
        async:false,
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback:"showLocation",
        data : {
            address:"北京市海淀区上地十街10号",
            output:"json",
            ak:"42b8ececa9cd6fe72ae4cddd77c0da5d"
        },
        success: function (json) {
            alert("status:"+json.status);
            alert("location.lng:"+json.result.location.lng);
            alert("location.lat:"+json.result.location.lat);
            alert("precise:"+json.result.precise);
            alert("confidence:"+json.result.confidence);
            alert("level:"+json.result.level);
        },
        error: function (xhr, textStatus, errorThrown) {
                //alert(xhr.readyState);
                //alert(xhr.status);
                //alert(xhr.statusText);
                //alert(xhr.responseText);
                //alert(errorThrown);
                document.write("错误原因"+errorThrown);
        }

    });
    function showLocation(json)
    {
        alert("status = "+json.status);
        alert("location.lng = "+json.result.location.lng);
        alert("location.lat = "+json.result.location.lat);
        alert("precise = "+json.result.precise);
        alert("confidence = "+json.result.confidence);
        alert("level = "+json.result.level);
    }
</script>

噢!评论已关闭。