openlayer兩種方式實現點擊出現彈框顯示

有兩種方案，一種是利用overlay，採用pupup(經常用來彈框保留，地圖移動時，彈框不關閉，會自動計算位置，不會消失或出現位置混輪)

另一種是直接添加額外的div(這裏主要是針對鼠標移動信息彈框即消失的情況，不然每次移動就要重新重新計算彈框的新的位置)，首先計算當前當前的點擊點處的屏幕座標(通過getPixelFromCoordinate得到當前屏幕的像素座標）然後將新添加的div添加到當前屏幕上，併爲div添加樣式，在樣式中控制具體的內部樣式(注意要爲這個div設計定位爲絕對定位)

兩種方式各有利弊，具體如下所示

方案1：

var div = document.createElement('div');
var marker = new ol.Overlay({
				element : div,
				id : mkId,
				position : newPos,
				positioning : 'center-center'
			});
	map.addOverlay(marker);
$(div).popover({
			         'placement': 'top',
			          'animation': false,
			          'html': true,
			          'title':'<div id="tcontent" ><a>'+feature.get('name')+'</a></div>',
			          'content': getNationFltHTML(feature)
				        });
			 $(div).popover('show');

方案2：

				var html = '<div  class="ncp_poid" style=" height: auto; position: relative;">' + '<div>' + '<div class="hyltlt">' + '<table class="hy1tltbg"><tr><td></td><td></td><td></td></tr></table>'
					+ '<h3 class="ncp_poit">檢測結果</h3>' + '</div>' + '<div class="hylcon">' + '<table class="hylconbg1">' + '<tr class="hytr">' + '<td></td>' + '<td>' + '<div class="ncp_poic" >'
					+ str2 + '</div>' + '</td>' + '<td></td>' + '</tr>' + '</table>' + '<table class="hylconbg2">' + '<tr   class="hytr">' + '<td></td>' + '<td></td>' + '<td></td>' + '</tr>'
					+ '</table>' + '</div>' + '</div>'
			'</div>';
		
			var scrPt = map.getPixelFromCoordinate(pos);
			labelDiv = $("<div/>").addClass("ncp_poi").css({
				"top" : scrPt[1] + "px",
				"left" : scrPt[0] + 6 + 2 + "px"
			});
			labelDiv.html(html);
			map.getViewport().style.cursor = "pointer";
			$(".ncp_poi").remove();
			map.getViewport().appendChild(labelDiv[0]);