- A+
所属分类：Web前端
本文系作者 chaoCode原创，转载请私信并在文章开头附带作者和原文地址链接。
违者，作者保留追究权利。
前言
PS：我所使用的的是百度地图Javascript API 3.0
本文是对之前使用的延续，继续对百度地图API的一些使用去做归纳和总结，本次主要是对地图上的覆盖物这块做介绍，如果有小伙伴没有看过之前的百度地图API基本使用（一）｜8月更文挑战，可以先去观看一下，前期所需要的一些准备，以及一些基本的用法。
感兴趣的小伙伴可以自行查看百度地图官方提供的文档
百度地图开放平台开发文档中的JavaScript API
也可以通过下方示例中心更直观的看到百度地图API的一些使用，以及它的一些特性
百度地图开放平台-示例中心
不过要注意：实例中心使用的是BMapGL去创建容器的，最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。
由于本次使用的是BMapGL所以在引入API的时候也不太一样
引入方式如下：
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script> 好的，废话不多说，开整
百度地图API-覆盖物
在讲覆盖物之前，先给大家讲一下覆盖物的添加和删除的方法，这个是通用的，下面各种类型的覆盖的添加和删除的使用是一样的。
在我们获取到容器之后，根据自己的需求创建好自己的覆盖物对象之后，如果我们需要添加覆盖物的话，就可以使用容器对象.addOverlay(覆盖物对象);
如果我们需要清除覆盖物的话，只需要使用
容器对象.clearOverlays();
就可以清除所有，但是如果只是想清除某一个覆盖物的话，我们需要使用
容器对象.removeOverlays(覆盖物对象);
代码示例如下:
//创建容器 var map = new BMapGL.Map('allmap'); var point = new BMapGL.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 创建点覆盖物 var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915)); //添加覆盖物 map.addOverlay(marker); //删除具体覆盖物 map.removeOverlays(marker); //删除所有覆盖物 map.clearOverlays(); 1. 点覆盖物
点覆盖物主要使用的是Marker这个方法，例如：
var marker1 = new BMapGL.Marker(new BMapGL.Point(经度, 纬度));
这样就创建好了一个点覆盖物对象，我们需要使用上面介绍的添加覆盖物的方法，将覆盖物添加到容器中，即容器对象.addOverlay(marker1)
这样就实现了简单的点覆盖物，不过有的时候需要我们的覆盖物能够拖动，所以这个时候就要用到一个属性
enableDragging，默认情况下是false,也就是说在上面的那些默认创建的方式这个属性都是false,这是属性字面意思也很好理解支持拖拽，所以如果有需要拖拽的需求，我们只需要将整个属性设置为true。
代码示例如下：
var map = new BMapGL.Map('container'); map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15); map.enableScrollWheelZoom(true); // 创建点标记 var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925)); var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915),{ enableDragging: true }); // 在地图上添加点标记 map.addOverlay(marker1); map.addOverlay(marker2); 上面实现了根据经纬度去定位点覆盖物，以及通过enableDragging属性设置为可拖拽。如果我们的需求是这个点覆盖物不用它默认的红色点，使用一个小车的图片或者别的什么图片，这个时候就需要我们去自定义这个点的图片以及点覆盖物初始化的时候使用我们引入的图标，去做一下修改
代码如下：
var map = new BMapGL.Map('container'); var point = new BMapGL.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 创建小车图标 var myIcon = new BMapGL.Icon("/jsdemo/img/car.png", new BMap.Size(52, 26)); // 创建Marker标注，使用小车图标 var pt = new BMapGL.Point(116.417, 39.909); var marker = new BMapGL.Marker(pt, { icon: myIcon }); // 将标注添加到地图 map.addOverlay(marker); 后续可能还需要对点覆盖物添加点击事件，实现也比较简单，直接上代码：
var map = new BMapGL.Map('container'); var point = new BMapGL.Point(116.404, 39.925); map.centerAndZoom(point, 15); // 创建点标记 var marker = new BMapGL.Marker(point); map.addOverlay(marker); // 创建信息窗口 var opts = { width: 200, height: 100, title: '故宫博物院' }; var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts); // 点标记添加点击事件 marker.addEventListener('click', function () { map.openInfoWindow(infoWindow, point); // 开启信息窗口 }); 实现效果如下图所示：
如果想研究比较详细的点覆盖物的小伙伴可以自行查看研究
覆盖物-点覆盖物
2. 矢量图形覆盖物
var map = new BMapGL.Map('container'); var point = new BMapGL.Point(116.404, 39.915); map.centerAndZoom(point, 15); map.enableScrollWheelZoom(true); // 绘制面 var polygon = new BMapGL.Polygon([ new BMapGL.Point(116.387112, 39.920977), new BMapGL.Point(116.385243, 39.913063), new BMapGL.Point(116.394226, 39.917988), new BMapGL.Point(116.401772, 39.921364), new BMapGL.Point(116.41248, 39.927893) ], { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 }); map.addOverlay(polygon); // 绘制线 var polyline = new BMapGL.Polyline([ new BMapGL.Point(116.399, 39.910), new BMapGL.Point(116.405, 39.920), new BMapGL.Point(116.423493, 39.907445) ], { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 }); map.addOverlay(polyline); // 绘制圆 var circle = new BMapGL.Circle(new BMapGL.Point(116.404, 39.915), 500, { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 }); map.addOverlay(circle); 实现效果如下图所示：
还有镂空面绘制，贝塞尔曲线，以及3D棱柱的实现，感兴趣的小伙伴可以自行查看研究
覆盖物-矢量图形覆盖物
3. 叠加层
叠加层目前项目上没有应用，所以这块就不做过多阐述，感兴趣的小伙伴可以自行查看研究
覆盖物-叠加层
4. 信息窗口
InfoWindow：信息窗口。也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。
添加信息窗口
信息窗口是地图上方浮动显示的HTML内容，可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。
注意：同一时刻地图上只能有一个信息窗口处于打开状态。
// 百度地图API功能 var map = new BMapGL.Map("allmap"); var point = new BMapGL.Point(116.404, 39.925); map.centerAndZoom(point, 15); var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 var opts = { width : 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "故宫博物院" , // 信息窗口标题 message:"这里是故宫" } var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象 marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow, point); //开启信息窗口 }); 还有图文组合类型，带检索功能的信息窗口，感兴趣的小伙伴可以自行查看研究
覆盖物-信息窗口
5. 右键菜单
var map = new BMapGL.Map('container'); map.centerAndZoom(new BMapGL.Point(116.403694, 39.927552), 12); map.enableScrollWheelZoom(true); var menu = new BMapGL.ContextMenu(); var txtMenuItem = [ { text: '放大一级', callback: function () { map.zoomIn(); } }, { text: '缩小一级', callback: function () { map.zoomOut(); } } ]; for (var i = 0; i < txtMenuItem.length; i++) { menu.addItem(new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)); } map.addContextMenu(menu); 6. 轨迹运动
代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script> <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script> <title>大地线路书</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMapGL.Map("allmap"); var point = new BMapGL.Point(116.404, 39.925); map.centerAndZoom(point, 4); map.enableScrollWheelZoom(); function startLushu() { var fly = 'data:image/png;base64,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'; lushu = new BMapGLLib.LuShu(map, polyline.getPath(), { geodesic: true, autoCenter: true, icon: new BMapGL.Icon(fly, new BMapGL.Size(48, 48), { anchor: new BMapGL.Size(24, 24) }), speed: 1000000, enableRotation: true }); setTimeout('lushu.start()', 4000); } var path = [ new BMapGL.Point(116.617562,40.0823), new BMapGL.Point(37.700058,55.850864) ]; var polyline = new BMapGL.Polyline(path, { clip: false, geodesic: true, strokeWeight: 3 }); map.addOverlay(polyline); startLushu(); </script> 轨迹运动还有3D以及视角动画，如果感兴趣的小伙伴可以自行查看研究
覆盖物-轨迹运动
感谢诸君的观看，文中如有纰漏，欢迎在评论区来交流。如果这篇文章帮助到了你，欢迎点赞?和关注。
