您的位置：首页 > Web前端 > CSS

修改 百度地图 infowindow 默认样式

2017-11-11 22:56 513 查看
1.百度 api 没有 提供可以修改 infowindow 默认样式的 方法。

如需修改，需要 自定义 替换 默认样式。

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="map"></div>
<!-- 弹窗内容 -->
<div id="cont">
<div id="close"></div>
<p id="title"></p>
<table border='0' cellpadding='3' cellspacing='1' >
<tr>
<td>值班领导</td>
<td>值班员</td>
<td>当班执勤科队</td>
<td>重要事项</td>
<td>通道开通</td>
</tr>
<tr>
<td>张站长</td>
<td>王小二</td>
<td>巡检科一队</td>
<td>无</td>
<td>自动12，人工4</td>
</tr>
<tr>
<td>李站长</td>
<td>张小四</td>
<td>巡检科二队</td>
<td>增加人工通道</td>
<td>自动12，人工4</td>
</tr>
</table>
</div>
</body>
<script>
var map = new BMap.Map("map", {
minZoom : 12,
maxZoom : 18
});

var point = new BMap.Point(114.1262324342, 22.5390750268);// 创建点坐标
map.centerAndZoom(point, 12);// 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。

// 默认位置
var ptlt = new BMap.Point(114.1622188176,22.5594612014);
var myIconlt = new BMap.Icon("icon.png", new BMap.Size(71, 95),{
anchor: new BMap.Size(-20, 10)
});
myIconlt.setImageSize(new BMap.Size(71, 95));
var markerlt = new BMap.Marker(ptlt, { icon: myIconlt });  // 创建标注
map.addOverlay(markerlt);    //增加点

// 弹窗
markerlt.addEventListener("mouseover", function () {
$('#cont').css({'display':'','top': mouseYPosition + 'px','left': mouseXPosition + 'px'});
setModal('莲塘边检站勤务实时信息');
});

markerlt.addEventListener("mouseout", function () {
$('#cont').css({'display':'none'});
});
/*********************************************************************************/
$('#cont').on('mouseover',function(){
$('#cont').css({'display':''});
})

/*获取当前鼠标位置*/
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

document.onmousemove = mouseMove;

var mouseXPosition;
var mouseYPosition;

function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
mouseXPosition = mousePos.x - 230;
mouseYPosition = mousePos.y - 170;
}
/*关闭弹出*/
$('#close').on('click',function(){
$('#cont').css({'display':'none'});
});

/*简单封装 设置title*/
function setModal(title){
$('#title').text(title);
}
</script>
</html>


　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航