百度地图创建多个带文本标注的点

本文链接：https://blog.csdn.net/wozhenhaokan/article/details/119674958

实现原理就是两步

第一步创建标记点，官方文档：

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>

效果：