<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>地图定位</title>
<!-- 引入百度API密钥 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
</head>
<style>
#allmap,body,html{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<!-- 显示地图 -->
<div id="allmap"></div>
<script type="text/javascript">
// 百度地图API功能初始化地图组件
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.399, 39.910);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
var i=0;
function showInfo(e){
let lon0 = e.point.lng;
let lat0 = e.point.lat;
Polyline1.push({lon:lon0,lat:lat0,id:i})
Polyline0(Polyline1)
i++;
}
map.addEventListener("click", showInfo);
let Polyline1=[];
//在地图上创建线段
function Polyline0(item){ //创建折线
let polyline2=[];
for (let i in item) {
polyline2.push(new BMap.Point(item[i].lon, item[i].lat));
}
let polyline3 = new BMap.Polyline(polyline2,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline3);
//执行点击可删除线段调用（未实现）
if(Polyline1.length>0){
Polyline1.map(item=>{
addInfoBox(item)
})
}
}
//执行点击可删除线段（未实现）
function addInfoBox(infoObj){
let point = new BMap.Point(infoObj.lon, infoObj.lat);
// 信息框
let alertBox = null;
let sContent =
`<div class="alert-main" id="${infoObj.id}">
<div data-type='aaa'> 店击删除</div>
</div>`
alertBox = new BMapLib.InfoBox(map, sContent, { //创建信息窗口
boxClass: "alert", //信息框最外层类名
closeIconMargin: "0px -1px 0 0",
closeIconRight:'0px',
closeIconUrl: "./1.png"
}); // 创建信息窗口对象
alertBox.open(point);
//点击事件
alertBox.addEventListener('open',() =>{ //监听弹窗是否创建出来
setTimeout( () =>{
let cpny = document.getElementById(infoObj.id)
cpny.addEventListener('click',(e) =>{ //点击可以获取具体点击事件
i--;
console.log(i,"i")
Polyline1.splice(infoObj.id,1);
Polyline0(Polyline1);
console.log(Polyline1,'shiaij');
alertBox.close()
})
},200)
})
}
</script>
</body>
</html>
网友评论