Blog

自定义百度地图中点标记弹框下面的小箭头（百度地图API—修改infowindow样式）

2023-09-23 05:34PM

点标记坦克最下方的箭头是一张图片，所以可以把原图下方的箭头图片替换为其他图片，然后代替一下原图片。

可以修改 css 样式：

// 主要是增加这里代码，我把这个地图小箭头的图片给它设置为了空，使它不显示; 也可以根据自己的需求添加其他图片

img[src="http://webmap0.bdimg.com/image/api/iw_tail.png"] {
content: url('');
}

</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>

在浏览器打开就可以看到下面的内容

返回>>

请登录后再发表评论。

评论列表:

目前还没有人发表评论