百度地图JavaScript API_风云冷雨吧

概述：
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助开发者在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。
在开发者使用百度地图JavaScript API之前，需要先阅读百度地图API使用条款。任何非营利性应用可以直接使用，商业应用需要参考使用须知。
JavaScript API首家支持Https，已全面开放，无需申请可直接使用，同时建议开发者认证企业信息，Web API类产品可获取更高配额。
仅JavaScript API V2.0及以上版本支持https，其他JavaScript API版本均不支持。使用https服务，请先检查版本以及配置注意事项。

送TA礼物

IP属地:浙江

1楼2017-03-25 17:22回复

申请密钥ak网址：http://lbsyun.baidu.com/apiconsole/key

IP属地:浙江

2楼2017-03-25 17:49

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用，包含了构建地图基本功能的各种接口，提供了诸如本地搜索、路线规划等数据服务。
基本地图功能：展示（支持2D图、3D图、卫星图）、平移、缩放、拖拽等。
地图控件展示功能：可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件，并可以设置各类控件的显示位置。
覆盖物功能：支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等；开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能。
工具类功能：提供经纬度坐标与屏幕坐标互转功能；开源库里提供测距、几何运算及GPS坐标/国测局坐标转百度坐标等功能。
定位功能：支持IP定位及浏览器（支持html5特性浏览器）定位功能。
右键菜单功能：支持在地图上添加右键菜单。
鼠标交互功能：支持动态修改鼠标样式、鼠标拖拽/缩放地图及鼠标绘制等功能。
图层功能：支持重设地图底图、地图上叠加实时交通图层或自定义图层功能。
本地搜索功能：包括根据城市、矩形范围、圆形范围等条件进行POI搜索；且支持用户自有数据的检索。
公交检索：支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索；检索结果支持便捷、可换乘、少步行、不乘地铁四种方案。
驾车检索：支持起始点坐标、起始点名称、LocalSearchPoi实例三种检索条件的检索；返回最短时间、最短距离、避开高速的驾车导航结果；且提供计算打车费用服务。
步行导航：提供步行导航方案。
逆/地理编码：支持百度坐标与地址描述信息之间的转换服务。
个性化数据展示功能：用户自有数据存储到LBS.云后，JavaScript API可以提供以麻点图形式展示自有数据功能。

IP属地:浙江

3楼2017-03-25 20:51

坐标转换
国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上，进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度，需要通过坐标转换接口进行转换。
版本说明及申请API ak
为了统一平台服务的配额管理，JavaScript API在新版本引入ak机制。JavaScript API v1.4及以前版本无须申请密钥（ak），自v1.5版本开始需要先申请密钥（ak），才可使用，如需获取更高配额，请点击申请认证企业用户。
地址：
http://api.map.baidu.com/api?v=1.4 //参数v表示您加载API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。http://api.map.baidu.com/api?v=2.0&ak=您的密钥 //使用JavaScript APIv2.0请先申请密钥ak，按此方式引用。

IP属地:浙江

4楼2017-03-25 20:59

当API升级后，如果已有接口在使用、命名等方面发生了变化，我们会为其增加一个新的版本号，这不会对现有的应用造成任何影响。如果升级只是修复一些bug或者在不影响现有功能的前提下增加接口、改善性能，则版本号不会发生变化。可以在更新日志页面查看版本的变化。
错误的使用“服务端AK”用于 JavaScript API，JS API只支持浏览器类型的ak（自2016年1月15日升级）
因新系统升级，新建“服务端AK”不再支持浏览器端使用；在浏览器端使用，请选择“浏览器端AK”，例如JavaScript API只支持浏览器类型AK。
对于以前申请的服务端AK，不变更即不受影响，仍支持浏览器端使用；如更新老的服务端AK，再次保存，则按新创建AK处理，不再支持浏览器端使用。

IP属地:浙江

6楼2017-03-25 21:32

获取JavaScript API服务方法
自JS APIv1.5之后，最新版本为2.0，您需要首先申请密钥（ak），才可成功加载API JS文件。ak的使用方法如下：
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type="text/javascript"></script>
其中参数v为API当前的版本号，目前最新版本为2.0。在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>
使用V2.0版本的引用方式：
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type="text/javascript"></script>
其中参数v为API当前的版本号，目前最新版本为2.0。在1.2版本之前您还可以设置services参数，以告知API是否加载服务部分，true表示加载，false表示不加载，默认为true。

IP属地:浙江

7楼2017-03-25 22:27

开发移动平台上的地图应用
API自1.1版本起开始支持iPhone、Android这样的移动平台。用户通过手机浏览器就可以访问由地图API创建出来的应用。移动平台的屏幕尺寸通常比PC或笔记本要小，操作方式也有所不同。为了更好的在手机浏览器上展示地图，我们有如下建议：
将地图容器高设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。
添加下面的meta标签： <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。
您可以参考 Apple's Developer documentation 和 Android documentation 获得更多信息。

IP属地:浙江

8楼2017-03-26 15:30

Https 说明
申请
JavaScript API首家支持Https，已全面开放，无需申请Https服务可直接使用。
如需要更高配额，请认证企业信息，成为企业认证用户后，获得更高的服务配额。
注意：仅JavaScript API V2.0 版本支持https，其他JavaScript API版本均不支持。使用https服务，请先检查您的版本。
配置
1. 如果使用JavaScript API ，需要加一个特殊字段 (s=1)：
https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1；
2. 对于Web API 无需加特殊字段，直接使用 HTTPS协议访问即可，如Geocoding：
https://api.map.baidu.com/geocoder/v2/?ak=你的秘钥&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1
3. 如果对数据安全要求高，建议使用 POST请求，避免把请求参数放到 URI中敏感信息被泄露；

IP属地:浙江

10楼2017-03-26 15:43

异步加载
JavaScript API支持异步加载，您可以在引用脚本的时候添加callback参数，当脚本加载完成后callback函数会被立刻调用。请参考下面的使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>异步加载</title>
<script type="text/javascript">
function initialize() {
var mp = new BMap.Map('map');
// 创建Map实例
mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
// 初始化地图,设置中心点坐标和地图级别
}
function loadScript() {
var script = document.createElement("script");
//document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize";//此为v2.0版本的引用方式
// http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
document.body.appendChild(script);
//在body后添加js的script方法
}
window.onload = loadScript;
//在页面onload加载时执行js的loadScript方法
</script>
</head>
<body>
<div id="map" style="width:500px;height:320px"></div>
</body>
</html>

IP属地:浙江

11楼2017-03-26 17:59

兼容性
浏览器：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
操作系统：Windows、Mac、Linux
移动平台：iPhone、Android
获取技术支持途径
如果在使用百度地图API中遇到问题，请尝试通过以下途径解决：
确认您使用了正确的地图API地址。
访问百度地图API论坛，查找相关问题的帖子，或者将您的问题发布到贴吧中。
查看常见问题：http://lbsyun.baidu.com/index.php?title=jspopular/qa。
加入百度HI群：http://bbs.lbsyun.baidu.com/forum.php。

IP属地:浙江

12楼2017-03-26 18:53

百度地图的“Hello, World”
开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个地图并以天安门作为地图的中心：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript"> var map = new BMap.Map("container");
// 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 </script>
</body>
</html>

IP属地:浙江

13楼2017-03-28 21:16

下面分步介绍下设计步骤：
准备页面
根据HTML标准，每一份HTML文档都应该声明正确的文档类型，建议使用最新的符合HTML5规范的文档声明：
<!DOCTYPE html>
也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。不建议您使用quirks模式进行开发。
下面添加一个meta标签，以便使页面更好的在移动平台上展示。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
接着设置样式，使地图充满整个浏览器窗口：
<style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
引用百度地图API文件使用V1.4及以前版本的引用方式：
创建地图容器元素地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。
命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
创建地图实例
var map = new BMap.Map("container");
位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
创建点坐标
var point = new BMap.Point(116.404, 39.915);
这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。
地图初始化
map.centerAndZoom(point, 15);
在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

IP属地:浙江

14楼2017-03-28 21:23

地图配置与操作
地图被实例化并完成初始化以后，就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。可以修改配置来改变这些功能。比如，默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，但是如果您希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考的配置方法一节中找到。
此外，还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。
下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function(){ map.panTo(new BMap.Point(116.409, 39.918)); }, 2000);

IP属地:浙江

15楼2017-03-28 21:26

地图控件概述
百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，还可以通过Control类来实现自定义控件。
地图API中提供的控件有：
Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类可实现自定义控件。
NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
MapTypeControl：地图类型控件，默认位于地图右上方。
CopyrightControl：版权控件，默认位于地图左下方。
GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

IP属地:浙江

16楼2017-03-28 22:08

向地图添加控件
可以使用Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl());
可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。
map.addControl(new BMap.NavigationControl()); //平移缩放控件
map.addControl(new BMap.ScaleControl()); //比例尺控件
map.addControl(new BMap.OverviewMapControl()); // 缩略图控件
map.addControl(new BMap.MapTypeControl()); //切换地图类型的控件
map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用控制控件位置
初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。
控件停靠位置 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。anchor允许的值为：
BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。

IP属地:浙江

17楼2017-03-28 22:16

日	一	二	三	四	五	六

百度地图JavaScript API

登录百度账号

扫二维码下载贴吧客户端