《PS：我所使用的的是百度地图Javascript API 3.0》序言 　　

　　

　　本文是之前使用的延续，继续总结和归纳百度地图API的一些使用方法。这次主要介绍地图上的封面。如果有朋友之前没看过百度地图API (I)的基本用法，可以先去看看，前期需要的一些准备，一些基本用法。 　　

　　

　　有兴趣的伙伴可以自行查看百度地图提供的官方文档。 　　

　　

　　百度地图开放平台开发文档中的JavaScript API 　　

　　

　　也可以通过下面的例子中心更直观的看到百度地图API的一些用法和它的一些特性。 　　

　　

　　百度地图开放平台-实例中心 　　

　　

　　不过要注意：实例中心使用的是BMapGL去创建容器的，最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。 　　

　　

　　因为这次用的是BMapGL，所以引入API的时候就不一样了。 　　

　　

　　引入方法如下： 　　

　　

　　script type=' text/JavaScript ' src='//API . map . Baidu . com/API？type=webglv=1.0 AK=your key '/script好了，事不宜迟，打开吧。 　　

　　

　　百度地图API- Coverage在说覆盖率之前，先说一下如何添加和删除覆盖率。这是通用的，以下类型的覆盖以相同的方式添加和删除。在我们得到容器并根据自己的需要创建自己的覆盖对象后，如果我们需要添加覆盖，我们可以使用容器对象.addOverlay(覆盖物对象);.如果我们需要删除覆盖，我们只需要使用容器对象.clearOverlays();来删除所有内容，但如果我们只是想删除某个覆盖，我们需要使用容器对象.removeOverlays(覆盖物对象);. 　　

　　

　　代码示例是3360。 　　

　　

　　//创建容器var map=new BMapGL。map(' all map ')；var point=新BMapGL。点(116.404，39.915)；map.centerAndZoom(point，15)；//创建一个点覆盖var marker=newmapgl . marker(newmapgl . point(116.404，39.915))；//添加叠加map . Add overlay(marker)；//删除特定的叠加map . remove overlays(marker)；//删除所有覆盖图map . clear overlays()；1.点覆盖点覆盖主要使用标记的方法，例如：var Marker 1=newmapgl . Marker(newmapgl . Point(经度，纬度))；这样就创建了一个点叠加对象，我们需要将叠加添加到容器中，也就是容器对象。addOverlay(marker1)，通过使用上面介绍的添加覆盖的方法。 　　

　　

　　这样就实现了一个简单的点叠加，但是有时候需要我们的叠加能够拖动，所以这个时候就需要使用一个默认为假的属性enableDragging,也就是说上面所有默认的创建方法都是假的。这是属性的字面意思，很容易理解，所以如果需要拖动，我们只需要将整个属性设置为true。 　　

　　

　　代码示例如下： 　　

　　

　　var map=新BMapGL。地图(“容器”)；map.centerAndZoom(新BMapGL。点(116.404，39.928)，15)；map . enablescrollwheelzoom(true)；//创建一个点标记var marker 1=newmapgl . marker(newmapgl . point(116.404，39.925))；var marker2=新BMapGL。标记(新BMapGL。点(116.404，39.915)，{ enabledragging : true })；//在地图上添加一个点标记map . Add overlay(marker 1)；map . add overlay(marker 2)；以上实现了根据经纬度定位点覆盖，并通过enableDragging属性设置为可拖动。如果我们的需求是这个点盖不使用它默认的红点，而是使用一张汽车的图片或者其他的图片，那么我们就需要自定义这个点的图片，使用我们在点盖初始化时引入的图标，从而进行一些修改。 　　

　　

　　代码如下： 　　

　　

　　var map=新BMapGL。地图(“容器”)；var point=新BMapGL。点(116.404，39.915)；map.centerAndZoom(point，15)；//创建汽车图标varmyicon=new mapgl . icon('/js demo/I 　　

mg/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.text, txtMenuItem.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以及视觉动画，如果感兴趣的小伙伴可以自行查看研究
覆盖物-轨迹运动

　　

感谢诸君的观看，文中如有纰漏，欢迎在评论区来交流。如果这篇文章帮助到了你，欢迎点赞和关注。