一、百度地图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端默认位于地图左上方,它包含控制地图的平移和缩放的功能。

    navigationcontrol.png

  • OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。

    overviewmapcontrol.png

  • ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。

    scalecontrol.png

  • MapTypeControl:地图类型控件,默认位于地图右上方。

    maptypecontrol.png

  • CopyrightControl:版权控件,默认位于地图左下方。
  • GeolocationControl:定位控件,默认位于地图左下方。

    geolocationcontrol.png

要在地图上添加这些控件非常简单,创建好自己的地图然后直接往地图上添加就行了:

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:标注表示地图上的,可自定义标注的图标。

    marker.png

var marker = new BMap.Marker(point);
map.addOverlay(marker);
  • Label:表示地图上的文本标注,可以自定义标注的文本内容。

    label.png

var opts = {
  position: point, // 指定文本标注所在的地理位置
  offset: new BMap.Size(30, -30) //设置文本偏移量
}
var label = new BMap.Label("文本标注", opts); // 创建文本标注对象
map.addOverlay(label);
  • Polyline:表示地图上的折线

    polyline.png

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: 表示地图上的

    circle.png

var circle = new BMap.Circle();
circle.setCenter(point); // 设置圆心
circle.setRadius(1000); // 设置半径(米)
circle.setStrokeColor('blue');
circle.setStrokeStyle('dashed');
map.addOverlay(circle);
  • InfoWindow:表示地图上的信息窗口,可以展示更为丰富的文字和多媒体信息。注意:同一时刻只能有一个信息窗口在地图上打开。

    infowindow.png

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