百度地图问题
我动态生成的几个点,点击出现文本框,然后点里面的处理告警又出现一个大的弹窗,这个弹窗该怎么实现。
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
自己写一个弹窗呗,层级在地图之上