百度地图API跨域问题解决
/*看重点的在最后一行*/
————————————————————————————————————————————
最近项目需求使用一个地图插件mapbox,界面挺好看的,可应用在web端和客户端。
然而国内用的人很少,API需要自己啃,艰难。客户又要好看的界面,又要提供中文服务,摔!
于是采用了和百度地图提供的API结合的方式来实现。
需要完成的功能:
1.Geocoding:
经纬度与地址互相转换
2.手动输入地址查询,就是百度地图的搜索功能
百度地图提供的API很齐全,此次主要使用的是Geocoding和Place Suggestion2个服务,另还使用了JavaScript API里面的autocomplete模块,用起来真的很快啊。此次要讲的是在使用API提供接口的一个跨域问题。
Geocoding API v2.0
1.什么是Geocoding?
Geocoding API 是一类简单的HTTP接口,用于提供从地址到经纬度坐标或者从经纬度坐标到地址的转换服务,用户可以使用C# 、C++、Java等开发语言发送HTTP请求且接收JSON、XML的返回数据。
2.功能介绍
Geocoding API包括地址解析和逆地址解析功能。
地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,且支持名胜古迹、标志性建筑名称直接解析返回百度经纬度。例如:“北京市海淀区中关村南大街27号”地址解析的结果是“lng:116.31985,lat:39.959836”,“百度大厦”地址解析的结果是“lng:116.30815,lat:40.056885”
逆地理编码,即逆地址解析,由百度经纬度信息得到结构化地址信息。例如:“lat:31.325152,lng:120.558957”逆地址解析的结果是“江苏省苏州市虎丘区塔园路318号”。
3.如何使用
百度地图Geocoding API是一套免费对外开放的API,默认配额100万次/天。使用方法:
第一步:申请ak(即获取密钥),若无百度账号则首先需要注册百度账号。
第二步,拼写发送http请求的url,注意需使用第一步申请的ak。
第三步,接收http请求返回的数据(支持json和xml格式)。
Hello, World
以下是一个关于地理编码的简单示例。发送一个地址是“百度大厦”的请求,返回该地址对应的地理坐标。发送请求的url如下:
结果说明:点击上述请求url,返回地址“百度大厦”解析的json格式的数据。
4.服务地址
百度地图Geocoding API服务地址:
http://api.map.baidu.com/geocoder/v2/
组成说明:
域名:api.map.baidu.com
服务名:geocoder
服务版本号:较之前版本,v2版本新增参数。
5.通用接口参数
output | 否 | xml | json或xml | 输出格式为json或者xml |
ak | 是 | 无 | E4805d16520de693a3fe707cdc962045 | 用户申请注册的key,自v2开始参数修改为“ak”,之前版本参数为“key” |
sn | 否 | 无 | 若用户所用ak的校验方式为sn校验时该参数必须。 (sn生成算法) | |
callback | 否 | 无 | callback=showLocation(JavaScript函数名) | 将json格式的返回值通过callback函数返回以实现jsonp功能 |
6.地理编码服务
地理编码专属请求参数:
address | 是 | 无 | 北京市海淀区上地十街10号 | 根据指定地址进行坐标的反定向解析 该参数是地理编码的必填项,可以输入三种样式的值,分别是: |
city | 否 | “北京市” | “广州市” | 地址所在的城市名 该参数是可选项,用于指定上述地址所在的城市,当多个城市都有上述地址时,该参数起到过滤作用。 |
对于address字段可能会出现中文或其它一些特殊字符(如:空格),对于类似的字符要进行编码处理,编码成 UTF-8 字符的二字符十六进制值,凡是不在下表中的字符都要进行编码。
URL非保留字 | a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9 - _ . ~ |
URL保留字 | ! * ' ( ) ; : @ & = + $ , / ? % # [ ] |
附注:
(1) javascript中一般采用encodeURIComponent函数对特殊字符进行编码。
(2) Java中可以使用函数URLEncoder.encode对特殊字符进行编码。
(3) C#中可以使用函数HttpUtility.UrlEncode对特殊字符进行编码。
(4) php中可以使用函数urlencode对特殊字符进行编码。
地理编码示例
以下是关于地理编码参数使用方法的示例。发送请求显示结果的JavaScript代码此处查看。
请求示例:对北京市百度大厦进行地理编码查询;
http://api.map.baidu.com/geocoder/v2/?ak=E4805d16520de693a3fe707cdc962045&callback=renderOption&output=json&address=百度大厦&city=北京市
地理编码返回结果字段
名称 | 类型 | 说明 | |
status | Int | 返回结果状态值, 成功返回0,其他值请查看下方返回码状态表。 | |
location | object | 经纬度坐标 | |
lat | float | 纬度值 | |
lng | float | 经度值 | |
precise | Int | 位置的附加信息,是否精确查找。1为精确查找,0为不精确。 | |
confidence | Int | 可信度 | |
level | string | 地址类型 |
json格式的返回值
//带回调函数的返回格式 showLocation&&showLocation( { status: 0, result: { location: { lng: 116.30814954222, lat: 40.056885091681 }, precise: 1, confidence: 80, level: "商务大厦" } } ) //不带回调函数的返回值 { status: 0, result: { location: { lng: 116.30814954222, lat: 40.056885091681 }, precise: 1, confidence: 80, level: "商务大厦" } }
xml格式的返回值
<GeocoderSearchResponse> <status>0</status> <result> <location> <lat>40.056885091681</lat> <lng>116.30814954222</lng> </location> <precise>1</precise> <confidence>80</confidence> <level>商务大厦</level> </result> </GeocoderSearchResponse>
特别说明: 若解析status字段为OK,但结果内容为空,原因分析及可尝试方法:
- 地址库里无此数据,本次结果为空
- 加入city字段重新解析
- 将过于详细或简单的地址更改至省市区县街道重新解析
7.逆地理编码服务
逆地理编码专属请求参数:
coordtype | 否 | bd09ll | bd09ll 百度经纬度坐标 | 坐标的类型,目前支持的坐标类型包括:bd09ll(百度经纬度坐标)、gcj02ll(国测局经纬度坐标)、wgs84ll( GPS经纬度) |
location | 是 | 无 | 38.76623,116.43213 lat<纬度>,lng<经度> | 根据经纬度坐标获取地址 |
pois | 否 | 是否显示指定位置周边的poi,0为不显示,1为显示。当值为1时,显示周边100米内的poi。 |
逆地理编码示例 以下是关于逆地理编码参数使用方法的示例。发送请求显示结果的JavaScript代码
状态字段:
status | constant | 返回结果状态值, 成功返回0,其他值请查看附录。 |
location | lat | 纬度坐标 |
lng | 经度坐标 | |
formatted_address | 结构化地址信息 | |
business | 所在商圈信息,如 "人民大学,中关村,苏州街" | |
addressComponent | country | 国家 |
province | 省名 | |
city | 城市名 | |
district | 区县名 | |
street | 街道名 | |
street_number | 街道门牌号 | |
country_code | 国家code | |
direction | 和当前坐标点的方向,当有门牌号的时候返回数据 | |
distance | 和当前坐标点的距离,当有门牌号的时候返回数据 | |
pois(周边poi数组) | addr | 地址信息 |
cp | 数据来源 | |
direction | 和当前坐标点的方向 | |
distance | 离坐标点距离 | |
name | poi名称 | |
poiType | poi类型,如’ 办公大厦,商务大厦’ | |
point | poi坐标{x,y} | |
tel | 电话 | |
uid | poi唯一标识 | |
zip | 邮编 | |
sematic_description | constant | 当前位置结合POI的语义化结果描述。 |
json示例:
xml示例:
特别说明:
1.因为Geocoding和反Geocoding使用的门址数据以及算法都不是一样的,所以会出现不能一一对应的现象。
2.逆地址解析location参数传入的参数格式是(纬度lat,经度lng)。
8.返回码状态表
0 | 正常 |
1 | 服务器内部错误 |
2 | 请求参数非法 |
3 | 权限校验失败 |
4 | 配额校验失败 |
5 | ak不存在或者非法 |
101 | 服务禁用 |
102 | 不通过白名单或者安全码不对 |
2xx | 无权限 |
3xx | 配额错误 |
9.升级说明
v2版本较之v1版本,功能更新详见更新日志。若需查看v1文档,请点击目录 “Geocoding APIv1.0”。
若v1版本升级至v2版本,地理/逆地理编码的请求url,参数:新增版本号“v2”,修改“key”为“ak”。v2不兼容v1版本的key,若需升级,请重新获取密钥。
那么问题来了,大部分解决JSON跨域问题的是使用JSONP,但是百度提供的格式是JSON格式,所以这个方法没戏了。
解决方法:请求中加 jsoncallback=?
$.getJSON('http://api.map.baidu.com/geocoder/v2/?address=百度大厦&output=json&ak=E4805d16520de693a3fe707cdc962045&callback=showLocation&jsoncallback=?');