一、百度地图API简介
百度地图API
是一套为开发者免费提供的基于百度地图的应用程序接口,包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本,提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。
开发者要使用百度地图API首先要在百度地图开放平台注册,建立应用并取得相应的应用密匙
。密匙在引入百度地图依赖的时候要用到。
本文基于百度地图的JavaScript API
来介绍它的主要功能和组件。
二、地图核心类
百度地图中直接和地图相关的类称为核心类
。
- Map:用来实例化一个
地图
。var map = new BMap.Map("container"); // 初始化地图
- PanOptions:用来控制地图的中心点的移动。它没有构造函数,可通过对象字面量形式表示,以参数形式传递给Map的panTo,panBy方法。
- MapOptions:用来表示Map构造函数的可选项。它没有构造函数,可通过对象字面量形式表示。
- MapStyle:用来设置地图样式,使用对象字面量形式表示,不可实例化。
- Viewport:表示视野,不可实例化,通过对象字面量形式表示。
- Viewport:作为 map.getViewport 与 map.setViewport 方法的可选参数,不可实例化。
大家可以看出来,虽然在上面列了这么多类,实际上有用的类只有Map一个,其他的类都是作为实例化Map的参数或者Map的方法的参数。
三、地图基础类
- Point:表示一个
地理坐标点
。它的构造函数有两个参数,即点的经度和纬度。var point = new BMap.Point(116.027143, 39.772348);
- Pixel:表示地图上的一个
像素点
。 - Bounds:表示
地理坐标
的矩形区域
。该类可以把地图的显示范围设定在指定区域。它的构造函数有两个参数,即两个表示坐标的Point。var bound = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
- Size:表示以
像素
表示一个矩形区域
的大小。
四、地图控件类
百度地图上负责与地图交互的UI元素称为控件
。
- Control:控件的
抽象基类
,所有控件均继承此类的方法、属性。通过此类可实现自定义控件。 -
NavigationControl:地图
平移缩放控件
,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。 -
OverviewMapControl:
缩略地图
控件,默认位于地图右下方,是一个可折叠的缩略地图。 -
ScaleControl:
比例尺
控件,默认位于地图左下方,显示地图的比例关系。 -
MapTypeControl:
地图类型
控件,默认位于地图右上方。 - CopyrightControl:
版权
控件,默认位于地图左下方。 -
GeolocationControl:
定位
控件,默认位于地图左下方。
要在地图上添加这些控件非常简单,创建好自己的地图然后直接往地图上添加就行了:
var map = new BMap.Map("container"); // 初始化地图
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
五、地图覆盖物类
所有叠加或覆盖到地图的内容,统称为地图覆盖物
。
- Overlay:覆盖物的
抽象基类
,所有的覆盖物均继承此类的方法。 -
Marker:标注表示地图上的
点
,可自定义标注的图标。
var marker = new BMap.Marker(point);
map.addOverlay(marker);
-
Label:表示地图上的
文本标注
,可以自定义标注的文本内容。
var opts = {
position: point, // 指定文本标注所在的地理位置
offset: new BMap.Size(30, -30) //设置文本偏移量
}
var label = new BMap.Label("文本标注", opts); // 创建文本标注对象
map.addOverlay(label);
-
Polyline:表示地图上的
折线
。
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);
-
Polygon:表示地图上的
多边形
。多边形类似于闭合的折线
。 -
Circle: 表示地图上的
圆
。
var circle = new BMap.Circle();
circle.setCenter(point); // 设置圆心
circle.setRadius(1000); // 设置半径(米)
circle.setStrokeColor('blue');
circle.setStrokeStyle('dashed');
map.addOverlay(circle);
-
InfoWindow:表示地图上的
信息窗口
,可以展示更为丰富的文字和多媒体信息。注意:同一时刻只能有一个信息窗口在地图上打开。
var opts = {
width: 100, // 信息窗口宽度
height: 80, // 信息窗口高度
title: "亚信科技", // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("地址:江苏省南京市古平岗4号紫金智梦园B座亚信科技", opts); // 创建信息窗口对象
marker.addEventListener("click", function () {
map.openInfoWindow(infoWindow, point); //开启信息窗口
});
六、事件
百度地图API拥有一个自己的事件模型,程序员可监听地图API对象的自定义事件,使用方法和DOM事件类似。但请注意,地图API事件是独立的,与标准DOM事件不同。
1、事件监听
百度地图API中的大部分对象都含有addEventListener方法,可以通过该方法来监听对象事件。
addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。在下面示例中,用户点击地图时,会弹出一个警告框。
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("click", function(){
alert("您点击了地图。");
});
2、移除监听事件
每个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);