示例Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
#allmap {
height: 100%;
width: 100%;
}
ul li {
list-style: none;
}
.btn-wrap {
z-index: 999;
position: fixed;
bottom: 3.5rem;
margin-left: 3rem;
padding: 1rem 1rem;
border-radius: .25rem;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.btn {
width: 100px;
height: 30px;
float: left;
background-color: #fff;
color: rgba(27, 142, 236, 1);
font-size: 14px;
border: 1px solid rgba(27, 142, 236, 1);
border-radius: 5px;
margin: 0 5px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.btn:hover {
background-color: rgba(27, 142, 236, 0.8);
color: #fff;
}
</style>
</head>
<body>
<div id="allmap"></div>
<ul class="btn-wrap" style="z-index: 99;">
<li class="light btn" onclick="addOverlay1()">添加线覆盖物</li>
<li class="night btn" onclick="removeOverlay()">清除线覆盖物</li>
</ul>
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMapGL.Map('allmap');
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var listLine = []
var marker1 = new BMapGL.Marker(new BMapGL.Point(116.399, 39.910))
var marker2 = new BMapGL.Marker(new BMapGL.Point(116.405, 39.920))
var marker3 = new BMapGL.Marker(new BMapGL.Point(116.425, 39.900))
marker1.disableMassClear();
marker2.disableMassClear();
marker3.disableMassClear();
map.addOverlay(marker1)
map.addOverlay(marker2)
map.addOverlay(marker3)
function addOverlay1() {
// 创建折线
var polyline = new BMapGL.Polyline([
new BMapGL.Point(116.399, 39.910),
new BMapGL.Point(116.405, 39.920),
new BMapGL.Point(116.425, 39.900)
], {
strokeColor: 'blue',
strokeWeight: 2,
strokeOpacity: 0.5
});
map.addOverlay(polyline); // 增加折线
}
// 清除折线覆盖物
function removeOverlay() {
map.clearOverlays();
}
</script>
</body>
</html>