弹出地图并缩放到指定经纬度


点击【地图查看】,弹出地图,并缩放到当前某一xx的范围

效果大致是这样(图没了):


  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>
  1. 绑定按钮的点击事件
<button  type="button"  class="btn btn-primary bottomBtn catMapBtn" onclick="ShowDiv('MyDiv','fade')">地图查看</button>     
//两个参数 分别是弹出主体和遮罩背景 的id
  1. 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);
    }
};

  1. 获取项目区域的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}]"}
*/

  1. 地图范围的缩放与绘制面
// 弹出地图缩放至
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是范围大小 

};


  1. 关闭弹窗的方法
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
    document.getElementById(show_div).style.display='none';
    document.getElementById(bg_div).style.display='none';
};

文章作者: 剑胆琴心
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 剑胆琴心 !
评论
 上一篇
linux系统备份 linux系统备份
系统备份怎么备份常见的备份工具0.Ghost 1. DIsks (ubuntu系统查找: disks, 缺点:过程中不能压缩空间,原来多少现在备份文件就是多少)备份: 选择硬盘右上角“create disk image”,
2019-12-29
下一篇 
ol2实现地图聚合功能 ol2实现地图聚合功能
折腾了好久,终于把地图聚合给做出来了,这还得感谢杨姐姐最终的指点(不对,是帮助了很多)。下面我就直接贴代码了。 代码的主目录是这样的:( cluster.html <!DOCTYPE html> <html> <hea
2019-05-09
  目录