H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）

一、API基本使用

1.1 大致流程

打开，百度地图官网

登录或者注册一个百度账号，并完成相关验证

登陆并申请成为开发者

在百度地图开发平台的首页选择控制台，在控制台中创建应用

创建好应用以后就能在控制台我的应用中看到这个应用，其中最重要的是AK，这是百度地图分配给我们应用的一个专用的秘钥，必须使用秘钥才能访问百度地图API

完成以上基础操作后，具体的操作流程请参考：jspopularGL | 百度地图API SDK

1.2 基本用法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#container {width: 700px;height: 500px;border: 1px solid black;}</style><script type="text/javascript"src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=9N1GiH5wT8CqN7axx9F7VQNy1H281i8b"></script></head><body><div id="container"></div><script>// 创建地图实例var map = new BMapGL.Map("container");// 通过地理位置的经纬度创建点坐标var point = new BMapGL.Point(116.404, 39.915);// 初始化地图，设置中心点坐标和地图级别map.centerAndZoom(point, 15);// 添加比例尺控件var scaleCtrl = new BMapGL.ScaleControl();map.addControl(scaleCtrl);// 添加缩放控件var zoomCtrl = new BMapGL.ZoomControl(); map.addControl(zoomCtrl);// 添加城市列表控件var cityCtrl = new BMapGL.CityListControl(); map.addControl(cityCtrl);// 添加定位控件var locationControl = new BMapGL.LocationControl();map.addControl(locationControl);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 设置地图类型为地球模式map.setMapType(BMAP_EARTH_MAP);</script></body>
</html>

二、地图控件

 #container {width: 700px;height: 500px;border: 1px solid black;}

<button>加载地图</button><div id="container"></div>

<script type="text/javascript"src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=9N1GiH5wT8CqN7axx9F7VQNy1H281i8b"></script>

2.1 系统控件

//平移控件

map.addControl(new BMap.NavigationControl());

//缩放控件

map.addControl(new BMap.ScaleControl());

//缩略地图控件

map.addControl(new BMap.OverviewMapControl());

//地图类型控件

map.addControl(new BMap.MapTypeControl());
// 添加城市列表控件
map.addControl(new BMap.CityListControl());

示例：

<script>document.querySelector('button').onclick = function() {//创建地图实例var map = new BMap.Map("container");//设置中心点坐标var point = new BMap.Point(116.404, 39.915);//地图初始化，同时设置地图展示级别map.centerAndZoom(point, 18);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);//平移控件map.addControl(new BMap.NavigationControl());//缩放控件map.addControl(new BMap.ScaleControl());//缩略地图控件map.addControl(new BMap.OverviewMapControl());//地图类型控件map.addControl(new BMap.MapTypeControl());// 添加城市列表控件map.addControl(new BMap.CityListControl());};</script>

2.2 自定义摆放的系统控件的位置

自定义摆放位置有三个字段可选

anchor :控件摆放位置

BMAP_ANCHOR_TOP_LEFT：表示控件定位于地图的左上角
BMAP_ANCHOR_TOP_RIGHT：表示控件定位于地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT：表示控件定位于地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT：表示控件定位于地图的右下角

offset ：控件偏移位置

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素

如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

var opts = {offset: new BMapGL.Size(150, 5)
}
// 添加控件
map.addControl(new BMapGL.ScaleControl(opts));
// 移除控件
map.removeControl(new BMapGL.ScaleControl(opts));

type ：控件加载类型

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

var options={

anchor:BMAP_ANCHOR_BOTTOM_RIGHT,

offset:new BMap.Size(150, 5),

type:BMAP_NAVIGATION_CONTROL_SMALL

};

map.addControl(new BMap.NavigationControl(options));

//比例尺位置

var options={

anchor:BMAP_ANCHOR_TOP_LEFT,

offset:new BMap.Size(75,15)

};

map.addControl(new BMap.ScaleControl(options));

示例：

 <script>document.querySelector('button').onclick = function() {//创建地图实例var map = new BMap.Map("container");//设置中心点坐标var point = new BMap.Point(116.404, 39.915);//地图初始化，同时设置地图展示级别map.centerAndZoom(point, 18);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);var options = {//右下角anchor: BMAP_ANCHOR_BOTTOM_RIGHT,//位置offset: new BMap.Size(150, 5),//显示完整的平移控件type: BMAP_NAVIGATION_CONTROL_SMALL};// 添加平移控件map.addControl(new BMap.NavigationControl(options));//比例尺位置var options = {// 左上角anchor: BMAP_ANCHOR_TOP_LEFT,// 位置offset: new BMap.Size(75, 15),//显示完整的平移控件type: BMAP_NAVIGATION_CONTROL_SMALL};// 添加缩放控件map.addControl(new BMap.ScaleControl(options));};</script>

2.3 自定义控件

2.3.1 流程

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

自定义构造函数中要提供defaultAnchor和defaultOffset两个属性，以便API正确定位控件位置，接着让其继承于Control。

2.初始化自定义控件

设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类；当调用map.addControl()添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件，你需要实现此方法并在其中创建控件所需的DOM元素，并添加DOM事件；所有自定义控件中的DOM元素最终都应该添加到地图容器（也就是地图所在的DOM元素）中去，地图容器可以通过map.getContainer()方法获得；最后initialize()方法需要返回控件容器的DOM元素

3.添加自定义控件

使用map.addControl();方法

示例：

 <script>document.querySelector('button').onclick = function() {//创建地图实例var map = new BMap.Map("container");//设置中心点坐标var point = new BMap.Point(116.404, 39.915);//地图初始化，同时设置地图展示级别map.centerAndZoom(point, 18);//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 定义一个控件类，即functionfunction ZoomControl() {// 设置默认停靠位置和偏移量this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;this.defaultOffset = new BMap.Size(10, 10);}// 通过JavaScript的prototype属性继承于BMap.ControlZoomControl.prototype = new BMap.Control();// 自定义控件必须实现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;};// 创建控件实例var myZoomCtrl = new ZoomControl();// 添加到地图当中map.addControl(myZoomCtrl);}
</script>

更多详细内容请参考官方文档：https://lbs.baidu.com/index.php?title=jspopularGL/guide/

三、地理编码与逆地理编码

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

提供的转换类：

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

 #container {width: 700px;height: 500px;border: 1px solid black;}

 <button>加载地图</button><div id="container"></div>

3.1 地址解析服务

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

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

注意：在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市（本例为“北京市”）。

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 12);
//创建地址解析器实例
var myGeo = new BMapGL.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint('北京市海淀区上地10街', function(point){if(point){map.centerAndZoom(point, 16);map.addOverlay(new BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))}else{alert('您选择的地址没有解析到结果！');}
}, '北京市')

示例：

 <script>document.querySelector('button').onclick = function() {var map = new BMap.Map("container");var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);map.addControl(new BMap.NavigationControl());var geoc = new BMap.Geocoder();map.addEventListener('click', function(eve) {// console.log(eve.point);//逆地理解析服务方法--本方法的作用是传入一个坐标点，返回坐标点的具体地址描述geoc.getLocation(eve.point, function(info) {console.log(info);});});</script>

逆地址解析服务：

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

可以通过Geocoder.getLocation()方法获得地址描述

当解析工作完成后，您提供的回调函数将会被触发

如果解析成功，则回调函数的参数为GeocoderResult对象，否则为null

指定经纬度获取地址

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

鼠标点击地图获取地址

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 13);
var geoc = new BMapGL.Geocoder();
map.addEventListener('click', function(e){var pt = e.latlng;geoc.getLocation(pt, function(rs){var addComp = rs.addressComponents;alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);})
})

示例：

<script>document.querySelector('button').onclick = function() {var map = new BMap.Map("container");map.addControl(new BMap.NavigationControl());var geoc = new BMap.Geocoder();var addressStr = '北京市东城区东四南大街157号';//地址解析方法--传入一个具体的地址描述，返回这个地址的坐标点geoc.getPoint(addressStr, function(point) {console.log(point);map.centerAndZoom(point, 15);}, '北京市');};
</script>

四、地图标注

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

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

提供的文本标注

Label：一个用来往地图上添加文本标注的类，可以自定义标注的文本内容

4.1 提供覆盖物

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

4.2 添加文本标注

API提供了默认的标注样式，您也可以通过setStyle来指定自定义样式。

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.监听标注事件

JSAPI支持监听覆盖物的事件。

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

4.3 标注折线

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

示例1：默认标注/系统标注

<script>document.querySelector('button').onclick = function() {//创建地图实例var map = new BMap.Map("container");// 设置中心点坐标var point = new BMap.Point(116.404, 39.915);// 表示地图上的点var tempMarker = new BMap.Marker(point);// 向地图添加覆盖物map.addOverlay(tempMarker);// 地图初始化，同时设置地图展示级别map.centerAndZoom(point, 15);// 添加平移控件map.addControl(new BMap.NavigationControl());// 创建交通流量图层实例var traffic = new BMap.TrafficLayer();// 将图层添加到地图上map.addTileLayer(traffic);//1.添加默认标注map.addEventListener('click', function(eve) {var tempMarker = new BMap.Marker(eve.point);map.addOverlay(tempMarker);});};
</script>

示例2：自定义标注点

<script>document.querySelector('button').onclick = function() {//创建地图实例var map = new BMap.Map("container");// 设置中心点坐标var point = new BMap.Point(116.404, 39.915);// 表示地图上的点var tempMarker = new BMap.Marker(point);// 向地图添加覆盖物map.addOverlay(tempMarker);// 地图初始化，同时设置地图展示级别map.centerAndZoom(point, 15);// 添加平移控件map.addControl(new BMap.NavigationControl());// // 创建交通流量图层实例// var traffic = new BMap.TrafficLayer();// // 将图层添加到地图上// map.addTileLayer(traffic);//2.自定义标注点var tempPoint = new BMap.Point(116.424, 39.915);var tempIcon = new BMap.Icon('img/标注.gif', new BMap.Size(50, 50), {// 设置图片的偏移量imageOffset: new BMap.Size(-30, -10)});var tempMarker = new BMap.Marker(tempPoint, {icon: tempIcon});map.addOverlay(tempMarker);};</script>

示例3：marker标注的点击事件

<script>document.querySelector('button').onclick = function() {//创建地图实例var map = new BMap.Map("container");// 设置中心点坐标var point = new BMap.Point(116.404, 39.915);// 表示地图上的点var tempMarker = new BMap.Marker(point);// 向地图添加覆盖物map.addOverlay(tempMarker);// 地图初始化，同时设置地图展示级别map.centerAndZoom(point, 15);// 添加平移控件map.addControl(new BMap.NavigationControl());// // 创建交通流量图层实例// var traffic = new BMap.TrafficLayer();// // 将图层添加到地图上// map.addTileLayer(traffic);// //1.添加默认标注// map.addEventListener('click', function(eve) {//     var tempMarker = new BMap.Marker(eve.point);//     map.addOverlay(tempMarker);// });// map.addOverlay(tempMarker);//3.marker标注的点击事件map.addEventListener('click', function(eve) {var tempMarker = new BMap.Marker(eve.point);tempMarker.addEventListener('click', function(e) {// 坐标信息var opts = {width: 250, // 信息窗口宽度height: 100, // 信息窗口高度title: "信息" // 信息窗口标题};var geoc = new BMap.Geocoder();geoc.getLocation(e.point, function(info) {// 传入地址信息var str = info.address;// 创建信息窗口对象var infoWindow = new BMap.InfoWindow(str, opts);// 打开信息窗map.openInfoWindow(infoWindow, map.getCenter());});//阻止冒泡事件event.stopPropagation();});map.addOverlay(tempMarker);})//4.marker允许拖动tempMarker.enableDragging();};</script>

更多详细信息请参考官方文档：jspopular | 百度地图API SDK

五、路径规划

提供的出行方式包括公交、驾车、步行

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

5.1 提供的路线规划方式

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

5.2 驾车路线规划

BMap.DrivingRoute提供驾车导航服务

与公交导航不同的是，驾车导航的搜索范围可以设置为省

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

2.结果面板

方案描述会自动展示到页面上

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

3.数据接口

驾车导航服务也提供了丰富的数据接口，通过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("中关村","天安门");

5.3 公交路线规划

BMap.TransitRoute类提供公交导航搜索服务

在搜索之前需要指定搜索区域。注意：公交导航的区域范围只能是市，而不能是省

如果搜索区域为BMap.Map对象，路线结果会自动添加到地图上。如果您提供了结果容器，相应的路线描述也会展示在页面上

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

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

3.数据接口

可通过数据接口获取详细的公交方案信息

公交导航搜索结果用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 s = [];    for (i = 0; i < results.getNumPlans(); i ++){    s.push((i + 1) + ". " + results.getPlan(i).getDescription());    }    document.getElementById("log").innerHTML = s.join("<br>");    }
})
transit.search("中关村", "国贸桥");

5.4步行路线规划

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

示例：

  #bdmap-contaniner {width: 700px;height: 500px;border: 1px solid black;}

<button class="createMap">加载地图</button><br/><label for="startPoint">起点：<input type="text"  id="startPoint"  value="天安门"/>
</label><label for="endPoint">终点：<input type="text"  id="endPoint"  value="莱圳家园"/>
</label><select><option value="car">驾车</option><option value="bus">公交</option><option value="step">步行</option>
</select><br/><button class="route">开启规划路径</button><div id="bdmap-contaniner"></div>

<script>//页面元素var startPoint_input = document.querySelector('#startPoint');var endPoint_input = document.querySelector('#endPoint');var routeType_select = document.querySelector('select');var bdmap = null;document.querySelector('.createMap').onclick = function() {// 创建地图实例bdmap = new BMap.Map('bdmap-contaniner');// 设置中心点var point = new BMap.Point(116.404, 39.915);// 地图初始化，同时设置地图展示级别bdmap.centerAndZoom(point, 15);// 添加平移控件bdmap.addControl(new BMap.NavigationControl());// 标识地图上的点var centerMarker = new BMap.Marker(point);centerMarker.addEventListener('click', function(eve) {// 生成相关信息窗口var opts = {width: 250, // 信息窗口宽度height: 100, // 信息窗口高度title: "地点坐标" // 信息窗口标题};var infoWindow_content = '当前位置：(' + eve.point.lng + ',' + eve.point.lat + ')';// 创建信息窗口对象var infoWindow = new BMap.InfoWindow(infoWindow_content, opts);// 打开信息窗口bdmap.openInfoWindow(infoWindow, bdmap.getCenter());});// 加载进去bdmap.addOverlay(centerMarker);};//路径规划document.querySelector('.route').onclick = function() {// 获取输入框里的值var startPoint_value = startPoint_input.value;var endPoint_value = endPoint_input.value;var routeType_select_value = routeType_select.value;switch (routeType_select_value) {case 'car':{//驾车路线规划var driving = new BMap.DrivingRoute(bdmap, {renderOptions: {map: bdmap,autoViewport: true}});//绘制driving.search(startPoint_value, endPoint_value);}break;case 'bus':{var transit = new BMap.TransitRoute(bdmap, {renderOptions: {map: bdmap,autoViewport: true}});transit.search(startPoint_value, endPoint_value);}break;case 'step':{var walk = new BMap.WalkingRoute(bdmap, {renderOptions: {map: bdmap}});walk.search(startPoint_value, endPoint_value);}break;}}</script>

更多详细信息请参考官方文档：jspopular | 百度地图API SDK

综合：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#container {width: 700px;height: 500px;border: 1px solid black;}</style><scripttype="text/javascript"src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=9N1GiH5wT8CqN7axx9F7VQNy1H281i8b"></script><script src="./js/jquery-3.6.0.js"></script></head><body><div id="container"></div><script>// 创建地图实例var map = new BMapGL.Map("container");// 通过地理位置的经纬度创建点坐标var point = new BMapGL.Point(116.404, 39.915);// 初始化地图，设置中心点坐标和地图级别map.centerAndZoom(point, 15);// 添加比例尺控件var scaleCtrl = new BMapGL.ScaleControl();map.addControl(scaleCtrl);// 添加缩放控件var zoomCtrl = new BMapGL.ZoomControl();map.addControl(zoomCtrl);// 添加城市列表控件var cityCtrl = new BMapGL.CityListControl();map.addControl(cityCtrl);// 添加定位控件var locationControl = new BMapGL.LocationControl();map.addControl(locationControl);// 创建地理编码实例var myGeo = new BMapGL.Geocoder();//开启鼠标滚轮缩放map.enableScrollWheelZoom(true);// 设置地图类型为地球模式map.setMapType(BMAP_EARTH_MAP);//驾车路径规划对象//该对象一定在地图加载出来以后再创建 一般放在创建好地图对象map以后 而且一个网页最好只能创建一次 否则将无法清除上一次的规划路径let driving = new BMapGL.DrivingRoute(map, {renderOptions: { map: map, autoViewport: true },});// 定义一个全局变量保存当前的坐标let start;//获取当前地理位置 将地图中心点移动到定位位置var geolocation = new BMapGL.Geolocation(); //创建定位对象geolocation.getCurrentPosition(function (r) {//通过定位对象调用定位函数,回调函数形参r表示定位结果if (this.getStatus() == BMAP_STATUS_SUCCESS) {start = r.point;//如果定位成功var mk = new BMapGL.Marker(r.point); //创建标记,r是定位结果,r.point就是当前定位的地点map.addOverlay(mk); //将标记对象添加到地图上map.panTo(start); //将地图中心店移动到定位地点//   alert('您的位置：' + r.point.lng + ',' + r.point.lat);} else {alert("failed" + this.getStatus());}});// 定义一个全局变量保存结束时的坐标let end;// 点击地图的任意一个点，添加标记map.addEventListener("click", function (point) {//   console.log(point);let mk = new BMapGL.Marker(point.latlng);map.addOverlay(mk); //将标记对象添加到地图上//给添加到地图上的标记添加点击事件mk.addEventListener("click", function () {// 阻止事件传播window.event.stopPropagation();// 阻止事件的默认行为// window.event.preventDefault();// 将点击的这个位置的坐标保存在end中end = point.latlng;// 根据坐标得到地址描述myGeo.getLocation(end, function (result) {//funcation是一个回调函数 该回调函数在查找到了具体的地理信息之后才执行if (result) {// 添加信息窗口let opts = {width: 300,height: 120,title: "地址信息",};let content = `<div><h3>${result.address}</h3><input class="go" type="button" value="到这去" onclick="go()"></div>`;// 创建信息窗口对象let infoWindow = new BMapGL.InfoWindow(content, opts);// 打开信息窗口map.openInfoWindow(infoWindow, point.latlng);}});});});function go() {// 完成导航driving.search(start, end);}</script></body>
</html>