实现原理就是两步
第一步创建标记点,官方文档:
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay
第二步创建文本标注,官方文档
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/label
直接上我的垃圾代码,没有任何优化,自己看吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container{
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=自己申请"></script>
<script type="text/javascript">
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(118.17466, 39.673569), 13); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// 创建带标注的点
makePoint(118.17466, 39.673569, '唐山师范学院', map, function(e) {
// 回调
console.log(e)
})
// 创建点
function makePoint(long, lat, str, mapObject, callback) {
var point = new BMapGL.Point(long, lat);
var marker = new BMapGL.Marker(point); // 创建标注
mapObject.addOverlay(marker);
var label = new BMapGL.Label(makeBubl(str), { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(-50, -60) // 设置标注的偏移量
})
label.setStyle({ // 设置label的样式
border: '2px solid #fff'
})
mapObject.addOverlay(label)
marker.addEventListener("click", function(e) {
callback(e)
});
}
// 创建标注
function makeBubl(str) {
let html = ""
html +=
'<div style="width:150px;text-align:center;padding:0px 10px;white-space: pre-wrap;border:5px solid #171e39; position:relative;background-color:#171e39;color:#fff">' +
'<span style="width:0; height:0; font-size:0; overflow:hidden; position:absolute;border-width:10px; border-style:solid dashed dashed; border-color:#171e39 transparent transparent;left:28px; bottom:-20px;"></span>' +
str +
'</div>'
return html
}
</script>
</body>
</html>
效果: