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. 【转】Android源码学习(2)使用Git和Repo进行版本管理

    原文网址:http://blog.chinaunix.net/uid-26074270-id-2458828.html Android项目采用Git和Repo进行版本管理.在大多数情况下,Git都可以 ...

  2. phpWeb

    Ruby on Rails框架在REST走得很前,开发时默认都按照RESTful风格搭建. <RESTful Web Services>是本好书 SOAP

  3. 特殊权限:SUID,SGID,Sticky

    特殊权限passwd:s SUID: 运行某程序时,相应进程的属主是程序文件自身的属主,而不是启动者:    chmod u+s FILE    chmod u-s FILE        如果FIL ...

  4. python3-day1(文件操作)

    index: str.fomat() open file str.replace 一.新款str.fomat() 1.>>> '12'.zfill(5) '00012' 2.> ...

  5. TCP和UDP的区别(转)

    TCP协议与UDP协议的区别    首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP协议的区别,我觉得这是没有从本质上弄清楚网络通信! ...

  6. kafka与Spring的集成

    准备工作 kafka版本:kafka_2.10-0.10.1.0 spring版本:spring4.3 配置文件 pom文件配置(也可以直接下载jar包) Kafka和spring集成的支持类库,sp ...

  7. [ReactJS] DOM Event Listeners in a React Component

    React doesn't provide the listener to listen the DOM event. But we can do it in React life cycle: So ...

  8. Node.JS + MongoDB技术浅谈

    看到一个Node.JS + MongoDB的小样例,分享给大家.魔乐科技软件学院(www.mldnjava.cn)的讲座 Node.JS + MongoDB技术讲座          云计算 +大数据 ...

  9. [服务器运维][Minecraft服务器搭建]

    参考资料: http://neekey.net/2016/02/01/%E5%A6%82%E4%BD%95%E7%94%A8%E9%98%BF%E9%87%8C%E4%BA%91ecs%E6%90%A ...

  10. C#调用WebService实例和开发

    一.基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术.是 ...