2018-01-02

百度地图JSapi使用总结

百度地图的基本使用

注册百度账号

申请成为百度开发者

获取服务密钥(ak)

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

添加地图控件

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

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

地图初始化

// 传入对应的dom节点标签id名称, 用于挂在对应的百度地图显示区块
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.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));

除此之外, 控件外观也是可以更改的

1 2	var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} map.addControl(new BMap.NavigationControl(opts)); // 调整平移缩放控件为显示小型平移缩放控件

自定义控件

定义一个自定义控件的构造函数并继承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();

初始化自定义控件

设置自定义控件构造函数的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;    
 }

添加自定义控件

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

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

个性化地图配置

目前地图的样式个性化可以通过官方的默认样式进行设置, 也可以通过个性地图编辑工具对地图的样式进行编辑, 然后生成地图的样式json, 后通过JavaScript api的方法调用生效

模版选择方式

选择模板: 从开放平台选择各种不同的风格模板之一

设置地图样式

1 2	var mapStyle={ style : "模板英文名称" } map.setMapStyle(mapStyle);

如下图, 当我们需要设置下图的风格

1 2	var mapStyle={ style : "mapbox" } map.setMapStyle(mapStyle);

个性化编辑方式

见百度地图开发文档

在地图上进行标注

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

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

提供的覆盖物

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

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

标注点

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

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

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

向地图添加标注

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);                     // 将标注添加到地图中

定义标注图标

通过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);    
}

监听标注事件

事件方法与Map事件机制相同。

1
2
3

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

可拖拽的标注

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

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

标注折线

Polyline表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线。 Polyline使用详情请见类参考。

添加折线

折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。
Polyline的绘制需要浏览器支持矢量绘制功能。在Internet Explorer中，地图使用VML绘制折线；在其他浏览器中使用SVG或者Canvas。

以下代码段会在两点之间创建6像素宽的蓝色折线：

var polyline = new BMap.Polyline([
    new BMap.Point(116.399, 39.910),
    new BMap.Point(116.405, 39.920)
    ],
    {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
    );
map.addOverlay(polyline);

增加信息窗口

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

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

提供的信息窗口

InfoWindow：信息窗口。也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。

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

添加信息窗口

信息窗口在地图上方的浮动显示HTML内容。

信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。

您可以使用InfoWindow来创建一个信息窗实例，

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

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

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

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

叠加图层

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

提供的图层

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); // 将图层移除

事件处理

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

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

事件监听

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

弹窗事件

addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。
如下示例中，每当用户点击地图时，会弹出一个警告框：

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

捕获状态

通过监听事件还可以捕获事件触发后的状态。
如下示例，显示用户拖动地图后地图中心的经纬度信息：

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);    
}
);

事件参数和this

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

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

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

事件参数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);    
});

this指向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() + "级");    
});

移除监听事件

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

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

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);

地图数据获取

检索POI

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

提供的检索服务

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

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

检索POI方法

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

城市检索

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("天安门");

圆形区域检索

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("小吃", "前门");

矩形区域检索

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());

配置搜索

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("中关村");

结果面板

通过设置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("中关村");

数据接口

除了搜索结果会自动添加到地图和列表外，您还可以通过数据接口获得详细的数据信息，结合地图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("公园");

地址解析

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

提供的转换类

Geocoder：逆/地址解析，用于坐标与地址间的相互转换。

地址解析服务

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

百度地图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));      
    }      
 }, 
"北京市");

逆地址解析服务

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

您可以通过Geocoder.getLocation()方法获得地址描述。当解析工作完成后，您提供的回调函数将会被触发。如果解析成功，则回调函数的参数为GeocoderResult对象，否则为null。

指定经纬度获取地址

var map = new BMap.Map("l-map");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
// 创建地理编码实例      
var myGeo = new BMap.Geocoder();      
// 根据坐标得到地址描述    
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){      
    if (result){      
    alert(result.address);      
    }      
});

鼠标点击地图获取地址

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);
    });        
});

出行路线规划

提供的出行方式包括公交、驾车、步行。开发者可以使用我们提供的默认展示效果，也可通过结果面板或数据接口获取返回结果，自己编写实现界面。图片支持自定义。

提供的路线规划方式

路线规划方式	类名	简介
公交	TransitRoute	提供公交路线规划搜索服务
驾车	DrivingRoute	提供驾车路线规划服务
步行	WalkingRoute	提供步行路线规划服务

驾车路线规划

BMap.DrivingRoute提供驾车导航服务。与公交导航不同的是，驾车导航的搜索范围可以设置为省。

使用服务示例

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    
    }    
});    
driving.search("中关村", "天安门");

结果面板

下面示例中，我们提供了结果面板参数，方案描述会自动展示到页面上。

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,     
        panel : "results",    
        autoViewport: true    
    }    
});    
driving.search("中关村", "天安门");

数据接口

驾车导航服务也提供了丰富的数据接口，通过onSearchComplete回调函数可以得到BMap.DrivingRouteResult对象，它包含了驾车导航结果数据信息。
结果会包含若干驾车方案（目前仅提供一条方案），每条方案中包含了若干驾车线路（如果导航方案只包含一个目的地，那么驾车线路的个数就为1，如果方案包含若干个目的地，则驾车线路的个数会大于1。目前API尚不支持多个目的地的驾车导航）。
每条驾车线路又会包含一系列的关键步骤（BMap.Step），关键步骤描述了具体驾车行驶方案，可通过BMap.Step.getDescription()方法获得。

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);    
                s.push((i + 1) + ". " + step.getDescription());    
            }    
            document.getElementById("log").innerHTML = s.join("<br>");    
        }    
    }    
};    
var driving = new BMap.DrivingRoute(map, options); 
driving.search("中关村","天安门");

步行路线规划

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

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}    
    });    
walk.search("王府井", "西单");

本文标题:百度地图JSapi使用总结

文章作者:ChangerHe

发布时间:2018-01-02, 22:55:12

原始链接:http://blog.changerhe.cn/2018/01/02/百度地图JSapi使用/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。