高德地圖Web端JavaScript API開發(二)---在地圖上繪製(資訊窗體)
阿新 • • 發佈:2019-01-23
使用地圖避免不了在地圖圖示上進行點選,檢視詳情。下面就介紹一下資訊窗體的使用。
首先,資訊窗體包括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,再繫結單擊事件。