百度地图问题

发布于 2022-09-11 17:12:09 字数 2959 浏览 11 评论 0

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

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); //开启信息窗口
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

慕巷 2022-09-18 17:12:09

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文