Google street、Google satellite 、百度地图Iframe切换桥接JS

1、地图切换方法

注意:父页面访问Iframe页面JS方法需根据Iframe的名字来调用如:named "mapIfame" 即 mapIfame.window.iframeFunction();子页面访问父页面parent.parentFunction();iframeFunction(),parentFunction()都是各自页面的方法。

/* *
 * IFrame地图与外部操作桥接
 * @author BOONYACHENGDU@GMAIL.COM
 */
(function() {
    
    window.MapIframe = {};
    
    MapIframe = {
        CONSTANT : {
            /* 支持地图的集合 */
            MAPNAMEARRAY : [ "baidu", "googlestreet", "googlesatellite" ],
            /* IFrame的名字,id与name最好保持一致 */
            IFRAMENAME : "mapIframe",
            /* 当前地图显示的地图类型 */
            CURRENT_MAP_NAME : "baidu",
            LAST_MAP_NAME : "baidu",
            LAST_MAP_CENTER_LAT:39.915,
            LAST_MAP_CENTER_LNG:116.404, 
            LAST_MAP_ZOOM:12,
            CURRENT_MAP_ZOOM:12,
            CENTER_POINT:null,
            PARSE_TYPE:2,
            HAS_TRACK_OBJECT:false
        },
        /**
         * IFrame内部访问父亲页面的DOM元素
         */
        getParentElement : function(tagId) {
            return parent.document.getElementById(tagId);
        },
        /**
         * 访问IFrame内部页面的DOM元素
         */
        getIframeElement : function(iframeName,tagId) {
            return iframeName.window.document.getElementById(tagId);
        },
        /**
         * 统一地图显示缩放和地图中心位置
         */
        parseMapCenter:function(){
            if( MapIframe.CONSTANT.LAST_MAP_NAME== MapIframe.CONSTANT.CURRENT_MAP_NAME) return ;
            var latlngs= MapIframe.CONSTANT.LAST_MAP_CENTER_LAT+","+ MapIframe.CONSTANT.LAST_MAP_CENTER_LNG;
            //地图切换后数据加载处理
            if( MapIframe.CONSTANT.LAST_MAP_NAME=="baidu"&& MapIframe.CONSTANT.CURRENT_MAP_NAME=="googlestreet"){
                 parseLatLng(4,latlngs);
            }else if( MapIframe.CONSTANT.LAST_MAP_NAME=="baidu"&& MapIframe.CONSTANT.CURRENT_MAP_NAME=="googlesatellite"){
                 parseLatLng(3,latlngs);
            }else if( MapIframe.CONSTANT.LAST_MAP_NAME=="googlesatellite"&& MapIframe.CONSTANT.CURRENT_MAP_NAME=="googlestreet"){
                 parseLatLng(2,latlngs);
            }else if( MapIframe.CONSTANT.LAST_MAP_NAME=="googlesatellite"&& MapIframe.CONSTANT.CURRENT_MAP_NAME=="baidu"){
                 parseLatLng(1,latlngs);
            }else if( MapIframe.CONSTANT.LAST_MAP_NAME=="googlestreet"&& MapIframe.CONSTANT.CURRENT_MAP_NAME=="baidu"){
                 parseLatLng(6,latlngs);
            }else if( MapIframe.CONSTANT.LAST_MAP_NAME=="googlestreet"&& MapIframe.CONSTANT.CURRENT_MAP_NAME=="googlesatellite"){
                 parseLatLng(5,latlngs);
            }
        },
        /**
         * IFrame切换地图入口
         */
        changeMap : function(mapName) {
            this.CONSTANT.CURRENT_MAP =mapName;
            this.CONSTANT.CURRENT_MAP_ZOOM=mapIframe.window.map.getZoom();
            this.CONSTANT.CENTER_POINT=mapIframe.window.map.getCenter();
            if(this.CONSTANT.LAST_MAP_NAME=="baidu"){
                this.CONSTANT.LAST_MAP_CENTER_LAT=this.CONSTANT.CENTER_POINT.lat;
                this.CONSTANT.LAST_MAP_CENTER_LNG=this.CONSTANT.CENTER_POINT.lng;
            }else{
                this.CONSTANT.LAST_MAP_CENTER_LAT=this.CONSTANT.CENTER_POINT.lat();
                this.CONSTANT.LAST_MAP_CENTER_LNG=this.CONSTANT.CENTER_POINT.lng();
            }
            var l=window.location;
            var baseurl = l.protocol + "//" +l.host+"/LBS";
            var url=baseurl+"/locate/map/"+mapName;
            var frame=this.CONSTANT.IFRAMENAME;
            this.parseMapCenter();
            $("#"+frame).attr("src",url);
        }
    };
    
})($);

2、地图切换时地图中心点对应解析

/**
 * 解析地图中心点经纬度
 */
function parseLatLng(type,latlngs){
    type=getConvetType();
    $.ajax({
        url : PROJECT_URL + "/service/"+type+"/" + latlngs+"?maptype="+mapIframe.window.MAP_NAME,
        dataType : 'json',
        type : 'GET',
        async : true,
        success : function(data) {
            var result = eval(data);
            if (result){
                MapIframe.CONSTANT.LAST_MAP_CENTER_LAT=result[0].lat;
                MapIframe.CONSTANT.LAST_MAP_CENTER_LNG=result[0].lng;
            }
        }
    });
}
原文地址:https://www.cnblogs.com/boonya/p/3293333.html