信息窗口
-----純文本信息窗口
為了更方便的提示用戶,在地圖的指定的地方添加文本信息的窗口,給用戶直觀展示信息,下面是如何添加一個純文本的信息窗口。
下面是添加一個文本窗口:
/*
* 添加純文本信息窗口
*/
function addTextInfoWindow(map) { var opts = { width : 200, // 信息窗口寬度 height : 60, // 信息窗口高度 title : "西安美林電子有限責任公司", // 信息窗口標題 enableMessage : true,//設置允許信息窗發送短息 message : "歡迎來到西安美林電子有限責任公司就職..." // 信息內容 } var infoWindow = new BMap.InfoWindow("地址:科技二路西安軟件園漢韻閣C座501", opts); // 創建信息窗口對象 map.openInfoWindow(infoWindow, map.getCenter()); //開啟信息窗口 }
-----復雜信息窗口
信息窗口不斷能夠展示純文本的,還可以展示圖片等復雜的信息,這樣需要我們有一定的html基礎,下面介紹如何添加一個復雜文本信息窗口。
/*
* 添加復雜信息窗口
*/
function addComplexInfoWindow(map) { // 拼接html字符串 var sContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>漢韻閣</h4>" + "<img style='float:right;margin:4px' id='imgDemo' src='image/hyg.jpg' width='139' height='104' title='漢韻閣'/>" + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>漢韻閣坐落於西安軟件園...</p>" + "</div>"; var marker = new BMap.Marker(map.getCenter()); var infoWindow = new BMap.InfoWindow(sContent); //創建信息窗口對象 map.addOverlay(marker); marker.addEventListener("click", function() { // 調用了marker對象的openInfoWindow方法 this.openInfoWindow(infoWindow); }); }