• 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;
                }
            }
        });
    }
  • 相关阅读:
    Javascript对象中关于setTimeout和setInterval的this介绍
    javascript中setInterval中第一个参数加引号与不加引号的区别
    如何使用定时器settimeout、setInterval执行能传递参数的函数(转)
    如何在html5的canvas画布中绘制gif动态图片
    如何学好C++语言
    MongoDB 数据迁移和同步
    Google论文之三----MapReduce
    手写LinkedList实现(基于双链表)
    手写LinkedList实现(基于单链表)
    手写ArrayList集合框架
  • 原文地址:https://www.cnblogs.com/boonya/p/3293333.html
Copyright © 2020-2023  润新知