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;
}
}
});
}

Google street、Google satellite 、百度地图Iframe切换桥接JS的更多相关文章

  1. [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  2. 解决百度地图Fragment切换黑屏问题

    https://blog.csdn.net/rentalphang/article/details/52076330 轻松解决啦!

  3. 深入浅出百度地图API开发系列(1):前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  4. [工具向]__申请,下载,使用百度地图api

    前言 api即应用程序接口,在我们的日常开发中,我们不仅可以在开源代码仓库(,github,码云)中获得很大的帮助,在日常开发中占重要地位的另一个东西就是api,我们可以使用众多的第三方编写的优秀的a ...

  5. 微信小程序,天气预报(百度地图开放平台API)

    小程序看似一种全新的东西,但好在基本上就是曾经HTML,CSS,JS的一个微变版本. 语法和之前一样.只是一些用法和名字(标签)发生了一些变化. 小程序主要就四种扩展名的文件:js,json,wxml ...

  6. 百度地图之自动提示--autoComplete

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 百度地图跟angular的结合

    我现在做的一个项目是angular,但是我用直接引用百度地图的方法引进js,写html,js代码,发现,我去,报错了,我一开始还以为是百度地图跟angular有冲突,然后我就去搜索啊,发现angula ...

  8. 百度地图、高德地图、Google地图等坐标系相关梳理

    1.地理坐标系与投影坐标系 地理坐标系也就是球面坐标系,是将本不是椭球体的地球进行椭球体化,从而形成球面坐标体系,国际标准的地理坐标系就是WGS-84坐标系: 只不过各个国家为了反映该国家所在区域地球 ...

  9. 如何获取google地图、baidu百度地图的坐标

    google:打开google地图-->查找目的地-->右键:此位置居中-->地址栏键入javascript:void(prompt('',gApplication.getMap() ...

随机推荐

  1. 发几个速度快可以用的google IP,谷歌IP(转)

    google搜索引擎打不开时的解决办法,谷歌(google)的IP是多少? google IP镜像. 这里搜集了几个经过测试可用的IP,用来在不能域名访问google的时候进行访问,实时更新! 前面几 ...

  2. LinQ to SQL 查询

    LINQ to SQL 是将对象关系映射到.NET框架中的一种实现.它可以将关系数据库映射为.NET Framework中的一些类. 然后,开发人员就可以通过使用 LINQ to SQL对数据库中的数 ...

  3. High bridge, low bridge(离散化, 前缀和)

    High bridge, low bridge Q:There are one high bridge and one low bridge across the river. The river h ...

  4. springMVC3学习(六)--SimpleFormController

    SimpleFormController提交表单流程例如以下: login.jsp <form action="login" method="post"& ...

  5. sql注入数据库修复方法

    1.第一种情况是 需要将指定的 注入字符串全部替换掉(仅替换注入的字符串为空) declare @delStr nvarchar(500) set @delStr='<script src=ht ...

  6. Guava源码分析——ServiceManager

    ServiceManager类:      用于监控服务集的管理器,该类提供了诸如startAsync.stopAsync.servicesByState方法来运行.结束和检查服务集,而且,通过监听器 ...

  7. HDU 1085 Holding Bin-Laden Captive! (母函数)

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  8. POJ-1118(超时,但未找到原因)

    #include<iostream> #include<map> #include<vector> using namespace std; //y=kx+z ty ...

  9. Ajax请求安全性讨论 - Eric.Chen(转)

    Ajax请求安全性讨论 - Eric.Chen 时间 2013-07-23 20:44:00  博客园-原创精华区 原文  http://www.cnblogs.com/lc-chenlong/p/3 ...

  10. magic Ajax使用以及注意事项

    以下是引用片段:一.概述    现在Ajax技术正如火如荼的在Internet上发展着.而面对我们之前开发的ASP.NET1.1的Web项目,类似于下拉框等联动也需要啪啪啪的不断刷新,的确影响到了用户 ...