百度地图 API 使用总结
百度地图API学习总结（一）
说明
公司项目需要一些关于定位和路线规划的功能，需要在网页中嵌入百度地图，这里主要是做一个记录，记录在开发应用中使用过的API，以便以后查询。
官方文档及参考指南下载
百度地图的官方文档写的很详细，但是内容非常多，并且很多是暂时用不到的，看起来稍微有一些麻烦，但是当你需要查找某些功能时，官方文档又是必不可少的
1.首先进入百度地图开放平台
2.找到 开发 选项，选择合适的平台，我选的Web开发——JavaScript API
3.根据说明，需要先申请秘钥才可以使用
4.然后回到之前的页面，左侧导航，有开发所需的所有资源，包括示例，示例相对来说比较重要，因为对新手来讲，示例对功能体现的更为直接，我一般都是看着示例结合着文档来编写代码的。
5.最后就是关键的文档了，在左侧导航的最下边相关下载中下载最新版本的文档，《开发指南文档》主要是一些入门的介绍和功能的举例，《类参考文档》是API的详细使用指南
开发流程
1.首先获取服务，获取秘钥后，在HTML中引入，如下：
将秘钥yourAppKey替换成你自己的即可
2.定义一个容器，地图会在定义的容器中显示，这个容器要有确定的宽高,如果是移动端还需要加上meta标签
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>标题title>
<link rel="stylesheet" href="./css/app.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourAppKey">script>
head>
<body>
<div id="app">div> //容器
<script>
// 代码
script>
body>
html>3.命名空间
API 使用 BMap 作为命名空间，所有类都在命名空间之下，也就是说无论是创建地图，还是创建一个覆盖物或者控件，都需要使用 BMap.[类]，下边是一个简易的地图实例(在上边代码的标签中实现)
<body>
<div id="app">div> //容器
<script>
// 代码
var map = new BMap.Map("app"); //以#app为容器创建地图实例
var point = new BMap.Point(116.404,39.915); //创建一个点，参数为点的坐标
map.centerAndZoom(point,15); //初始化地图，需要传入，中心点和缩放级别
script>
body>常用API介绍
1.Map 地图类
Map 是地图 API 的核心类，用来实例化一个地图
通过new BMap.Map(container);来创建，之后需要调用centerAndZoom(point,zoom)方法对地图进行初始化，否则进行不了任何操作
map.getCenter()、map.setCenter(center:Point|String)
获取当前中心点坐标
map.getCenter()得到的是一个 point 对象、设置当前中心点坐标
map.getDistance(start:Point,end:point)
返回两点间距离，需要两个点的point
map.getZoom() 、 map.setZoom(zoom)
返回当前地图的缩放比 、设定地图的缩放比
map.centerAndZoom(point,zoom)
用于初始化地图，设置初始化时的中心点及缩放级别
map.panTo(point)
修改地图的中心点，并且移动过去
reset()
重置地图，恢复地图初始化时的中心点和级别
addControl(control:Control)、removeControl(control:Control)
向地图中添加控件、从地图中移除控件
getContainer()
获取地图的容器元素
addOverlay(overlay:Overlay)、removeOverlay(overlay:Overlay)
向地图中添加覆盖物、从地图中移除覆盖物
clearOverlays()
清除地图上所有覆盖物
getOverlays()
获取地图上所有的覆盖物
2.Point 坐标点类
表示地图上的一个坐标点
var point = new BMap.Point(lng,lat)lng:经度 lat:纬度
equals(other:Point)
用于判断坐标点是否相等
let point = new BMap.Point(116.331398, 39.897445),
point1 = new BMap.Point(116.331398, 39.897445),
point2 = new BMap.Point(115.331398, 39.897445);
console.log(point.equals(point1)); //true
console.log(point.equals(point2)); //false3.Size 大小类
表示一个矩形区域的大小(单位是像素)，常用来限定控件，或者覆盖物的大小
let size = new BMap.Size(20,30);
console.log(size); //{width: 20, height: 30}4.Control 控件类
所有控件的基类，一般用来实现自定义控件
defaultAnchor
指定控件默认停靠位置、可以取值如下：
BMAP_ANCHOR_TOP_LEFT | BMAP_ANCHOR_TOP_RIGHT
BMAP_ANCHOR_BOTTOM_LEFT | BMAP_ANCHOR_BOTTOM_RIGHTdefaultOffset
控件默认位置的偏移值
this.defaultOffset = new BMap.Size(rem * 0.16, rem * 0.2);initialize(map:Map)
实现控件初始化时调用，（使用方法见后边案例）
setAnchor()、getAnchor()
设置控件停靠的位置 | 返回控件停靠的位置。
setOffset()、getOffset()
设置控件停靠的偏移量 | 返回控件停靠的偏移量
show()、hide()、isVisible()
显示控件 | 隐藏控件 | 判断控件是否可见
下边是一个自定义控件的实例：
// 定义一个控件类，功能是刷新
function RefreshControl() {
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
this.defaultOffset = new BMap.Size(rem * 0.16, rem * 0.2);
}
// 继承BMap.Control
RefreshControl.prototype = new BMap.Control();
// 初始化自定义控件，传入所在的地图
RefreshControl.prototype.initialize = function(map) {
// 创建一个DOM元素
var div = document.createElement("div");
div.className = 'baidumap-refresh';
div.onclick = function(e) {
e.stopPropagation();
map.reset(); // 重置地图，恢复初始化时的中心点和缩放级别
};
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
};
// 创建控件
var myRefreshControl = new RefreshControl();
// 添加到地图中
map.addControl(myRefreshControl);5.Overlay 覆盖物类
show()、hide()、isVisible()
显示覆盖物、隐藏覆盖物、判断覆盖物是否可见
百度地图提供的覆盖物比较好用，很少情况会自定义覆盖物
6.Marker 图像标注
通过：
new BMap.Marker(point, opts);创建，Marker 是我使用比较多的 API，它的配置和使用方法都比较多，如果在这里找不到想要的功能可以到官方文档上找找
setIcon(icon:Icon)、getIcon()
设置标注所用的图标对象、返回标注所有的标注对象
setPosition(position:Point)、getPosition()
设置标注的地理坐标、返回标注的地理坐标
setOffset(offset:Size)、getOffset()
设置标注的偏移值、返回标注的偏移值
setLabel(label:Label)、getLabel()
为标注添加文 标注、返回标注的文本标注
setTitle(title:String)、getTitle()
设置标注的标题,当鼠标移至标注上时显示此标题、返回标注的标题
enableDragging()、disableDragging()
开启标注拖拽功能、关闭标注拖拽功能
enableMassClear()、disableMassClear()
允许覆盖物在
map.clearOverlays方法中被清除、禁止覆盖物在 map.clearOverlays 方法中被清除
openInfoWindow(infoWnd:InfoWindow)、closeInfoWindow()
打开信息窗、关闭信息窗
下边是一个Marker的实例
let myIcon = new BMap.Icon('../../../img/iconset.png', new BMap.Size(128, 128), {
anchor: new BMap.Size(64, 64), //
imageOffset : new BMap.Size(-316,0)
});
// 创建标注对象并添加到地图,刷新的时候不删除
let marker = new BMap.Marker(point, { //第二个参数opts就写在{}内
icon: myIcon,
enableMassClear: false
});
marker.addEventListener('click', function(e) {
e.domEvent.stopPropagation(); //覆盖物等百度地图的元素阻止默认事件和事件冒泡用domEvent
console.log('当前位置');
});
map.addOverlay(marker); //添加覆盖物点击marker后从marker中获取文本信息的方法，如下：
//伪代码
marker.addEventListener('click', function(e) {
e.domEvent.stopPropagation();
// 将其他图标变小，点击的图标变大
map.panTo(e.target.point); // 以当前点击的点为中心点
let allOverlay = map.getOverlays(); // 获取所有覆盖物
let IdNow = e.target.getLabel().content.match(/id=\d{4}/)[0].substr(3);
// 通过 e.target.getLabel() 得到 绑定在 marker 上的 label,通过label.content 得到 文本内容
for (let i = 1; i < allOverlay.length; i++) {
// 下边这个判断，是为了过滤出 包含label的marker标注
if (allOverlay[i].toString() == "[object Marker]" && allOverlay[i].getLabel() !== null) {
let tempContent = allOverlay[i].getLabel().content;
let tempId = tempContent.match(/id=\d{4}/)[0].substr(3);
if (tempId != IdNow) {
allOverlay[i].setIcon(smallIcon); // 其他标注变小
}else{
allOverlay[i].setIcon(hugeIcon); // 点击的标注变大
}
}
}
});7.Icon 图标
多用于给覆盖物，定义的显示图标
Icon(url:String, size:Size[opts:IconOptions])
1.属性
anchor
图标的定位点相对于图标左上角的偏移值
size
图标可视区域的大小
imageOffset
等同于 CSS 中的 background-position 属性，用来处理雪碧图
imageUrl
图片路径
infoWindowAnchor
信息窗口开启位置相对于图标左上角的偏移值
2.方法
setImageUrl(imageUrl:String)
设置图片资源的地址
setSize(size:Size)
设置图标可视区域的大小
setAnchor(anchor:Size)
设置图标定位点相对于其左上角的偏移值
8.Label 文本标注类
通过
Label(content:String[,opts:LabelOptions])创建，不仅可以直接添加到地图上，还可以添加到Marker上
setStyle(styles:Object)
设置文本标注样式
setContent(content:String)
设置文本标注的内容。支持 HTML
setPosition(position:Point)、getPosition()
设置文本标注坐标。仅当通过 Map.addOverlay()方法添加的文本标注有效、获取位置坐标
setOffset(offset:Size)、getOffset()
设置文本标注的偏移值、返回文本标注的偏移值
setTitle(title:String)、getTitle()
设置文本标注的标题,当鼠标移至标注上时显示此标题、返回文本标注的标题
enableMassClear()、disableMassClear()
允许覆盖物在
map.clearOverlays方法中被清除、禁止覆盖物在 map.clearOverlays 方法中被清除
let myIcon= new BMap.Icon('../../../img/iconset.png', new BMap.Size(96, 124), {
anchor: new BMap.Size(48, 120),
imageOffset :new BMap.Size(-200,0)
});
// 创建标注对象并添加到地图
let marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
// 给标注添加文本信息
let labelId = new BMap.Label({
offset: new BMap.Size(0, 0)
});
labelId.setStyle({display:'none'});
// id用于后期索引
labelId.setContent('id=' + storeid + '');
marker.setLabel(labelId);
let lableInfor = new BMap.Label(`${labelText}`,{
position:point,
offset : new BMap.Size(-70,6)
});
lableInfor.setStyle({backgroundColor: 'rgba(0,0,0,0)', border: 'none', fontSize: '.1rem'});
lableInfor.setContent(''
+ labelText +'');
map.addOverlay(lableInfor);9.DrivingRoute 驾车路线规划方案
由于需要用到路线规划，所以使用了这个类，通过
DrivingRoute(location:Map|Point|String[, opts:DrivingRouteOptions])可以创造一个驾车导航实例
search(start:String|Point, end:String|Point[,options:object])
发起检索功能，需要两个参数:起始位置、结束位置
getResults()
返回最近一次检索结果
clearResults()
清除最近一次检索结果
enableAutoViewport()、disableAutoViewport()
搜索结构显示时，自动调整地图层级、禁用自动调整
setPolylinesSetCallback(callback:Function)
设置添加路线后的回调函数，在这里可以使用
driving.getResults();获取搜索的结果，也可以使用Route.getPolyline()方法获得对应的折现覆盖物，类似的回调设置，有很多个，参考文档，选择需要的即可，下边是一个例子
// 开启路线规划
let driving = new BMap.DrivingRoute(map,{
renderOptions : {
map:map,
enableDragging : true, //允许拖动
}
})
// 显示路线前，清空其他规划
driving.clearResults();
// 定义一个标注
let marker = new BMap.Marker(point,{icon:myIcon});
marker.addEventListener('click', function(e) {
e.domEvent.stopPropagation();
// 点击后设置路线规划（规划成功后有其他操作）
driving.search(r.point,point); //篇幅有限，r.point是用户当前位置,point是选中标注的位置
driving.setPolylinesSetCallback(function () {
let results = driving.getResults(); // 获取路线规划结果
// getDistance(true) 获取距离 getDuration(true) 获取时间
if (driving.getStatus() == BMAP_STATUS_SUCCESS){
let journey = results.getPlan(0).getDistance(true);
console.log(journey); //得到距离
}
})
});
map.addOverlay(marker);10.Geolocation 获取本地位置信息
创造实例后，通过getCurrentPosition方法获得，如下：
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
// 代码 r.point 就是当前位置的坐标，如果后续操作依赖于当前位置信息，需要把代码写在这里边
}
else {
alert('您的浏览器不允许读取位置信息，请重新设置！')
console.log('failed'+this.getStatus());
}
},{enableHighAccuracy: true})React 中使用百度地图
由于应用使用 react 构建，所以还需要将两者结合，摸索了一下，最终得到一下解决方案
- 在 render 中定义地图的容器，设定好宽高
- 在 componentDidMount 中初始化地图，并且把地图挂在到组件上
this.map = new BMap.Map("container"); var map = this.map; - 如果其他生命周期需要操作map(一般是componentDidUpdate)，直接使用this.map
由于把所有有关地图的操作都拿到 react 组件外了，性能上有一定限制。但目前来讲应用可以正常运行，如果有什么好的解决方案，欢迎提出。