个性化地图标记点弹窗设置css（百度地图—修改infowindow样式）
2023-09-23 11:52AM
在原来基础上修改CSS样式
总的来说就是修改这个弹窗的样式，新样式加 !important 覆盖掉旧样式。
下面是代码示例：
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
.BMap_bubble_pop {
padding: 0px 8px;
position: absolute;
cursor: default;
left: 484px;
top: 9px;
width: 248px;
height: 264px;
color: #fff !important;
box-shadow: 0px 3px 6px -4px rgba(0,0,0,0.12), 0px 6px 16px 0px rgba(0,0,0,0.08), 0px 9px 28px 8px rgba(0,0,0,0.05);
opacity: 1;
background: #001c2e !important;
opacity: 1;
border: 1px solid #20539d !important;
border-radius: 20px !important;
}
.BMap_bubble_title {
line-height: 21px !important;
overflow: hidden;
white-space: nowrap;
width: 248px;
color: #fff !important;
margin-top: 35px;
height: 46px !important;
font-size: 16px;
height: 46px;
font-size: 16px;
margin-left: 10px !important;
}
.BMap_bubble_content {
font-size: 15px;
line-height: 24px;
position: absolute;
top: 2px;
width: 236px;
height: 264px;
overflow: auto;
margin-top: 40px;
margin-left: 10px;
color: #a8d6ff !important;
margin-top: 0px !important;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(87.617733, 43.792818), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setMapStyleV2({
styleId: '你的个性化地图样式ID'
});
</script>
<script>
var point = new BMapGL.Point(87.617733, 43.792818);
map.centerAndZoom(point, 15);
// 创建点标记
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
// 创建信息窗口
var opts = {
width: 300,
height: 233,
title : "新疆新联农产品有限公司001号储备仓<br/>" , // 信息窗口标题
};
var infoWindow = new BMapGL.InfoWindow("物资名称：面粉</br>储备数量：3000吨</br>联系人：周利民<br/>联系电话：13682509276<br/> 企业类型：生产加工企业<br/>\
<a href='/material_reserves/2' style='text-decoration: none; color: #01c2ff; font-size: 17px; text-align: center; margin: 15px 40px; width: 180px; height: 40px; display: block;\
background: #0b1c32; border: 1px solid #3181b9; border-radius: 30px;line-height: 195%;'>点击查看物资报表\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-right-fill' viewBox='0 0 16 16'>\
<path d='m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z'/> </svg></a>", opts);
// 点标记添加点击事件
marker.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
</script>
没修改之前的弹窗是这样的：
修改完弹窗样式，是下面这样的：
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论