百度地图RichMarker富标记点

最新推荐文章于 2024-09-11 09:29:45 发布

yb305小白

最新推荐文章于 2024-09-11 09:29:45 发布

阅读量1k

点赞数

分类专栏：地图——百度地图文章标签：百度街景地图 market

本文链接：https://blog.youkuaiyun.com/yb305/article/details/105815978

版权

地图——百度地图专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用百度地图API和RichMarker库在地图上创建带有丰富样式的标记点，包括初始化地图、设置样式和添加自定义标记点的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

富标记点代码

<html>
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"></script>
<script src="./RichMarker_min.js"></script>
<script src="./jquery-3.3.1.min.js"></script>
<style>
._1AB {
    width: 35px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    border-radius: 4px;
}

._1AB ._1UR {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    position: absolute;
    margin-left: -6px;
    left: 50%;
    top: 24px;
}
</style>

</head>
<body>
<div id="map" style="width:800px;height:550px;">
</div>
</body>
<script>
$(function(){
  initMap();
});
function initMap(){
    var map = new BMap.Map("map", {enableMapClick: false});
	var point = new BMap.Point(119.169408, 34.577856);
    map.centerAndZoom(point, 16);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var mapStyle = {
        features: ["road", "building", "water", "land"]//隐藏地图上的poi
    };
    map.setMapStyle(mapStyle);    
    var richMarkerStr = getRichMarker1();
    var myRichMarker2 = new BMapLib.RichMarker(richMarkerStr, point, {
        "anchor": new BMap.Size(-17, -22),
        "enableDragging": false
    });
    map.addOverlay(myRichMarker2);
}
/**
 * 富标签
 */
function getRichMarker1() {
    var strHtml = '<div class="leaflet-marker-icon leaflet-zoom-animated leaflet-    interactive" tabindex="0" style="width: 35px; height: 22px; z-index: 600;">' +
        '<div class="_1AB" style="background:green;color:#fff;font-size:12px;">' +
        '<div class="_1UR" style="border-top-color:green;"></div>22'+
        '</div>' +
        '</div>';
    return strHtml;
}
</script>
</html>

效果：