1. 程式人生 > >高德地圖Web端JavaScript API開發(二)---在地圖上繪製(資訊窗體)

高德地圖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,再繫結單擊事件。