百度地图问题

我动态生成的几个点,点击出现文本框,然后点里面的处理告警又出现一个大的弹窗,这个弹窗该怎么实现。

clipboard.png

let map = new BMap.Map("map_box");                  // 创建地图实例  
let point = new BMap.Point(106.52394,29.621038);
map.centerAndZoom(point, 15);                      // 初始化地图,设置中心点坐标和地图级别 

let data_info = [
    {x:106.510645,y:29.632152,carLicense:"渝BTU826",carType:"650EV300",carClassify:"力帆C端车",errType:"可充电储能系统不匹配报警",carArea:"重庆市两江新区艺术商业中心B区"},
    {x:106.504105,y:29.617207,carLicense:"渝BTU827",carType:"650EV300",carClassify:"力帆C端车",errType:"绝缘故障",carArea:"重庆市两江新区艺术商业中心B区"},
    {x:106.512945,y:29.609169,carLicense:"渝BTU828",carType:"650EV300",carClassify:"力帆C端车",errType:"车载储能装置类型过压报警",carArea:"重庆市两江新区艺术商业中心B区"},
    {x:106.51546,y:29.614696,carLicense:"渝BTU829",carType:"650EV300",carClassify:"力帆C端车",errType:"可充电储能系统不匹配报警",carArea:"重庆市两江新区艺术商业中心B区"},
    {x:106.531342,y:29.625308,carLicense:"渝BTU830",carType:"650EV300",carClassify:"力帆C端车",errType:"可充电储能系统不匹配报警",carArea:"重庆市两江新区艺术商业中心B区"}
];

// function addMarker(point) {
//     let marker = new BMap.Marker(point);
//     map.addOverlay(marker);
// }
let opts = {
    width: 286,  // 信息窗口宽度
    height: 110, // 信息窗口高度
    enableMessage: false //设置允许信息窗发送短息
};
 function deal_box(){
    alert(1)
}

myIcon = new BMap.Icon("images/new_warm.png", new BMap.Size(28,28));
for (let i = 0;i < data_info.length; i++) {
    let content=`
        <div class="add_tip">
            <div class="deal_ala">
                <p>处理告警</p>
            </div>
            <ul class='map_ul'>
                <li>${data_info[i].carLicense}</li>
                <li>${data_info[i].carType}</li>
                <li>${data_info[i].carClassify}</li>
            </ul>
            <div class="car_type">
                <span class="car_classify">类型:</span>
                <span class="car_name">${data_info[i].errType}</span>
            </div>
            <div style="line-height:30px;">
                <img src='images/local.png' class='imgDemo'>
                <span class="local_area">${data_info[i].carArea}</span>
            </div>
        </div>
        `;

    let marker = new BMap.Marker(new BMap.Point(data_info[i].x, data_info[i].y),{icon:myIcon}); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
    addClickHandler(content, marker);
    //clickme(i, content);

}



function addClickHandler(content, marker) {
    marker.addEventListener("click", function(e) {
         openInfo(content, e)
    });
}

function openInfo(content, e) {
    var p = e.target;
    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
    map.openInfoWindow(infoWindow, point); //开启信息窗口
}
阅读 3k
1 个回答

自己写一个弹窗呗,层级在地图之上

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题