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

群里网友聊天，说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，奇迹出现了，程序正常了。

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

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

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

简洁型代码：

[code language=”javascript”]
<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>
[/code]

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

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

[code language=”javascript”]
<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>
[/code]