富标记点代码
<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>
效果: