使用地图避免不了在地图图标上进行点击,查看详情。下面就介绍一下信息窗体的使用。
首先,信息窗体包括InfoWindow和AdvancedInfoWindow两个类,InfoWindow可以实现默认信息窗体、自定义信息窗体,AdvancedInfoWindow是封装了周边搜索和三种路线规划的高级信息窗体。
接下来介绍一下常用的自定义信息窗体,简单粗暴,直接上代码;
marker = new AMap.Marker({
icon: icon,
position: [lng,lat],
offset: new AMap.Pixel(-16,-45),
title: data[i].number,
map: map
});
//内容
marker.content = '<div class="info-title">'+data[i].name+" "+data[i].number+" "+'</div><div class="info-content">'+
'可借:'+data[i].rentcount+'<br/>'+
'可还:'+(data[i].restorecount-data[i].rentcount)+'<br/>'+
'</div>'
marker.on('click', markerClick);
//图标点击事件
function markerClick(e) {
infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
先定义marker,然后设置content,再绑定单击事件。