百度地图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如下:
http://api.map.baidu.com/geocoder/v2/?address=百度大厦&output=json&ak=E4805d16520de693a3fe707cdc962045&callback=showLocation
结果说明:点击上述请求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 |
否 |
0 |
0 |
是否显示指定位置周边的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示例:
http://api.map.baidu.com/geocoder/v2/?ak=E4805d16520de693a3fe707cdc962045&callback=renderReverse&location=39.983424,116.322987&output=json&pois=1
xml示例:
http://api.map.baidu.com/geocoder/v2/?ak=E4805d16520de693a3fe707cdc962045&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1
特别说明:
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=?');
百度地图API跨域问题解决相关推荐
- 百度地图api 跨域
百度地图调用参考:逆地理编码 rgc 反geo检索 | 百度地图API SDK axios ,jsonp 参考:使用VUE的axios解决调用百度地图api的跨域访问问题_樱小诺的博客-CSDN博客 ...
- React + fetch API + 百度地图api + 跨域 填坑
做项目遇到一个百度地图api 的跨域问题.由于使用fetch ,在调用类似 http://api.map.baidu.com/geocoder/v2/callback=renderReverse&am ...
- 跨域请求(使用jsonp实现跨域请求)百度地图api证逆地址解析获取周边信息(pois)
新手程序员,新手博客,如果那里写的不好,还请大神们补充,指错 最近项目里面需要做一个电子围栏的功能,我这边做的就是需要把商户的地址的经纬度存进数据库,本来这些从百度地图API里面有Demo可以看,但是 ...
- Vue2前端请求API数据跨域问题解决
Vue2前端请求API数据跨域问题解决方法 前端:Vue2 接口使用:API 问题报错提示: Access to XMLHttpRequest at 'http://localhost:9090/ec ...
- 使用Angular8和百度地图api开发《旅游清单》
前言: 本文的目的是通过一步步实现一个旅游清单项目,让大家快速入门Angular8以及百度地图API.我们将收获: Angular8基本用法,架构 使用百度地图API实现自己的地图应用 解决调用百度地 ...
- 【百度地图API】如何批量转换为百度经纬度
摘要: 百度地图API的官网上提供了常用坐标转换的示例.但是,一次只能转换一个,真的非常麻烦!!这里结合了官方的示例,自制一个批量转换工具,供大家参考. ----------------------- ...
- 基于uni-app与百度地图API实现简易前后端分离的地理围栏应用
一.引言 地理围栏(Geo-fencing)是LBS 的一种新应用,就是用一个虚拟的栅栏围出一个虚拟地理边界.当手机进入.离开某个特定地理区域,或在该区域内活动时,后台可以感知到这一变化,同时手机可以 ...
- vue调用百度地图API输入提示示例下拉列表一直被触发问题
2019独角兽企业重金招聘Python工程师标准>>> 先看图 然后点确定,居然下拉框又被触发了,而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示,很恶心的一个bug,不 ...
- sns.distplot图例标注怎么添加_百度地图API图标、文本、图例与连线
百度地图开放平台功能强大,使用简单,为地图的自定义提供了非常方便的途径! 本文以绘制一张全国机器辐射图为例记录其基本使用方法,效果如下图: 图中包括了带图标和文本的标注,连线以及图例. 1.关于坐标 ...
最新文章
- #Apache Spark系列技术直播# 第六讲【 What's New in Apache Spark 2.4? 】
- android listview 游标,Android Listview - 使用游标时无法选择多个项目
- TowlHub,它不是一个简单的纸巾架
- linux卸载已安装的java_Linux 中如何卸载已安装的软件(转载)
- jeesite的junit,数据没有插入?
- webrtc 源码结构
- 二、PHP基础——连接msql数据库进行增删改查操作 实战:新闻管理项目
- Android、iOS平台RTMP/RTSP播放器实现实时音量调节
- 《JAVA程序设计基础(第3版)实验指导》pdf 附下载链接
- 交叉验证(Cross Validation)简介
- python 快乐的数字
- 图片双面打印顺序混乱_打印,那些你没有注意的小细节
- 《别做正常的傻瓜》的一些读书心得
- 从“制造大国”走向“制造强国”——“两化深度融合”是必然选择 考题答案
- ios 常用的第三方库
- 软件测试作业1 令我印象深刻的bug
- 揭秘!苏宁“融合基础设施”型零售实践大解析
- FUZ 1759 Super A^B mod C (指数循环节/模板)
- 为什么我的同花顺选股服务器列表为空,同花顺选股公式,为什么我就选不出股票来呢数......
- apache 2.4.X使用htpasswd 出现apache authentication failure passwd mismatch错误
热门文章
- 饿了么ui的单选框默认值渲染不出来解决
- 送客户的祝福语_送给客户的事业祝福语大全(含贺词、寄语等)
- 计算机 无法开机 拔电源 过一会,电脑有时候开机不到一秒就自动关机,拔掉电源再重插就没问题,怎么回事...
- MAHNOB-HCI-TAGGING DATABASE中BDF文件的Python读取
- 因为喜欢“对抗”,这位安全首席架构师一年为网易云节省上千万
- “有电才‘型’2013主流智能手机耐力挑战赛” 挑战者七:联想P780
- 小学生C++趣味编程 上机作业 每日一练 第7单元 函数
- Inventor文件中保存自定义数据 - 2
- UltraEdit文本编辑器下载适用于Win/Mac和Linux
- iPad Air越狱白苹果怎么办?越狱白苹果修复教程