地圖縮放到指定經緯度

點擊【地圖查看】，彈出地圖，並縮放到當前案件的範圍

效果大致是這樣：

---

1. 先把彈窗的頁面元素寫出來

<!--彈出層時背景層DIV-->
<div id="fade" class="black_overlay"> </div>
<!-- 主體部分 -->
<div id="MyDiv" class="white_content">
	<div style="text-align: left; cursor: pointer; height: 40px; display:inline-block; float:left">
		<span style="font-size: 16px; font-weight:bold; line-height:40px;" id="dtval"></span>
	</div>
	<div style="float:right; text-align: right; cursor: pointer; height: 40px; display:inline-block">
		<button type="button" class="close" style="font-size: 30px;font-weight: bold; background: none;border: none;outline: none;position: relative;right:6px;top:4px " 
		onclick="CloseDiv('MyDiv','fade')" title="關閉詳情">×</button>
	</div>
	<iframe frameborder="0" id="iframepagemap" name="iframepage" scrolling="no" style="width: 100%;height: 100%;" src=""></iframe>
</div>

2. 綁定按鈕的點擊事件

<button  type="button"  class="btn btn-primary bottomBtn catMapBtn" onclick="ShowDiv('MyDiv','fade')">地圖查看</button>     
//兩個參數 分別是彈出主體和遮罩背景 的id

3. js文件中： 彈窗方法

var initmap = false;

//彈出隱藏層
function ShowDiv(show_div,bg_div){
	document.getElementById(show_div).style.display='block';
	document.getElementById(bg_div).style.display='block' ;
	var bgdiv = document.getElementById(bg_div);
	bgdiv.style.width = document.body.scrollWidth;
	// bgdiv.style.height = $(document).height();
	$("#"+bg_div).height($(document).height());
	var iframe = document.getElementById("iframepagemap");
	if(!initmap){
		$("#iframepagemap").attr("src","../map/map.jsp");
		var i = 0;
        var finishmap = setInterval(function () {
            if (iframe.contentWindow.map!=null){
            	map = iframe.contentWindow.map;
                initM= iframe.contentWindow.initM;
                OpenLayers = iframe.contentWindow.OpenLayers;
                LayerSwitcherExt = iframe.contentWindow.LayerSwitcherExt;
                clearInterval(finishmap);
                initmap = true;
                // 項目範圍ajax
            	LonatDetail(xmNameStr);
            }else{
                i++;
            }
        },100)
	}else{
		 // 項目範圍ajax
    	LonatDetail(xmNameStr);
	}
};

4. 獲取項目區域的ajax

function LonatDetail(xmNameStr){
	$.ajax({
		url:baseurl + "Program.action",   
		type:"POST",
		data:{
			method:"progremLonat", 
			paramts:xmNameStr,
		},
		dataType: "json",
		success: function(data){
			addPolygon(data[0]['LONLAT']);
		},
		error: function(msg){
			alert("ajax Error!");
		}
	})
}

// 從後臺拿到的data爲：
/*
0: {LONLAT: "[{"x":100.12341032715,"y":30.675432620386},{"x":12…96102,"y":55.555}]"}
*/

5. 地圖範圍的縮放與繪製面

// 彈出地圖縮放至
function addPolygon(data){
    data2 = eval("("+data+")");   //解析json字符串爲json對象	
    var paths = [];   // 存儲座標
    for (var a = 0; a < data2.length; a++) {
        var pf = new OpenLayers.Geometry.Point(
            data2[a]["x"],
            data2[a]["y"]);
        // 點的數組
        paths.push(pf);
    }
    var stylePolyline = {   //畫面的樣式
        strokeWidth : 2,
        strokeOpacity : 0.8,
        strokeColor : "blue",
        fillColor : "white",
        fillOpacity : 0.5
    };
    // 點組織成線
    var line = new OpenLayers.Geometry.LinearRing(paths);
    // 由線組織成面
    var polygon = new OpenLayers.Geometry.Polygon(line);
    var featureLine = new OpenLayers.Feature.Vector();
    featureLine.geometry = polygon;
    featureLine.style = stylePolyline;
    map.setLayerIndex(map.getLayer("drawLayer"), map.layers.length - 1);
    map.getLayer("drawLayer").removeAllFeatures();
    map.getLayer("drawLayer").addFeatures(featureLine);
    lonlat = featureLine.geometry.getBounds().getCenterLonLat();
    var zoom = map.getZoomForExtent(featureLine.geometry.getBounds()) - 1;
    if(zoom == 20){
        zoom = 19;
    }
    map.setCenter(lonlat,zoom);   //縮放到lonlat,  zoom是範圍大小 

};

6. 關閉彈窗的方法

//關閉彈出層
function CloseDiv(show_div,bg_div)
{
	document.getElementById(show_div).style.display='none';
	document.getElementById(bg_div).style.display='none';
};