高德地图Web端JavaScript API开发(二)---在地图上绘制(信息窗体)

使用地图避免不了在地图图标上进行点击，查看详情。下面就介绍一下信息窗体的使用。

首先，信息窗体包括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，再绑定单击事件。