百度地图Api详解之地图标注，ug编程40个基础知识

小编发现还没有人写详细的百度地图Api的地图标注的文章，那今天我们就来详解一下吧！

先说百度地图Api的定义：

百度地图API是一款注重实用性的互联网地图API，它为开发者提供了丰富的易用接口以及免费的开发资源，可以轻松完成地图、POI搜索、路线规划等功能。

而在这个API里面，地图标注也是一个非常重要的功能。

地图标注是指在地图上添加标记点、标线等各种符号，用于展现各种地理信息。覆盖物是地图API提供的用来在地图上展示各种信息的类，包含点、线、面这几个类型。接下来我们就来详细了解一下点、线、面这三个覆盖物的基本操作。

一、点的操作

在地图上添加点覆盖物，需要先创建一个点对象，然后将其添加到地图上。创建点覆盖物需要使用BMap.Point类：

// 定义一个坐标点

var point = new BMap.Point(116.403963,39.915119);

然后使用BMap.Marker类将其添加到地图上，更改标记点的样式也是可以的：

// 创建一个标记点

var marker = new BMap.Marker(point);

// 将标记点添加到地图上

map.addOverlay(marker);

添加完点之后，还可以为其添加弹窗：

// 创建信息框对象

var infoWindow = new BMap.InfoWindow("这是一个信息框");

// 给标记点绑定事件，点击时弹出信息框

marker.addEventListener("click", function(){

map.openInfoWindow(infoWindow, point);

});

二、线的操作

在地图上添加线覆盖物同样需要先创建一个对象，这里使用BMap.Polyline类：

// 创建一条折线

var polyline = new BMap.Polyline([

new BMap.Point(116.368904, 39.913423),

new BMap.Point(116.382122, 39.901176),

new BMap.Point(116.387271, 39.912501),

new BMap.Point(116.398258, 39.904600)

], {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5});

然后将其添加到地图上即可：

// 添加折线到地图上

map.addOverlay(polyline);

为其添加弹窗也和点的操作类似：

// 创建信息框对象

var infoWindow = new BMap.InfoWindow("这是一段路线");

// 给折线绑定事件，点击时弹出信息框

polyline.addEventListener("click", function(){

map.openInfoWindow(infoWindow, polyline.getPath()[0]);

});

三、面的操作

面的操作同样需要先创建一个对象，在这里我们使用BMap.Polygon类，并传入一个数组作为面的坐标点：

// 创建一个带洞的多边形

var holePolygon = new BMap.Polygon([

new BMap.Point(116.387112,39.913223),

new BMap.Point(116.385243,39.902194),

new BMap.Point(116.400590,39.907510),

new BMap.Point(116.407685,39.915190),

new BMap.Point(116.416732,39.903097),

new BMap.Point(116.402292,39.895429),

new BMap.Point(116.389846,39.897818)

], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

然后将其添加到地图上即可：

// 添加多边形到地图上

map.addOverlay(holePolygon);

同样为其添加弹窗：

// 创建信息框对象

var infoWindow = new BMap.InfoWindow("这是一个有洞的多边形");

// 给多边形绑定事件，点击时弹出信息框

holePolygon.addEventListener("click", function(){

map.openInfoWindow(infoWindow, holePolygon.getPath()[0]);

});

以上就是点、线、面三种覆盖物的基本操作，充分利用这些覆盖物，可以为地图增添很多的信息，同时也可以为用户提供更加丰富的交互体验。