本文系作者 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以及視角動畫，如果感興趣的小伙伴可以自行查看研究
覆蓋物-軌跡運動
感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流。如果這篇文章幫助到了你，歡迎點贊👍和關注。