百度地图 标注地点弹窗css,多行文字
这是我问chartGPT得到的答案:
以下是示例代码:
// 创建信息窗口 var infoWindow = new BMap.InfoWindow("这里是多行文字,
其中一行是百度链接,
这里是最后一行文字。", { // 设置信息窗口样式 width: 300, offset: new BMap.Size(0, -20), // 垂直偏移量 enableAutoPan: true, // 是否开启地图自动平移 enableMessage: false, // 是否开启发送邮件功能 title: "信息窗口" // 标题 });
// 设置信息窗口样式 infoWindow.setStyle({ color: "#fff", // 字体颜色为白色 background: "#000", // 背景颜色为黑色 border: "none", // 去掉边框 borderRadius: "5px", // 圆角半径 padding: "10px", // 内边距 fontSize: "14px", // 字体大小 lineHeight: "20px" // 行高 });
// 在地图上添加覆盖物,并打开信息窗口 var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); map.addOverlay(marker); marker.addEventListener("click", function() { this.openInfoWindow(infoWindow); });
经过调整,我得到了:
代码:
<div id="allmap"></div>
<style>
#allmap {width: 1140;;height: 503px;;overflow: hidden;margin:0;font-family:"微软雅黑";}
.BMap_bubble_pop {
padding: 0px 8px;
position: absolute;
cursor: default;
left: 484px;
top: 9px;
width: 248px;
height: 264px;
color: #fff !important;
background: rgba(41,34,34,0.94);
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);
border-radius: 2px 2px 2px 2px !important;
opacity: 1;
background: rgba(41,34,34,0.94) !important;
border-radius: 2px 2px 2px 2px !important;
opacity: 1;
}
.BMap_bubble_title {
line-height: 21px !important;
overflow: hidden;
white-space: nowrap;
width: 248px;
color: #fff !important;
margin-top: 22px;
height: 46px !important;
font-size: 16px;
height: 46px;
font-size: 16px;
margin-left: 10px !important;
}
.BMap_bubble_content {
font-size: 14px;
line-height: 24px;
position: absolute;
top: 2px;
width: 236px;
height: 264px;
overflow: auto;
margin-top: 40px;
margin-left: 10px;
color: #fff !important;
margin-top: 18px !important;
}
</style>
<script type="text/javascript">
// 百度地图API功能
var map = new BMapGL.Map("allmap");
// var point = new BMapGL.Point(116.404, 39.925);
var point = new BMapGL.Point(104.001,30.651);
map.centerAndZoom(point, 15);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var opts = {
width : 248, // 信息窗口宽度
height: 264, // 信息窗口高度
title : "广州医药股份有限公司黄金围<br/>仓库" , // 信息窗口标题
message:"药品:2000件</br>联系人:周先生<br/>联系电话:13628378297<br/>企业类型:生产企业储存<br/>物资:面粉"
}
var infoWindow = new BMapGL.InfoWindow("药品:2000件</br>联系人:周先生<br/>联系电话:13628378297<br/> 企业类型:生产企业储存<br/>物资:面粉<hr style='color: #fff;'> <a href='' style='text-decoration: none; color: #fff; text-align: center; margin-left: 40px;'>点击查看物资报表 <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>