浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
(重定向页面至jspopular/guide/introduction
 
第1行: 第1行:
#REDIRECT [[:jspopular/guide/introduction]]
+
{{jspopular-sidebar}}
 +
==Javascript API功能介绍==
 +
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等数据服务。
 +
 
 +
{{bluepoint}}'''基本地图功能:'''展示(支持2D图、3D图、卫星图)、平移、缩放、拖拽等。
 +
 
 +
{{bluepoint}}'''地图控件展示功能:'''可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件,并可以设置各类控件的显示位置。
 +
 
 +
{{bluepoint}}'''覆盖物功能:'''支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等;开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能。
 +
 
 +
{{bluepoint}}'''工具类功能:'''提供经纬度坐标与屏幕坐标互转功能;开源库里提供测距、几何运算及GPS坐标/国测局坐标转百度坐标等功能。
 +
 
 +
{{bluepoint}}'''定位功能:'''支持IP定位及浏览器(支持html5特性浏览器)定位功能。
 +
 
 +
{{bluepoint}}'''右键菜单功能:'''支持在地图上添加右键菜单。
 +
 
 +
{{bluepoint}}'''鼠标交互功能:'''支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能。
 +
 
 +
{{bluepoint}}'''图层功能:'''支持重设地图底图、地图上叠加实时交通图层或自定义图层功能。
 +
 
 +
{{bluepoint}}'''本地搜索功能:'''包括根据城市、矩形范围、圆形范围等条件进行POI搜索;且支持用户自有数据的检索。
 +
 
 +
{{bluepoint}}'''公交检索:'''支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;检索结果支持便捷、可换乘、少步行、不乘地铁四种方案。
 +
 
 +
{{bluepoint}}'''驾车检索:'''支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;返回最短时间、最短距离、避开高速的驾车导航结果;且提供计算打车费用服务。
 +
 
 +
{{bluepoint}}'''步行导航:'''提供步行导航方案。
 +
 
 +
{{bluepoint}}'''逆/地理编码:'''支持百度坐标与地址描述信息之间的转换服务。
 +
 
 +
{{bluepoint}}'''个性化数据展示功能:'''用户自有数据存储到LBS.云后,JavaScript API可以提供以麻点图形式展示自有数据功能。
 +
 
 +
==面向的读者==
 +
API是提供给那些具有一定JavaScript编程经验和了解面向对象概念的读者使用。此外,读者还应该对地图产品有一定的了解。
 +
 
 +
您在使用中遇到任何问题,都可以通过[http://bbs.lbsyun.baidu.com/ API论坛]反馈给我们。
 +
 
 +
==坐标转换==
 +
国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。
 +
 
 +
坐标转换、批量坐标转换示例详见[http://developer.baidu.com/map/jsdemo.htm JavaScript API示例]【地图示例_坐标换算】。
 +
 
 +
==版本说明及申请API ak==
 +
为了统一平台服务的配额管理,JavaScript API在新版本引入ak机制。JavaScript API v1.4及以前版本无须申请密钥(ak),自v1.5版本开始需要先[http://lbsyun.baidu.com/apiconsole/key?application=key 申请密钥(ak)],才可使用,超出ak配额部分,可以[http://developer.baidu.com/map/help_developer.html 发送邮件]进行申请。
 +
 
 +
地址:
 +
<pre>
 +
http://api.map.baidu.com/api?v=1.4 //参数v表示您加载API的版本,使用JavaScript APIv1.4及以前版本可使用此方式引用。
 +
http://api.map.baidu.com/api?v=1.5&ak=您的密钥  //使用JavaScript APIv1.5请先申请密钥ak,按此方式引用。
 +
</pre>
 +
 
 +
当权限验证(ak)失败时,会报如下错误:
 +
 
 +
http://developer.baidu.com/map/static/img/js-ak-failure.jpg<br/>
 +
 
 +
验证失败的可能原因包括:
 +
 
 +
{{bluepoint}}尚未在[http://lbsyun.baidu.com/apiconsole/key API控制台]申请ak,即'...ak=';
 +
 
 +
{{bluepoint}}密钥设置错误,如E4805d16520de693a3fe707cdc962045为正确的ak,但是设置时输入的ak为E4805d16520de693a3fe707cdc962045xx;
 +
 
 +
{{bluepoint}}密钥未通过白名单,如下图的ak在非baidu.com域名下会报错。
 +
 
 +
http://developer.baidu.com/map/static/img/js-ak-refer.jpg
 +
 
 +
{{bluepoint}}[http://lbsyun.baidu.com/apiconsole/quota API控制台]关闭JavaScript API时会报错;
 +
 
 +
http://api.map.baidu.com/lbsapi/cloud/cms/jsapi/img/jsapi1.png
 +
 
 +
当API升级后,如果已有接口在使用、命名等方面发生了变化,我们会为其增加一个新的版本号,这不会对您现有的应用造成任何影响。如果升级只是修复一些bug或者在不影响现有功能的前提下增加接口、改善性能,则版本号不会发生变化。您可以在更新日志页面查看版本的变化。
 +
 
 +
==获取Javascript API服务方法==
 +
自JSAPIv1.5之后,您需要首先[http://lbsyun.baidu.com/apiconsole/key?application=key 申请密钥(ak)],才可成功加载API JS文件。ak的使用方法如下:
 +
 
 +
<pre>
 +
<script src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥" type="text/javascript"></script> 
 +
</pre>
 +
 
 +
其中参数v为API当前的版本号,目前最新版本为1.5。在1.2版本之前您还可以设置services参数,以告知API是否加载服务部分,true表示加载,false表示不加载,默认为true。
 +
 
 +
地图API是由JavaScript语言编写的,您在使用之前需要通过<script>标签将API引用到页面中:
 +
 
 +
使用V1.4及以前版本的引用方式:
 +
 
 +
<pre>
 +
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
 +
</pre>
 +
使用V1.5版本的引用方式:
 +
 
 +
<pre>
 +
<script src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥" type="text/javascript"></script>
 +
</pre>
 +
 
 +
其中参数v为API当前的版本号,目前最新版本为1.45。在1.2版本之前您还可以设置services参数,以告知API是否加载服务部分,true表示加载,false表示不加载,默认为true。
 +
 
 +
==开发移动平台上的地图应用==
 +
API自1.1版本起开始支持iPhone、Android这样的移动平台。用户通过手机浏览器就可以访问由地图API创建出来的应用。移动平台的屏幕尺寸通常比PC或笔记本要小,操作方式也有所不同。为了更好的在手机浏览器上展示地图,我们有如下建议:
 +
 
 +
{{bluepoint}}将地图容器高设置为100%,使其充满整个屏幕,或者您也可以计算浏览器窗口的大小并进行设置。
 +
 
 +
{{bluepoint}}添加下面的meta标签: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。
 +
 
 +
您可以参考 [https://developer.apple.com/devcenter/safari/index.action Apple's Developer documentation] 和 [http://developer.android.com/index.html Android documentation] 获得更多信息。
 +
 
 +
http://developer.baidu.com/map/static/img/js-apiv14-phone.jpg
 +
 
 +
移动端开发具体实现请参考[http://developer.baidu.com/map/js-download.htm 相关下载_示例代码]提供的Demo源码。
 +
 
 +
==异步加载==
 +
JavaScript API支持异步加载,您可以在引用脚本的时候添加callback参数,当脚本加载完成后callback函数会被立刻调用。请参考下面的使用示例:
 +
 
 +
<syntaxhighlight lang="html4strict" line start="100" enclose="div">
 +
 
 +
<!DOCTYPE html> 
 +
<html> 
 +
<head> 
 +
<meta charset="utf-8"/> 
 +
<title>异步加载</title> 
 +
<script type="text/javascript"> 
 +
function initialize() { 
 +
  var mp = new BMap.Map('map'); 
 +
  mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 
 +
 +
 
 +
function loadScript() { 
 +
  var script = document.createElement("script"); 
 +
  script.src = "http://api.map.baidu.com/api?v=1.5&ak=您的密钥&callback=initialize";//此为v1.5版本的引用方式 
 +
  // http://api.map.baidu.com/api?v=1.5&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式 
 +
  document.body.appendChild(script); 
 +
 +
 
 +
window.onload = loadScript; 
 +
</script> 
 +
</head> 
 +
<body> 
 +
  <div id="map" style="width:500px;height:320px"></div> 
 +
</body> 
 +
</html>
 +
 +
</syntaxhighlight>
 +
 
 +
==兼容性==
 +
{{bluepoint}}浏览器:IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
 +
 
 +
{{bluepoint}}操作系统:Windows、Mac、Linux
 +
 
 +
{{bluepoint}}移动平台:iPhone、Android
 +
 
 +
==获取技术支持途径==
 +
如果您在使用百度地图API中遇到问题,请尝试通过以下途径解决:
 +
 
 +
{{bluepoint}}确认您使用了正确的地图API地址。
 +
 
 +
{{bluepoint}}访问百度地图[http://bbs.lbsyun.baidu.com/ API论坛],查找相关问题的帖子,或者将您的问题发布到贴吧中。
 +
 
 +
{{bluepoint}}查看[http://developer.baidu.com/map/jsqa.htm 常见问题]。
 +
 
 +
{{bluepoint}} 加入[http://developer.baidu.com/map/contact.htm 百度HI群]

2014年8月8日 (五) 09:59的版本

Javascript API功能介绍

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等数据服务。

基本地图功能:展示(支持2D图、3D图、卫星图)、平移、缩放、拖拽等。

地图控件展示功能:可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件,并可以设置各类控件的显示位置。

覆盖物功能:支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等;开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能。

工具类功能:提供经纬度坐标与屏幕坐标互转功能;开源库里提供测距、几何运算及GPS坐标/国测局坐标转百度坐标等功能。

定位功能:支持IP定位及浏览器(支持html5特性浏览器)定位功能。

右键菜单功能:支持在地图上添加右键菜单。

鼠标交互功能:支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能。

图层功能:支持重设地图底图、地图上叠加实时交通图层或自定义图层功能。

本地搜索功能:包括根据城市、矩形范围、圆形范围等条件进行POI搜索;且支持用户自有数据的检索。

公交检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;检索结果支持便捷、可换乘、少步行、不乘地铁四种方案。

驾车检索:支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索;返回最短时间、最短距离、避开高速的驾车导航结果;且提供计算打车费用服务。

步行导航:提供步行导航方案。

逆/地理编码:支持百度坐标与地址描述信息之间的转换服务。

个性化数据展示功能:用户自有数据存储到LBS.云后,JavaScript API可以提供以麻点图形式展示自有数据功能。

面向的读者

API是提供给那些具有一定JavaScript编程经验和了解面向对象概念的读者使用。此外,读者还应该对地图产品有一定的了解。

您在使用中遇到任何问题,都可以通过API论坛反馈给我们。

坐标转换

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上,进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度,需要通过坐标转换接口进行转换。

坐标转换、批量坐标转换示例详见JavaScript API示例【地图示例_坐标换算】。

版本说明及申请API ak

为了统一平台服务的配额管理,JavaScript API在新版本引入ak机制。JavaScript API v1.4及以前版本无须申请密钥(ak),自v1.5版本开始需要先申请密钥(ak),才可使用,超出ak配额部分,可以发送邮件进行申请。

地址:

http://api.map.baidu.com/api?v=1.4 //参数v表示您加载API的版本,使用JavaScript APIv1.4及以前版本可使用此方式引用。
http://api.map.baidu.com/api?v=1.5&ak=您的密钥  //使用JavaScript APIv1.5请先申请密钥ak,按此方式引用。

当权限验证(ak)失败时,会报如下错误:

js-ak-failure.jpg

验证失败的可能原因包括:

尚未在API控制台申请ak,即'...ak=';

密钥设置错误,如E4805d16520de693a3fe707cdc962045为正确的ak,但是设置时输入的ak为E4805d16520de693a3fe707cdc962045xx;

密钥未通过白名单,如下图的ak在非baidu.com域名下会报错。

js-ak-refer.jpg

API控制台关闭JavaScript API时会报错;

jsapi1.png

当API升级后,如果已有接口在使用、命名等方面发生了变化,我们会为其增加一个新的版本号,这不会对您现有的应用造成任何影响。如果升级只是修复一些bug或者在不影响现有功能的前提下增加接口、改善性能,则版本号不会发生变化。您可以在更新日志页面查看版本的变化。

获取Javascript API服务方法

自JSAPIv1.5之后,您需要首先申请密钥(ak),才可成功加载API JS文件。ak的使用方法如下:

<script src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥" type="text/javascript"></script>  

其中参数v为API当前的版本号,目前最新版本为1.5。在1.2版本之前您还可以设置services参数,以告知API是否加载服务部分,true表示加载,false表示不加载,默认为true。

地图API是由JavaScript语言编写的,您在使用之前需要通过<script>标签将API引用到页面中:

使用V1.4及以前版本的引用方式:

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> 

使用V1.5版本的引用方式:

<script src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥" type="text/javascript"></script> 

其中参数v为API当前的版本号,目前最新版本为1.45。在1.2版本之前您还可以设置services参数,以告知API是否加载服务部分,true表示加载,false表示不加载,默认为true。

开发移动平台上的地图应用

API自1.1版本起开始支持iPhone、Android这样的移动平台。用户通过手机浏览器就可以访问由地图API创建出来的应用。移动平台的屏幕尺寸通常比PC或笔记本要小,操作方式也有所不同。为了更好的在手机浏览器上展示地图,我们有如下建议:

将地图容器高设置为100%,使其充满整个屏幕,或者您也可以计算浏览器窗口的大小并进行设置。

添加下面的meta标签: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。

您可以参考 Apple's Developer documentationAndroid documentation 获得更多信息。

js-apiv14-phone.jpg

移动端开发具体实现请参考相关下载_示例代码提供的Demo源码。

异步加载

JavaScript API支持异步加载,您可以在引用脚本的时候添加callback参数,当脚本加载完成后callback函数会被立刻调用。请参考下面的使用示例:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. <title>异步加载</title>  
  6. <script type="text/javascript">  
  7. function initialize() {  
  8.   var mp = new BMap.Map('map');  
  9.   mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  
  10. }  
  11.    
  12. function loadScript() {  
  13.   var script = document.createElement("script");  
  14.   script.src = "http://api.map.baidu.com/api?v=1.5&ak=您的密钥&callback=initialize";//此为v1.5版本的引用方式  
  15.   // http://api.map.baidu.com/api?v=1.5&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式  
  16.   document.body.appendChild(script);  
  17. }  
  18.    
  19. window.onload = loadScript;  
  20. </script>  
  21. </head>  
  22. <body>  
  23.   <div id="map" style="width:500px;height:320px"></div>  
  24. </body>  
  25. </html>

兼容性

浏览器:IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome

操作系统:Windows、Mac、Linux

移动平台:iPhone、Android

获取技术支持途径

如果您在使用百度地图API中遇到问题,请尝试通过以下途径解决:

确认您使用了正确的地图API地址。

访问百度地图API论坛,查找相关问题的帖子,或者将您的问题发布到贴吧中。

查看常见问题

加入百度HI群

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消