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. Struts2源代码解读之Action调用

    对于Struts2源代码的分析已经有些时日了,虽然网上有很多解读代码,不过自己还是写一个放上来,供大家参考一下. 解读过程: 直接在action类中打断点(包括构造函数和待执行方法)进行debug调试 ...

  2. SQL Interview Question

    面试的时候发现会问一些SQL的基本问题,在此总结一下. ProgramInterview/SQL 这个网站上的问题还比较全. 1. Join type INNER JOIN: Returns all ...

  3. 【POJ1003】Hangover(二分搜索)

    直接用库函数二分即可. #include <iostream> #include <cstring> #include <cstdlib> #include < ...

  4. Unity 脚本函数生命周期

    Awake(),一般我们在这里做一些组件的获得,比如使用getcomponent方法. Start(),我们可以在这里给变量赋值. FixUpdate(),固定更新,因为这里得更新速度为固定(可以在T ...

  5. hdu 1429 胜利大逃亡(续)(bfs+状态压缩)

    Problem Description Ignatius再次被魔王抓走了(搞不懂他咋这么讨魔王喜欢)…… 这次魔王汲取了上次的教训,把Ignatius关在一个n*m的地牢里,并在地牢的某些地方安装了带 ...

  6. JSTL解析——003——core标签库02

    上一节主要讲解了<c:if/><c:choose/><c:when/><c:otherwise><c:out/>标签的使用,下面继续讲解其它 ...

  7. simplify the life ECMAScript 5(ES5)中bind方法简介

    一直以来对和this有关的东西模糊不清,譬如call.apply等等.这次看到一个和bind有关的笔试题,故记此文以备忘. bind和call以及apply一样,都是可以改变上下文的this指向的.不 ...

  8. BOM 窗体相关属性以及页面可见区域的获取方式

    1 在IE Safari Oper Chrome 都提供了screenLeft和screenTop属性: screenLeft : 相对于屏幕左边的距离 screenTop : 相对于屏幕上边的距离 ...

  9. 在IIS Express中调试时无法读取配置文件

    在IIS Express中调试代码时,如果出现“无法读取配置文件”的问题(如图),这种情况是IIS Express的“applicationhost.config”配置文件中的映射关系出了问题[ps: ...

  10. Android--------解决ScrollView中嵌套ExpandableListView显示不全的问题

    ##***Scrollview和ExpandableListView嵌套显示不全*** - 当我们将ExpandableListView嵌套在Scrollview之中时,我们必须要确保我们的不居中Ex ...