百度地图Web服务api文档

#百度 #Web服务API 2022-05-31

Web服务API

百度地图Web服务API为开发者提供http/https接口，即开发者通过http/https形式发起检索请求，获取返回json或xml格式的检索数据。用户可以基于此开发JavaScript、C#、C++、Java等语言的地图应用。

核心服务简介

地点检索服务
地点输入提示服务
正/逆地理编码服务
路线规划服务
批量算路服务
IP定位服务
鹰眼轨迹服务
轻量级轨迹服务
时区服务
推荐上车点服务
坐标转换服务
地图调起服务
静态图服务
全景静态图服务

获取密钥

访问应用（AK）： NwrFdXX7d9ulyeUvuvrRL1pRwHEHl7qU 浏览器端

vVo0GpUwrXGIyq7Xpv6U7Bui5dNGDjaL 服务端

C3mLyfNmVlzGD4lZEpsMK0GhuxDPmQKB js API

地点检索

地点检索服务

地点检索服务（又名Place API）是一类Web API接口服务；服务提供多种场景的地点（POI）检索功能，包括城市检索、圆形区域检索、矩形区域检索。开发者可通过接口获取地点（POI）基础或详细地理信息。注意：地点检索服务适用于【XX大厦】、【XX小区】等POI地点名称的检索，若需要检索结构化地址，如【北京市海淀区上地十街十号】，则推荐使用地理编码服务。

1、功能介绍

行政区划区域检索

开发者可通过该功能，检索某一行政区划内（目前最细到城市级别）的地点信息。

圆形区域检索

开发者可设置圆心和半径，检索圆形区域内的地点信息（常用于周边检索场景）。

地点详情检索

不同于其他三种检索功能。地点详情检索针对指定POI，检索其相关的详情信息。开发者可以通过三种区域检索（或其他服务）功能，获取POI id。使用“地点详情检索”功能，传入id，即可检索POI详情信息，如评分、营业时间等（不同类型POI对应不同类别详情数据）。

多边形区域检索

多边形区域检索为高级权限，如有需求请提交【工单】咨询。

2、服务文档

行政区划区域检索

1	https://api.map.baidu.com/place/v2/search?query=ATM机&tag=银行&region=北京&output=json&ak=您的ak //GET请求

返回结果如下：

圆形区域检索

1	https://api.map.baidu.com/place/v2/search?query=银行&location=39.915,116.404&radius=2000&output=xml&ak=您的密钥 //GET请求

其中query是检索关键字。圆形区域检索和矩形区域内检索支持多个关键字并集检索，不同关键字间以\(符号分隔，最多支持10个关键字检索。如:”银行\)酒店” 如果需要按POI分类进行检索，请将分类通过query参数进行设置，如query=美食

page_size单次召回POI数量，默认为10条记录，最大返回20条

返回结果如下：

地点详情检索服务

1	https://api.map.baidu.com/place/v2/detail?uid=435d7aea036e54355abbbcc8&output=json&scope=2&ak=您的密钥 //GET请求

返回结果如下：

地址输入提示服务

地点输入提示服务（又名Place Suggestion API）是一类Web API接口服务；

匹配用户输入内容，提供输入提示功能。常与地点检索服务搭配使用。也可作为轻量级地点检索服务单独使用（不支持复杂检索场景）。

1、功能介绍

地点输入提示

用户可通过该服务，匹配用户输入关键词的地点推荐列表。在应用方面，可将地点推荐列表展示给用户，用户可通过点击等交互方式，结合地点检索服务，检索用户点击的POI信息，实现地点详情检索功能。

轻量级地点检索

通过关键词和检索城市限制，可满足轻量级地点检索需求，获取地点基础数据

2、服务文档

1	https://api.map.baidu.com/place/v2/suggestion?query=天安门&region=北京&city_limit=true&output=json&ak=你的ak //GET请求

结果如下：

正/逆地理编码服务

地理编码服务（又名Geocoder）是一类Web API接口服务； 地理编码服务提供将结构化地址数据（如：北京市海淀区上地十街十号）转换为对应坐标点（经纬度）功能；地理编码服务当前未推出国际化服务，解析地址仅限国内；

1、功能介绍

地理编码服务

用户可通过该功能，将结构化地址（省/市/区/街道/门牌号）解析为对应的位置坐标。地址结构越完整，地址内容越准确，解析的坐标精度越高。

2、服务文档

1
2

https://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output=json&ak=您的ak&callback=showLocation //GET请求
注意：当前为V3.0版本接口文档，V2.0及以前版本自2019.6.18起新用户无法使用。老用户仍可继续使用V2.0及以前版本请求实现逆地理编码服务，为保障用户体验，建议您尽快迁移到V3.0版本。

请求如下：

结果如下：

天气查询

1、功能介绍

国内天气查询服务分为基础服务和高级权限。在基础服务中，用户可通过行政区划代码查询实时天气信息及未来5天天气预报。在高级权限中，用户可通过经纬度查询实时天气信息、未来7天天气预报及未来24小时逐小时预报。同时，用户还可以通过高级权限获取空气质量指数、生活指数、气象预警等丰富信息。高级权限需付费开通，您可以联系我们开通15天试用并了解更多信息。

2、服务文档

1	https://api.map.baidu.com/weather/v1/?district_id=222405&data_type=all&ak=你的ak //GET请求

结果如下：

地址解析聚合

1、功能介绍

该服务用于解析地址结构。结合自然语言理解能力，可以对地址信息按照文本信息、空间位置信息等因子进行区域化聚合。同时也可解析并提取地址中核心结构，如行政区划（省、市、区、乡镇）、街道、POI，以及地址中的联系人，联系方式等信息，并对地址进行一定的补全和纠错。

聚合模式

将地址按照基础地物进行分类聚合，结合百度地图领先的地图地理信息解析能力以及百度NLP自然语言能力，对地址信息进行结构化理解，并结合基础地图单位进行位置聚合。目前可聚合的单位为：省、市、区县、乡镇街道、道路、路段、末端地点（POI或AOI）

标准化模式

结构化解析并提取复杂地址中的核心内容，包含人名、联系方式、行政区划结构（省、市、区县、乡镇街道）、POI信息。

异常地址识别服务

针对系统传入地址进行判断是否存在不合规的情况，通过找到不合规的case问题，系统给用户提示问题的原因，来协助降低地址输入时的错误率。

2、服务文档

1	https://api.map.baidu.com/address_analyzer/v1?address=北京市海淀区信息路甲九号&ak=你的ak

付费服务

JavaScript API v3.0

使用方法

ak申请需要选择浏览器端-Javascript API

百度地图的Hello World

<!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="https://api.map.baidu.com/api?v=3.0&ak=您的密钥">
//v3.0版本的引用方式：src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</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>

分步步骤：

1申请百度账号和ak

点我申请

2准备页面

根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：

1	<!DOCTYPE html>

您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。

3适应移动端页面展示

下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。

1	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

4设置容器样式

设置容器样式大小，使地图充满整个浏览器窗口：

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style>

5引用百度地图API文件

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

6创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

1	<div id="container"></div>

7创建地图实例

位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

1	var map = new BMap.Map("container");

注意：

1.在调用此构造函数时应确保容器元素已经添加到地图上。

2.命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

8设置中心点坐标

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）

1	var point = new BMap.Point(116.404, 39.915);

注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法！！！

9地图初始化，同时设置地图展示级别

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

1	map.centerAndZoom(point, 15);

至此，我们就快速创建了一张以天安门为中心的地图~

1、地图配置与操作

默认情况下地图不支持鼠标滚轮缩放操作，如果希望在地图中使用鼠标滚轮控制缩放，可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考中找到。

map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考中找到。

此外，您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。

示例：等待两秒钟后，地图它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。

2、坐标转换说明

目前国内主要有以下三种坐标系：

WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。

BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。

非中国地区地图，服务坐标统一使用WGS84坐标。

其他坐标转百度坐标

百度对外接口的坐标系为BD09坐标系，并不是GPS采集的真实经纬度，在使用百度地图JavaScript API服务前，需先将非百度坐标通过坐标转换接口转换成百度坐标。坐标转换、批量坐标转换示例详见JavaScript API示例。

3、添加控件

百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过Control类来实现自定义控件。

提供的控件

详情可见类参考。

控件	类名	简介
抽象基类	Control	所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
平移缩放控件	NavigationControl	PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方
缩略地图	OverviewMapControl	默认位于地图右下方，是一个可折叠的缩略地图
比例尺	ScaleControl	默认位于地图左下方，显示地图的比例关系
地图类型	MapTypeControl	默认位于地图右上方
版权	CopyrightControl	默认位于地图左下方
定位	GeolocationControl	针对移动端开发，默认位于地图左下方

向地图添加控件

可以使用Map.addControl()方法向地图添加控件。

1地图初始化

添加控件前，地图需要进行初始化。例如，要将标准地图控件添加到地图中，可在代码中添加如下内容：

1
2
3

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addControl(new BMap.NavigationControl());

添加平移缩放控件效果如下：

2添加多个控件

在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后，它们即刻生效。

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	表示控件定位于地图的右下角

控件位置偏移

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

如下示例为：将比例尺放置在地图的左下角，由于API默认会有版权信息，因此需要添加一些偏移值以防止控件重叠。

1 2	var opts = {offset: new BMap.Size(150, 5)} map.addControl(new BMap.ScaleControl(opts));

修改控件配置

地图API的控件提供了丰富的配置参数，您可参考API文档来修改它们以便得到符合要求的控件外观。例如，NavigationControl控件就提供了如下类型：

平移缩放控件的类型	说明
BMAP_NAVIGATION_CONTROL_LARGE	表示显示完整的平移缩放控件
BMAP_NAVIGATION_CONTROL_SMALL	表示显示小型的平移缩放控件
BMAP_NAVIGATION_CONTROL_PAN	表示只显示控件的平移部分功能
BMAP_NAVIGATION_CONTROL_ZOOM	表示只显示控件的缩放部分功能

下图从左向右依次展示了上述不同类型的控件外观，前四个为PC端平移缩放控件样式，最后一个为移动端缩放控件样式：

如下示例为：将调整平移缩放地图控件的外观。

1 2	var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} map.addControl(new BMap.NavigationControl(opts));

自定义控件

百度地图API允许您通过继承Control来创建自定义地图控件。

1定义一个自定义控件的构造函数并继承Control

您需要定义自定义控件的构造函数，并在构造函数中提供defaultAnchor和defaultOffset两个属性，以便API正确定位控件位置，接着让其继承于Control。在下面的示例中我们定义一个名为ZoomControl的控件，每一次点击将地图放大两个级别。它具有文本标识，而不是平移缩放控件中使用的图形图标。

// 定义一个控件类，即function    
function ZoomControl(){    
    // 设置默认停靠位置和偏移量  
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
    this.defaultOffset = new BMap.Size(10, 10);    
}    
// 通过JavaScript的prototype属性继承于BMap.Control   
ZoomControl.prototype = new BMap.Control();

2初始化自定义控件

设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类。

当调用map.addControl()方法添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件，您需要实现此方法并在其中创建控件所需的DOM元素，并添加DOM事件。所有自定义控件中的DOM元素最终都应该添加到地图容器（即地图所在的DOM元素）中去，地图容器可以通过map.getContainer()方法获得。最后initialize()方法需要返回控件容器的DOM元素。

// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
ZoomControl.prototype.initialize = function(map){    
    // 创建一个DOM元素   
    var div = document.createElement("div");    
    // 添加文字说明    
    div.appendChild(document.createTextNode("放大2级"));    
    // 设置样式    
    div.style.cursor = "pointer";    
    div.style.border = "1px solid gray";    
    div.style.backgroundColor = "white";    
    // 绑定事件，点击一次放大两级    
    div.onclick = function(e){  
        map.zoomTo(map.getZoom() + 2);    
    }    
    // 添加DOM元素到地图中   
    map.getContainer().appendChild(div);    
    // 将DOM元素返回  
    return div;    
 }

3添加自定义控件

添加自定义控件与添加其他控件方法一致，调用map.addControl()方法即可。

// 创建控件实例    
var myZoomCtrl = new ZoomControl();    
// 添加到地图当中    
map.addControl(myZoomCtrl);

4、标注

所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

覆盖物主要分为：标注（点标注、矢量图形（包括折线、多边形、圆））、信息窗口、图层。

本节重点介绍一下如何向地图添加标注，以及与地图相关的一些交互。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{height:500px;width:100%;}
		#r-result{width:100%;}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<title>添加/删除覆盖物</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="r-result">
		<input type="button" onclick="add_overlay();" value="添加覆盖物" />
		<input type="button" onclick="remove_overlay();" value="删除覆盖物" />
	</div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.404, 39.915);
	map.centerAndZoom(point, 15);
	
	var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
	var polyline = new BMap.Polyline([
		new BMap.Point(116.399, 39.910),
		new BMap.Point(116.405, 39.920),
		new BMap.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   //创建折线
	
	var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
	
	var polygon = new BMap.Polygon([
		new BMap.Point(116.387112,39.920977),
		new BMap.Point(116.385243,39.913063),
		new BMap.Point(116.394226,39.917988),
		new BMap.Point(116.401772,39.921364),
		new BMap.Point(116.41248,39.927893)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
	
	var pStart = new BMap.Point(116.392214,39.918985);
	var pEnd = new BMap.Point(116.41478,39.911901);
	var rectangle = new BMap.Polygon([
		new BMap.Point(pStart.lng,pStart.lat),
		new BMap.Point(pEnd.lng,pStart.lat),
		new BMap.Point(pEnd.lng,pEnd.lat),
		new BMap.Point(pStart.lng,pEnd.lat)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建矩形
	
	//添加覆盖物
	function add_overlay(){
		map.addOverlay(marker);            //增加点
		map.addOverlay(polyline);          //增加折线
		map.addOverlay(circle);            //增加圆
		map.addOverlay(polygon);           //增加多边形
		map.addOverlay(rectangle);         //增加矩形
	}
	//清除覆盖物
	function remove_overlay(){
		map.clearOverlays();         
	}
</script>

1、提供的覆盖物

可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。

详情请见类参考。

覆盖物	类名	说明
抽象基类	Overlay	所有的覆盖物均继承此类的方法
点	Marker	表示地图上的点，可自定义标注的图标
文本	Label	表示地图上的文本标注，您可以自定义标注的文本内容
折线	Polyline	表示地图上的折线
多边形	Polygon	表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色
圆	Circle	表示地图上的圆
信息窗口	InfoWindow	信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开
地面叠加层	GoundOverlay	表示叠加在地图上的图片，图片的链接、大小、位置等属性可以自定义
海量点	PointCollection	针对点的数量很大的情况，可以使用海量点进行展示
自定义覆盖物	自定义	支持通过继承覆盖物基类Overlay，自定义覆盖物

2、标注点

Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。

API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions（可选）。

注意：当您使用自定义图标时，标注的地理坐标点将位于标注所用图标的中心位置，您可通过Icon的offset属性修改标定位置。

Marker使用详情请见类参考。

1向地图添加标注

如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中

2定义标注图标

通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置，您也可以使用marker.setIcon()方法。

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);  // 编写自定义函数，创建标注   
function addMarker(point, index){  // 创建图标对象   
    var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), {    
        // 指定定位位置。   
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
        // 图标中央下端的尖角位置。    
        anchor: new BMap.Size(10, 25),    
        // 设置图片偏移。   
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
        imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
    });      
    // 创建标注对象并添加到地图   
    var marker = new BMap.Marker(point, {icon: myIcon});    
    map.addOverlay(marker);    
}    
// 随机向地图添加10个标注    
var bounds = map.getBounds();    
var lngSpan = bounds.maxX - bounds.minX;    
var latSpan = bounds.maxY - bounds.minY;    
for (var i = 0; i < 10; i ++) {    
    var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
                                  bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
    addMarker(point, i);    
}

3监听标注事件

事件方法与Map事件机制相同。可参考事件部分。

1
2
3

marker.addEventListener("click", function(){    
    alert("您点击了标注");    
});

4可拖拽的标注

marker的enableDragging和disableDragging方法可用来开启和关闭标注的拖拽功能。默认情况下标注不支持拖拽，您需要调用marker.enableDragging()方法来开启拖拽功能。在标注开启拖拽功能后，您可以监听标注的dragend事件来捕获拖拽后标注的最新位置。

marker.enableDragging();    
marker.addEventListener("dragend", function(e){    
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
})

5、自定义标注

本节重点介绍如何向地图添加自定义标注覆盖物。覆盖物相关使用详情请见类参考。

1、定义构造函数并继承Overlay

首先您需要定义自定义覆盖物的构造函数，通过构造函数参数可以传递一些自由的变量。设置自定义覆盖物对象的prototype属性为Overlay的实例，以便继承覆盖物基类。

如下示例，我们定义一个名为SquareOverlay的构造函数，它包含中心点和边长两个参数，用来在地图上创建一个方形覆盖物。

// 定义自定义覆盖物的构造函数  
function SquareOverlay(center, length, color){
    this._center = center;
    this._length = length;
    this._color = color;
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();

2、初始化自定义覆盖物

实现initialize方法，当调用map.addOverlay方法时，API会调用此方法。

当调用map.addOverlay方法添加自定义覆盖物时，API会调用该对象的initialize方法用来初始化覆盖物，在初始化过程中需要创建覆盖物所需要的DOM元素，并添加到地图相应的容器中。这里我们选择添加在容器markerPane上。

// 实现初始化方法  
SquareOverlay.prototype.initialize = function(map){
    // 保存map对象实例
    this._map = map;
    // 创建div元素，作为自定义覆盖物的容器
    var div = document.createElement("div");
    div.style.position = "absolute";
    // 可以根据参数设置元素外观
    div.style.width = this._length + "px";
    div.style.height = this._length + "px";
    div.style.background = this._color;
    // 将div添加到覆盖物容器中
    map.getPanes().markerPane.appendChild(div);
    // 保存div实例
    this._div = div;
    // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
    // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
    return div;
}

地图提供了若干容器供覆盖物展示，通过map.getPanes方法可以得到这些容器元素，它们包括：

floatPane

markerMouseTarget

floatShadow

labelPane

markerPane

mapPane

这些对象代表了不同的覆盖物容器元素，它们之间存在着覆盖关系，最上一层为floatPane，用于显示信息窗口内容，下面依次为标注点击区域层、信息窗口阴影层、文本标注层、标注层和矢量图形层。

我们自定义的方形覆盖物可以添加到任意图层上，如上示例，我们选择添加到markerPane上，作为其一个子结点。

3、绘制覆盖物

实现draw方法。

到目前为止，我们仅仅把覆盖物添加到了地图上，但是并没有将它放置在正确的位置上。

您需要在draw方法中设置覆盖物的位置，每当地图状态发生变化（比如：位置移动、级别变化）时，API都会调用覆盖物的draw方法，用于重新计算覆盖物的位置。

通过map.pointToOverlayPixel方法可以将地理坐标转换到覆盖物的所需要的像素坐标。

// 实现绘制方法   
SquareOverlay.prototype.draw = function(){    
// 根据地理坐标转换为像素坐标，并设置给容器    
    var position = this._map.pointToOverlayPixel(this._center);    
    this._div.style.left = position.x - this._length / 2 + "px";    
    this._div.style.top = position.y - this._length / 2 + "px";    
}

4、移除覆盖物

当调用map.removeOverlay或者map.clearOverlays方法时，API会自动将initialize方法返回的DOM元素进行移除。

5、显示和隐藏覆盖物

自定义覆盖物会自动继承Overlay的show和hide方法，方法会修改由initialize方法返回的DOM元素的style.display属性。

如果自定义覆盖物元素较为复杂，您也可以自己实现show和hide方法。

// 实现显示方法    
SquareOverlay.prototype.show = function(){    
    if (this._div){    
        this._div.style.display = "";    
    }    
}      
// 实现隐藏方法  
SquareOverlay.prototype.hide = function(){    
    if (this._div){    
        this._div.style.display = "none";    
    }    
}

自定义其他方法通过构造函数的prototype属性，您可以添加任何自定义的方法，比如下面这个方法每调用一次就能改变覆盖物的显示状态：

// 添加自定义方法   
SquareOverlay.prototype.toggle = function(){    
    if (this._div){    
        if (this._div.style.display == ""){    
            this.hide();    
        }    
        else {    
            this.show();    
        }    
    }    
}

6、添加覆盖物

您现在已经完成了一个完整的自定义覆盖物的编写，可以添加到地图上了。

// 初始化地图  
var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
// 添加自定义覆盖物   
var mySquare = new SquareOverlay(map.getCenter(), 100, "red");    
map.addOverlay(mySquare);

6、信息窗口

1、提供的信息窗口

InfoWindow：信息窗口。也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。

详情可见类参考。

2、添加信息窗口

信息窗口是地图上方浮动显示的HTML内容，可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。

注意：同一时刻地图上只能有一个信息窗口处于打开状态。

var opts = {    
    width : 250,     // 信息窗口宽度    
    height: 100,     // 信息窗口高度    
    title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

3、提供的自定义信息窗口工具

百度地图还向开发者提供自定义的信息窗口工具。

infoBox：自定义信息窗口工具。类似于infoWindow，比infoWindow更有灵活性，比如可以定制border，关闭按钮样式等。

详情可见类参考。点击查看示例

7、叠加图层

地图可以包含一个或多个图层，每个图层在每个级别都是由若干张图块组成的，它们覆盖了地球的整个表面。例如您所看到包括街道、兴趣点、学校、公园等内容的地图展现就是一个图层，另外交通流量的展现也是通过图层来实现的。

DEMO详情

提供的图层

TrafficLayer：交通流量图层。详情可见类参考。

添加和移除图层

通过map.addTileLayer方法可向地图添加图层，例如下面代码将显示北京市的交通流量。

var map = new BMap.Map("l-map");         // 创建地图实例      
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标     
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别     
var traffic = new BMap.TrafficLayer();        // 创建交通流量图层实例      
map.addTileLayer(traffic);                    // 将图层添加到地图上

若要从地图上移除图层，需要调用map.removeTileLayer方法。

1	map.removeTileLayer(traffic); // 将图层移除

8、自定义叠加图层

百度地图API支持丰富的图层展示，除了支持在“叠加图层页面”介绍的交通流量图层，还支持图片、栅格图，可以根据自己的实际情况实现自定义栅格图层和自定义图层。

1、基础知识——百度地图坐标系

在使用自定义方式叠加图层之前，您需要先了解百度地图的地图坐标系。百度地图坐标系涉及：

经纬度球面坐标系统
墨卡托平面坐标系统
图块编号系统

XY经纬度球面坐标系统

经纬度是一种利用三维空间的球面来定义地球上的空间的球面坐标系，它能够标示地球上任何一个位置。

通过伦敦格林尼治天文台原址的经线为0度经线，从0度经线向东、向西各分180度。赤道为0度纬线，赤道以北的纬线称为北纬、以南的称为南纬。

在百度地图中，东经和北纬用正数表示，西经和南纬用负数表示。例如北京的位置大约是北纬39.9度，东经116.4度，那么用数值标示就是经度116.6，纬度39.9。

在百度地图中，习惯经度在前，纬度在后，例如：

1	var point = new BMap.Point(116.404, 39.915); // 创建点坐标，经度在前，纬度在后

XY墨卡托平面坐标系统

由于百度地图是显示在平面上的，因此在地图内部系统中需要将球面坐标转换为平面坐标，这个转换过程称为投影。

百度地图使用的是墨卡托投影。墨卡托平面坐标如下图所示，平面坐标与经纬度坐标系的原点是重合的。

XY图块编号系统

百度地图在每一个级别将整个地图划分成若干个图块，通过编号系统将整个图块整合在一起以便显示完整的地图。当地图被拖动或者级别发生变化时，地图API将会根据平面坐标计算出当前视野内所需显示的图块的编号。

百度地图图块编号规则如下图所示：

从平面坐标原点开始的右上方向的图块编号为0,0，以此类推。在最低的缩放级别（级别 1）中，整个地球由4张图块组成。随着级别的增长，地图所使用的图块个数也随之增多。

9、自定义绘制层

JavaScript API v3.0 的Overlay中，新增了CanvasLayer类。提供了在地图上绘制自定义的Canvas2D或WebGL覆盖物的功能。绘制的覆盖物和其他的Overlay一样，会根据自己的经纬度贴合在地图上。

创建Canvas2D覆盖物

CanvasLayer类提供了在地图上进行Web前端canvas绘制的功能。具体的canvas绘制方法和逻辑可以参考canvas的相关资料。使用CanvasLayer的简单示例如下：

var mp = new BMap.Map("allmap");
mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10);

var canvasLayer = new BMap.CanvasLayer({
    update: update
});

function update() {
    var ctx = this.canvas.getContext("2d");

    if (!ctx) {
        return;
    }

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    var temp = {};
    ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
    ctx.beginPath();
    var data = [
    new BMap.Point(116.297047,39.979542),
    new BMap.Point(116.321768,39.88748),
    new BMap.Point(116.494243,39.956539)
    ];

    for (var i = 0, len = data.length; i < len; i++) {

        // 绘制时需要对经纬度进行转换
        var pixel = mp.pointToPixel(data[i]);

        ctx.fillRect(pixel.x, pixel.y, 30, 30);
    }
}

mp.addOverlay(canvasLayer);

注意这里的api应该使用3.0版本的而不是2.0版本的不然会导致Uncaught TypeError: BMap.CanvasLayer is not a constructor

10、事件处理

浏览器中的JavaScript是“事件驱动的”，这表示JavaScript通过生成事件来响应交互，并期望程序能够“监听”感兴趣的活动。例如，在浏览器中，用户的鼠标和键盘交互可以创建在DOM内传播的事件。对某些事件感兴趣的程序会为这些事件注册JavaScript事件监听器，并在接收这些事件时执行代码。

百度地图API拥有一个自己的事件模型，程序员可监听地图API对象的自定义事件，使用方法和DOM事件类似。但请注意，地图API事件是独立的，与标准DOM事件不同。

1、事件监听

百度地图API中的大部分对象都含有addEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.Map包含click、dblclick等事件。在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e，比如当用户点击地图时，e参数会包含鼠标所对应的地理位置point。

有关地图API对象的事件，请参考完整的API类参考文档。

1弹窗事件

addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。

如下示例中，每当用户点击地图时，会弹出一个警告框：

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("click", function(){    
    alert("您点击了地图。");    
}
);

2捕获状态

通过监听事件还可以捕获事件触发后的状态。

如下示例，显示用户拖动地图后地图中心的经纬度信息：

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("dragend", function(){    
    var center = map.getCenter();    
    alert("地图中心点变更为：" + center.lng + ", " + center.lat);    
}
);

2、事件参数和this

在标准的DOM事件模型中（DOM Level 2 Events），监听函数会得到一个事件对象e，在e中可以获取有关该事件的信息。同时在监听函数中this会指向触发该事件的DOM元素。

百度地图API的事件模型与此类似，在事件监听函数中传递事件对象e，每个e参数至少包含事件类型（type）和触发该事件的对象（target）。

API还保证函数内的this指向触发（同时也是绑定）事件的API对象。

1事件参数e获取有关信息

例如，通过参数e得到点击的经纬度坐标：

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("click", function(e){    
    alert(e.point.lng + ", " + e.point.lat);    
});

2this指向DOM元素

监听函数中this会指向触发该事件的DOM元素。

如下示例，通过this得到地图缩放后的级别：

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addEventListener("zoomend", function(){    
    alert("地图缩放至：" + this.getZoom() + "级");    
});

3、移除监听事件

当您不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。

1移除监听事件

如下示例中，用户第一次点击地图会触发事件监听函数，在函数内部对事件监听进行了移除，因此后续的点击操作则不会触发监听函数。

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
function showInfo(e){    
    alert(e.point.lng + ", " + e.point.lat);    
    map.removeEventListener("click", showInfo);    
}    
map.addEventListener("click", showInfo);

11、检索POI

简介

检索服务提供某一特定地区的兴趣点位置查询服务（POI：Point of Interest，感兴趣点）。允许设置检索城市、检索圆形区域内POI、检索矩形区域内POI、检索结果详情。

1、提供的检索服务

LocalSearch：本地搜索，提供某一特定地区的位置搜索服务，比如在北京市搜索“公园”。目前支持城市检索、圆形检索、矩形检索。详情可见类参考。

说明：BMap.LocalSearch提供本地搜索服务，在使用本地搜索时需要为其设置一个检索区域，检索区域可以是BMap.Map对象、BMap.Point对象或者是省市名称（比如："北京市"）的字符串。BMap.LocalSearch构造函数的第二个参数是可选的，您可以在其中指定结果的呈现。BMap.RenderOptions类提供了若干控制呈现的属性，其中map指定了结果所展现的地图实例，panel指定了结果列表的容器元素。

2、检索POI方法

检索POI服务提供三种检索方法：城市检索、圆形区域检索、矩形区域检索。

1城市检索

search方法提供根据关键字检索特定POI信息服务。如下示例，为根据关键字“天安门”检索POI：

var map = new BMap.Map("container");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
var local = new BMap.LocalSearch(map, {      
    renderOptions:{map: map}      
});      
local.search("天安门");

2圆形区域检索

searchNearby方法提供圆形区域检索服务。您可以在某个地点附近进行搜索，也可以在某一个特定结果点周围进行搜索。下面示例展示如何在前门附近搜索小吃：

var map = new BMap.Map("container");         
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
var local = new BMap.LocalSearch(map,   
              { renderOptions:{map: map, autoViewport: true}});      
local.searchNearby("小吃", "前门");

3矩形区域检索

searchInBounds方法提供矩形区域检索服务。矩形范围搜索将根据您提供的视野范围提供搜索结果。

注意：当搜索范围过大时可能会出现无结果的情况。

如下示例，展示在当前地图视野范围内搜索银行：

var map = new BMap.Map("container");        
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);      
var local = new BMap.LocalSearch(map,   
              { renderOptions:{map: map}});      
local.searchInBounds("银行", map.getBounds());

1	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl?v=2.0&ak=C3mLyfNmVlzGD4lZEpsMK0GhuxDPmQKB">

3、配置搜索

BMap.LocalSearch提供了若干配置方法，通过它们可以自定义搜索服务的行为以满足您的需求。

如下示例中，我们调整每页显示8个结果，并且根据结果点位置自动调整地图视野，不显示第一条结果的信息窗口：

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);  
var local = new BMap.LocalSearch("北京市",   
            {renderOptions: {map: map,autoViewport: true},pageCapacity: 8});      
local.search("中关村");

4、结果面板

通过设置BMap.LocalSearchOptions.renderOptions.panel属性，可以为本地搜索对象提供一个结果列表容器，搜索结果会自动添加到容器元素中。

如下示例：

var map = new BMap.Map("container");     
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  
var local = new BMap.LocalSearch(map,   
            {renderOptions: {map: map,panel: "results"});      
local.search("中关村");

5、数据接口

除了搜索结果会自动添加到地图和列表外，您还可以通过数据接口获得详细的数据信息，结合地图API您可以自行向地图添加标注和信息窗口。

BMap.LocalSearch和BMap.LocalSearchOptions类提供了若干设置回调函数的接口，通过它们可得到搜索结果的数据信息。例如，通过onSearchComplete回调函数参数可以获得BMap.LocalResult对象实例，它包含了每一次搜索结果的数据信息。当回调函数被执行时，您可以使用BMap.LocalSearch.getStatus()方法来确认搜索是否成功或者得到错误的详细信息。

在下面这个示例中，通过onSearchComplete回调函数得到第一页每条结果的标题和地址信息，并输出到页面上：

var map = new BMap.Map("container");          
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
var options = {      
    onSearchComplete: function(results){      
        if (local.getStatus() == BMAP_STATUS_SUCCESS){      
            // 判断状态是否正确      
            var s = [];      
            for (var i = 0; i < results.getCurrentNumPois(); i ++){      
                s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);      
            }      
            document.getElementById("log").innerHTML = s.join("<br>");      
        }      
    }      
 };      
var local = new BMap.LocalSearch(map, options);      
local.search("公园");

需要单独定义一个id为log的div标签

12、逆/地址解析

地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能。

1、提供的转换类

Geocoder：逆/地址解析，用于坐标与地址间的相互转换。详情见类参考

2、地址解析服务

根据地址描述获得坐标信息。

百度地图API提供Geocoder类进行地址解析，您可以通过Geocoder.getPoint()方法来将一段地址描述转换为一个坐标。

如下示例，我们将地址“北京市海淀区上地10街10号”转换获取该位置的地理经纬度坐标，并在这个位置上添加一个标注。注意：在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市（本例为“北京市”）。

var map = new BMap.Map("l-map");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
// 创建地址解析器实例     
var myGeo = new BMap.Geocoder();      
// 将地址解析结果显示在地图上，并调整地图视野    
myGeo.getPoint("北京市海淀区上地10街10号", function(point){      
    if (point) {      
        map.centerAndZoom(point, 16);      
        map.addOverlay(new BMap.Marker(point));      
    }      
 }, 
"北京市");

3、逆地址解析服务

根据坐标点获得该地点的地址描述，是地址解析的逆向转换。

您可以通过Geocoder.getLocation()方法获得地址描述。当解析工作完成后，您提供的回调函数将会被触发。如果解析成功，则回调函数的参数为GeocoderResult对象，否则为null。在构造Geocoder对象时，可以增加参数{extensions_town: true}来获得乡镇级数据，仅限国内。

1指定经纬度获取地址

var map = new BMap.Map("l-map");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
// 创建地理编码实例, 并配置参数获取乡镇级数据
var myGeo = new BMap.Geocoder({extensions_town: true});      
// 根据坐标得到地址描述    
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){      
    if (result){      
    alert(result.address);      
    }      
});

2鼠标点击地图获取地址

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geoc = new BMap.Geocoder();    
map.addEventListener("click", function(e){        
    var pt = e.point;
    geoc.getLocation(pt, function(rs){
        var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });        
});

13、出行路线规划

百度地图JavaScript API v3.0提供了驾车、公交、步行和骑行四种出行方式的路线规划功能。开发者在使用线路规划的接口时，可以使用我们提供的默认展示效果。也可以通过监听事件回调，使用检索数据完成自己的需求。v3.0的线路规划服务和v2.0的相比，在功能上有所差异。详细请参考本文档和JavaScript API v3.0类参考。

提供的路线规划方式

路线规划方式	类名	简介
驾车	DrivingRoute	提供驾车路线规划服务
公交	TransitRoute	提供市内公交和跨城交通方式（飞机、火车、大巴）的路线规划服务
步行	WalkingRoute	提供步行路线规划服务
骑行	RidingRoute	提供骑行线路规划服务

1、驾车路线规划

1基础驾车路线规划服务示例：

代码如下：

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); 
var driving = new BMap.DrivingRoute(map, { 
    renderOptions: { 
        map: map, 
        autoViewport: true 
} 
});
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
driving.search(start, end);

2数据接口

驾车导航服务也提供了丰富的数据接口，通过onSearchComplete回调函数可以得到BMap.DrivingRouteResult对象，它包含了驾车导航结果数据信息。结果会包含若干驾车方案，每条方案中包含了若干驾车线路。每条驾车线路又会包含一系列的关键步骤（BMap.Step），关键步骤描述了具体驾车行驶方案。

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); 
var options = { 
    onSearchComplete: function(results){ 
        if (driving.getStatus() == BMAP_STATUS_SUCCESS){ 
            // 获取第一条方案 
            var plan = results.getPlan(0); 
            // 获取方案的驾车线路 
            var route = plan.getRoute(0); 
            // 获取每个关键步骤，并输出到页面 
            var s = []; 
            for (var i = 0; i < route.getNumSteps(); i ++) { 
                var step = route.getStep(i); 
                console.log(step); 
            } 
        } 
    } 
}; 
var driving = new BMap.DrivingRoute(map, options);
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
driving.search(start, end);

2、公交路线规划

BMap.TransitRoute类提供公交线路规划服务。

注意：v3.0中，新增了TransitRoutePlan.getTotal 和 TransitRoutePlan.getTotalType方法，可以获取一条公交换乘方案中总路段数（步行+公交），和指定路段的交通方式类型（步行或公交）。

1使用服务示例

代码如下：

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); 
var transit = new BMap.TransitRoute(map, { 
    renderOptions: { 
        map: map, 
        autoViewport: true 
    } 
});
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
transit.search(start, end);

2进行跨城路线规划

代码如下：

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); 
var transit = new BMap.TransitRoute(map, { 
    renderOptions: { 
        map: map, 
        autoViewport: true

    },

    // 配置跨城公交的换成策略为优先出发早

    intercityPolicy: BMAP_INTERCITY_POLICY_EARLY_START,

    // 配置跨城公交的交通方式策略为飞机优先

    transitTypePolicy: BMAP_TRANSIT_TYPE_POLICY_AIRPLANE

});

var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(121.490546, 31.233585);
transit.search(start, end);

3结果面板

您可以提供用于展示文字结果的容器元素，方案结果会自动在页面中展现。

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); 
var transit = new BMap.TransitRoute(map, { 
    renderOptions: {map: map, panel: "results"} 
}); 
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(121.490546, 31.233585);
transit.search(start, end);

4数据接口

您可通过数据接口获取详细的公交方案信息。公交导航搜索结果用BMap.TransitRouteResult来表示，其中包含了若干公交出行方案（BMap.TransitRoutePlan）。每条出行方案由步行线路和公交线路组成。在起点到上车点之间、下车点到终点之间以及每个换乘站之间都会存在步行线路，如果上述的某两点位置重合，那么其间的步行路线长度为0。如下示例，通过数据接口将第一条方案的路线添加到地图上。

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); 
var transit = new BMap.TransitRoute(); 
transit.setSearchCompleteCallback(function(results) { 
    if (transit.getStatus() == BMAP_STATUS_SUCCESS) { 
        var firstPlan = results.getPlan(0); 
        // 绘制步行线路 
        for (var i = 0; i < firstPlan.getNumRoutes(); i++) { 
            var walk = firstPlan.getRoute(i); 
            if (walk.getDistance(false) > 0){ 
                // 步行线路有可能为0 
                map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor: "green"})); 
            } 
        } 
        // 绘制公交线路 
        for (i = 0; i < firstPlan.getNumLines(); i++) { 
                var line = firstPlan.getLine(i); 
                map.addOverlay(new BMap.Polyline(line.getPoints())); 
        }
    } 
});
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(121.490546, 31.233585);
transit.search(start, end);

3、步行路线规划

BMap.WalkingRoute提供步行线路规划服务。基本用法和驾车线路规划类似。

1使用服务示例

代码如下：

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); 
    var walk = new BMap.WalkingRoute(map, { 
    renderOptions: {map: map} 
}); 
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
walk.search(start, end);

4、骑行线路规划

BMap.RidingRoute提供骑行线路规划服务，基本用法和步行线路规划基本相同。

1使用服务示例

代码如下：

var map = new BMap.Map("container"); 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); 
var riding = new BMap.RidingRoute(map, { 
    renderOptions: {map: map} 
}); 
var start = new BMap.Point(116.310791, 40.003419);
var end = new BMap.Point(116.486419, 39.877282);
riding.search(start, end);

14、定位

JavaScript API提供在Web端获取当前位置信息的方法，融合了浏览器定位、IP定位、安卓定位SDK辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息等功能。

浏览器定位精度依赖浏览器自身特性，IP定位的精度值为城市级别。

对于安卓WebView页面的开发者，可以结合定位SDK进行辅助定位，使用方法参见定位SDK相关章节。

注意：

请求JavaScript API v3.0的定位功能时，必须获取用户授权。
由于Chrome、iOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
iOS15系统下浏览器默认关闭位置请求，需要用户设置为允许/询问后方可获取精确的定位。

提供的定位服务

接口	类名	简介
浏览器定位	Geolocation	优先调用浏览器H5定位接口，如果失败会调用IP定位
IP定位	LocalCity	根据用户IP 返回城市级别的定位结果
定位SDK辅助定位	Geolocation	当您的APP中有内置的Web页面，同时在Web页面需要提供您的当前位置信息时，可调用集成在App中的百度地图定位SDK来获取更精准的位置信息

定位方法代码示例

1、浏览器定位

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
	if(this.getStatus() == BMAP_STATUS_SUCCESS){
		var mk = new BMap.Marker(r.point);
		map.addOverlay(mk);
		map.panTo(r.point);
		alert('您的位置：'+r.point.lng+','+r.point.lat);
	}
	else {
		alert('failed'+this.getStatus());
	}        
});

2、IP定位

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

function myFun(result){
	var cityName = result.name;
	map.setCenter(cityName);
	alert("当前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);

3、定位SDK辅助定位

var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();
// 开启SDK辅助定位
geolocation.enableSDKLocation();
geolocation.getCurrentPosition(function(r){
	if(this.getStatus() == BMAP_STATUS_SUCCESS){
		var mk = new BMap.Marker(r.point);
		map.addOverlay(mk);
		map.panTo(r.point);
		alert('您的位置：'+r.point.lng+','+r.point.lat);
	}
	else {
		alert('failed'+this.getStatus());
	}        
});

15、鼠标绘制

1、提供的鼠标绘制工具

DrawingManager：鼠标绘制工具。通过此工具用户可以在地图任意位置上画点、画线、画面并显示线的距离及面的面积。详情可见开源库。

2、鼠标绘制过程

1在页面的头部应用鼠标绘制工具开源库的文件

1
2

<script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />

2在代码中实例化鼠标绘制工具

var styleOptions = {
    strokeColor:"red",    //边线颜色。
    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 3,       //边线的宽度，以像素为单位。
    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid' //边线的样式，solid或dashed。
}
    //实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否开启绘制模式
    enableDrawingTool: true, //是否显示工具栏
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
        offset: new BMap.Size(5, 5), //偏离值
    },
    circleOptions: styleOptions, //圆的样式
    polylineOptions: styleOptions, //线的样式
    polygonOptions: styleOptions, //多边形的样式
    rectangleOptions: styleOptions //矩形的样式
});

16、点聚合

您常常需要在地图上展示非常多的点。当地图可视范围内的点越多，点与点的图标堆叠、覆盖的效果就会越严重。为了保证展示效果，本节介绍如何使用点聚合功能，聚合区域内的点，使得可以自适应地图的比例尺进行数据展示。

1、提供的点聚合工具

MarkerClusterer：多标注聚合器。此工具解决加载大量点要素到地图上造成缓慢，且产生覆盖现象的问题。详情可见开源库。

2、点聚合过程

1在页面的头部应用点聚合工具开源库的文件

1
2

<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

2在代码中添加Marker，实例化点聚合

var MAX = 10;
var markers = [];
var pt = null;
var i = 0;
for (; i < MAX; i++) {
    pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
    markers.push(new BMap.Marker(pt));
}
//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

Web服务API

核心服务简介

获取密钥

地点检索

1、功能介绍

行政区划区域检索

圆形区域检索

地点详情检索

2、服务文档

行政区划区域检索

圆形区域检索

地点详情检索服务

地址输入提示服务

1、功能介绍

2、服务文档

正/逆地理编码服务

1、功能介绍

2、服务文档

天气查询

1、功能介绍

2、服务文档

地址解析聚合

1、功能介绍

2、服务文档

JavaScript API v3.0

使用方法

百度地图的Hello World

分步步骤：

1申请百度账号和ak

2准备页面

3适应移动端页面展示

4设置容器样式

5引用百度地图API文件

6创建地图容器元素

7创建地图实例

8设置中心点坐标

9地图初始化，同时设置地图展示级别

1、地图配置与操作

2、坐标转换说明

3、添加控件

提供的控件

向地图添加控件

1地图初始化

2添加多个控件

控制控件位置

修改控件配置

自定义控件

4、标注

1、提供的覆盖物

2、标注点

5、自定义标注

1、定义构造函数并继承Overlay

2、初始化自定义覆盖物

3、绘制覆盖物

4、移除覆盖物

5、显示和隐藏覆盖物

6、添加覆盖物

6、信息窗口

1、提供的信息窗口

2、添加信息窗口

3、提供的自定义信息窗口工具

7、叠加图层

8、自定义叠加图层

1、基础知识——百度地图坐标系

XY经纬度球面坐标系统

XY墨卡托平面坐标系统

XY图块编号系统

9、自定义绘制层

10、 事件处理

1、事件监听

1弹窗事件

2捕获状态

2、事件参数和this

1事件参数e获取有关信息

2this指向DOM元素

3、移除监听事件

1移除监听事件

11、检索POI

1、提供的检索服务

2、检索POI方法

10、事件处理