百度地图选区点位信息并标注线段（无法删除）

<!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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。