本文系作者 chaoCode原創，轉載請私信并在文章開頭附帶作者和原文地址鏈接，
違者，作者保留追究權利，
前言
PS：我所使用的的是百度地圖Javascript API 3.0
本文是對之前使用的延續，繼續對百度地圖API的一些使用去做歸納和總結，本次主要是對地圖上的覆寫物這塊做介紹，如果有小伙伴沒有看過之前的百度地圖API基本使用（一）｜8月更文挑戰，可以先去觀看一下，前期所需要的一些準備，以及一些基本的用法，
感興趣的小伙伴可以自行查看百度地圖官方提供的檔案
百度地圖開放平臺開發檔案中的JavaScript API
也可以通過下方示例中心更直觀的看到百度地圖API的一些使用，以及它的一些特性
百度地圖開放平臺-示例中心
不過要注意：實體中心使用的是BMapGL去創建容器的，最新版GL地圖命名空間為BMapGL, 可按住滑鼠右鍵控制地圖旋轉、修改傾斜角度，
由于本次使用的是BMapGL所以在引入API的時候也不太一樣
引入方式如下：
<script type="text/javascript" src="https://www.cnblogs.com//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="https://www.cnblogs.com//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>
<script type="text/javascript" src="https://www.cnblogs.com//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以及視角影片，如果感興趣的小伙伴可以自行查看研究
覆寫物-軌跡運動
感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流，如果這篇文章幫助到了你，歡迎點贊??和關注，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/308400.html
標籤：jQuery
上一篇：百度地圖API基本使用（一）
下一篇：百度地圖API基本使用（三）