百度地图文字标签（label）水平居中transform的应用

六月初六月初 地图开发 2019-08-22 07:53:26

百度地图的应用和开发在大多数网站中是很常见的一个应用，地图的开发相关的也会设计到地图上坐标点的标记以及对应坐标点文字标签的应用。

关于文字标签百度地图提供了默认的样式即红色边框、白色背景、黑色字，但这些对我们来说是显然不够的！本文就详细描述如何通过百度地图提供的参数来完成坐标点样式的美化及标签位置的水平居中！

最终效果如图：


从图中我们看出label文字标签位于标记点上方且水平居中！那么我们要如何实现呢？

关键代码：

transform: 'translateX(-50%)'

transform 是css3提供的属性，这里主要就是利用的该属性特性X轴移动负的50%来完成水平居中效果，当然这里用到的不仅仅是这个属性还需要配合百度提供的参数来在优化水平居中！ 

案例完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=需自己去百度地图控制台申请"></script>
	</head>
	<body>
		<div id="map" style="height: 400px;width: 100%;">

		</div>
		<script>
			$(function() {
				initMap()
			})
			//创建和初始化地图函数：
			function initMap() {
				createMap(); //创建地图
			}

			function createMap() {
				map = new BMap.Map("map");
				map.centerAndZoom(new BMap.Point(103.632988, 30.995601), 13);
				var markers = [{
						msg: "六月初博客站",
						imageOffset: {
							width: -46,
							height: -21
						},
						position: {
							lat: 31.010706,
							lng: 103.623789
						}
					}
				];
				for (var index = 0; index < markers.length; index++) {
					var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
					var marker = new BMap.Marker(point, {
						icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
							imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
						})
					});
					var label = new BMap.Label(markers[index].msg,{offset:new BMap.Size(10,-30)});
					label.setStyle({
						color : "#fff", 
						fontSize : "16px", 
						backgroundColor :"rgba(0,0,0,0.5)",
						border :"0",
						lineHeight:'23px',
						padding:'2px 5px',
						borderRadius:'5px 5px',
						transform: 'translateX(-50%)'
					});
					marker.setLabel(label);
					map.addOverlay(marker);
				};


			}

		</script>
	</body>
</html>

代码关键点解析：

icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
	imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
})

自定义图标样式，注意点：图片宽高必须和Size参数对应，因为地图不支持图片自适应处理！

var label = new BMap.Label(markers[index].msg,{offset:new BMap.Size(10,-30)})

设置每个文字标签的内容及位置设置，注意这里的size是设置文字标签的位置，10是图标宽度的一半（如果不设置为图标宽度的一半，最终结果居中结果会多出图标一半的距离）-30为位于图标顶部-30像素位置处（注该数据依照图标高度再多大约5像素即可完整的位于图标顶部）

label.setStyle 是对文字标签的样式优化，你可以根据你自己的需求进行对应的参数设置！ 


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！