记一次百度地图的交互开发

1.需求：在开始介绍功能实现之前，先捋一下需求。

总体的场景是这样的，网页的上70%是控件百度地图，底部大约30%的表格，用于显示已经渲染在地图上的marker的直观信息。

需求一：在百度地图上生成一个当前鼠标点击的位置，生成一个marker并展示。

需求二：可以点击地图上生成的marker，生成弹窗展示该marker的基本信息，并提供可点击的功能操作按钮。

需求三：点击下方的表格，跳转到对应的百度地图上的marker，并直接弹出需求二的弹窗。

2.实现思路：

需求一：
先通过在百度地图上的点击事件；

map.addEventListener("click", showInfo);

在map上添加的点击事件，我们将业务代码写在showInfo函数中。通过点击事件，我们能拿到鼠标触发我们需要的经纬度。

function showInfo(e) {
	var pt = e.point;
	$(".BMapLib_sendToPhone").css("display", "none");
	geoc.getLocation(pt, function(rs) {
		//addressComponents对象可以获取到详细的地址信息
		var x = pt.lng;
		var y = pt.lat;
		var addComp = rs.addressComponents;
		var site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street;
		//			 + ", " + addComp.streetNumber 
		openInfoWindow3(x, y, site);
	});
}

在获取到经纬度后，调用openInfoWindow3，弹出弹窗填入我们需要的一些marker信息，x,y为传入的经纬度参数，site为街道位置，不需要的可直接忽略。

var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, content, {
			title: "添加设备", //标题
			width: 850, //宽度
			height: 650, //高度
			panel: "panel", //检索结果面板
			enableAutoPan: true, //自动平移
			searchTypes: []
		});
		searchInfoWindow3.open(new BMap.Point(x, y));
		console.log($('.BMapLib_bubble_content .submitBtn'));
		$('.BMapLib_bubble_content .submitBtn').click(function() {

        })

在openInfoWindow3函数中，我们可以对地图上的弹窗进行配置，基本配置内容如上（可以自行挖掘百度地图），content这个参数是你想要插入的代码文本。值得一提的是，在弹窗中直接放入一个点击事件是无效的，我的解决方案是从它的dom结构中找到它的父节点索引，从而才能找到我自定义的点击事件。

接下来就是在地图上生成marker了。

var pt = new BMap.Point(item.Longitude, item.Latitude);
				var myIcon = new BMap.Icon("./img/icon_lamp.png", new BMap.Size(150, 150));
				var marker2 = new BMap.Marker(pt, {
					icon: myIcon
				}); // 创建标注
				map.addOverlay(marker2);

配置好marker，调用map方法,addOverlay()生成配置好的marker。我这里批量生成放在$.each中。

 

 

需求二（可以点击地图上生成的marker，生成弹窗展示该marker的基本信息，并提供可点击的功能操作按钮。）：

和之前需求一的地图点击弹窗事件一样，依然是同样的方法，不过换成了marker对象而已。

marker2.addEventListener('click', mapLayerClick);

将业务代码放在mapLayerClick中

function mapLayerClick(e) {
	var p = e.target.point;
	var lng = p.lng;
	var lat = p.lat;
	openInfoWindow3(lng, lat);
}

对，你没有看错。调用熟悉的函数，但只是名字相同而已。这里通过获取到经纬度，从而在调用的函数中获取到我们需要的信息。

弹窗调用过程同上，点击事件上面需求一也介绍过了。。

需求三（点击下方的表格，跳转到对应的百度地图上的marker，并直接弹出需求二的弹窗。）：

$(document).on('click', '.table_tbody tr', function() {
	var para = $(this).attr("value");

	var lng = para.split(",")[0];
	var lat = para.split(",")[1];
	map.panTo(BMap.Point(lng, lat));
	openInfoWindow3(lng, lat);
})

在前面都走过了 需求三就比较方便了。

获得到选中列的经纬度，使用map.panTo()方法，移动我们的地图中心点。这里有点需要注意，此方法的参数百度地图官方的文档中是new 一个 BMap.Point()。在你的项目中去重复new 一个这玩意会出现一个酸爽到不可描述的bug，感兴趣的可以研究研究~

之后再调用之前的弹窗函数，出现的效果就是定位到地图上的marker点并且自动弹出弹窗。

附效果图：

如上图，点击最底部，直接出现在地图上marker的位置并弹出弹窗。