百度地图API学习总结(一)
说明
公司项目需要一些关于定位和路线规划的功能,需要在网页中嵌入百度地图,这里主要是做一个记录,记录在开发应用中使用过的API,以便以后查询。
官方文档及参考指南下载
百度地图的官方文档写的很详细,但是内容非常多,并且很多是暂时用不到的,看起来稍微有一些麻烦,但是当你需要查找某些功能时,官方文档又是必不可少的
1.首先进入百度地图开放平台
2.找到 开发 选项,选择合适的平台,我选的Web开发——JavaScript API
3.根据说明,需要先申请秘钥才可以使用
4.然后回到之前的页面,左侧导航,有开发所需的所有资源,包括示例,示例相对来说比较重要,因为对新手来讲,示例对功能体现的更为直接,我一般都是看着示例结合着文档来编写代码的。
5.最后就是关键的文档了,在左侧导航的最下边相关下载中下载最新版本的文档,《开发指南文档》主要是一些入门的介绍和功能的举例,《类参考文档》是API的详细使用指南
开发流程
1.首先获取服务,获取秘钥后,在HTML中引入,如下:
<script src="http://api.map.baidu.com/api?v=2.0&ak=yourAppKey" type="text/javascript"></script>
将秘钥yourAppKey替换成你自己的即可
2.定义一个容器,地图会在定义的容器中显示,这个容器要有确定的宽高,如果是移动端还需要加上meta标签
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!DOCTYPE html>
<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.[类],下边是一个简易的地图实例(在上边代码的<script></script>
标签中实现)
<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)); //false
3.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_RIGHT
defaultOffset
控件默认位置的偏移值
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('<span>id=' + storeid + '</span>');
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('<p class="baidumap-label">'+ labelText +'</p>');
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 组件外了,性能上有一定限制。但目前来讲应用可以正常运行,如果有什么好的解决方案,欢迎提出。