百度地图点击事件的参数传递customData使用

六月初六月初 地图开发 2019-08-21 17:56:42

百度地图中点击页面某个点，在点的位置即展示我们需要给用户看的数据。而数据的展现查询势必会关系到我们要如何确定用户点击了哪个点，只有当我们知道了用户的需求后才能根据用户的需求给出对应的展示结果。

而这便涉及到了参数的传递，即百度地图提供的customData方法使用！

案例效果如图，当点击其中一个点是，传递出该点对应的某个值：


关键代码展示：

marker.customData = {
	id: markers[index].msg
}

示例完整代码：

<!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() {
				var markers1 = [{
						name: '六月初',
						lat: 31.010706,
						lng: 103.623789
					},
					{
						name: '生活',
						lat: 30.986685,
						lng: 103.613728
					}
				];
				initMap(markers1)
			})
			//创建和初始化地图函数：
			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
						}
					},
					{
						msg: "六月初博客",
						imageOffset: {
							width: -46,
							height: -21
						},
						position: {
							lat: 30.986685,
							lng: 103.613728
						}
					},
					{
						msg: "六月初",
						imageOffset: {
							width: -46,
							height: -21
						},
						position: {
							lat: 30.985695,
							lng: 103.583258
						}
					}
				];
				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)
						})
					});
					marker.customData = {
						id: markers[index].msg
					}
					marker.addEventListener("click", attribute); //marker.removeEventListener("click",attribute);移除
					map.addOverlay(marker);
				};


			}

			//创建和初始化地图函数：
			function attribute(e) {
				//点击地图穿过来的id  传值时需要设定
				alert(e.target.customData.id)
			}
		</script>
	</body>
</html>

示例解析：

当点击点时，调用attribute方法！绑定attribute方法代码为：

marker.addEventListener("click", attribute);

在这里通过百度地图提供的customData方法绑定了json值！

marker.customData = {
	id: markers[index].msg
}

如此便能成功获取到你绑定的参数！

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