百度地图 InfoWindow上添加点击事件

一、应用场景

在地图上展示多个点位信息,点击弹出自定义详细信息(InfoWindow),然后在InfoWindow上添加点击事件操作。例如:

百度地图 InfoWindow上添加点击事件_第1张图片

二、主要方法

        var markerlist=data;//点位信息list
	for (var i = 0; i < markerlist.length; i++) {
		var marker = new BMap.Marker(new BMap.Point(markerlist[i].Latitude, markerlist[i].Longitude));  // 创建标注
		var content ='自定义字段1:'+ markerlist[i].Type_Name+
		    '
自定义字段2:'+ markerlist[i].Type_EnName+ '
'; map.addOverlay(marker);// 将标注添加到地图中 addClickHandler(content, marker); } //给点位添加点击事件 function addClickHandler(content, marker) { marker.addEventListener("click", function (e) { openInfo(content, e); }); } //打开信息窗口 function openInfo(content, e) { var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); //开启信息窗口 //判断窗口的打开状态 if (!infoWindow.isOpen()) { //如果没有打开,则监听打开事件,获取按钮,添加事件 infoWindow.addEventListener("open", function () { document.getElementById("markerbtn").onclick = function (e) { alert("门店编号:"+e.target.dataset.sid); } }) } else {//如果已经打开,直接获取按钮,添加事件 document.getElementById("markerbtn").onclick = function (e) { alert("门店编号:" + e.target.dataset.sid); } } }

三、最终效果

百度地图 InfoWindow上添加点击事件_第2张图片

你可能感兴趣的:(前端)