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;
}
}
});
}
Google street、Google satellite 、百度地图Iframe切换桥接JS的更多相关文章
- [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码
MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...
- 解决百度地图Fragment切换黑屏问题
https://blog.csdn.net/rentalphang/article/details/52076330 轻松解决啦!
- 深入浅出百度地图API开发系列(1):前言
百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...
- [工具向]__申请,下载,使用百度地图api
前言 api即应用程序接口,在我们的日常开发中,我们不仅可以在开源代码仓库(,github,码云)中获得很大的帮助,在日常开发中占重要地位的另一个东西就是api,我们可以使用众多的第三方编写的优秀的a ...
- 微信小程序,天气预报(百度地图开放平台API)
小程序看似一种全新的东西,但好在基本上就是曾经HTML,CSS,JS的一个微变版本. 语法和之前一样.只是一些用法和名字(标签)发生了一些变化. 小程序主要就四种扩展名的文件:js,json,wxml ...
- 百度地图之自动提示--autoComplete
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 百度地图跟angular的结合
我现在做的一个项目是angular,但是我用直接引用百度地图的方法引进js,写html,js代码,发现,我去,报错了,我一开始还以为是百度地图跟angular有冲突,然后我就去搜索啊,发现angula ...
- 百度地图、高德地图、Google地图等坐标系相关梳理
1.地理坐标系与投影坐标系 地理坐标系也就是球面坐标系,是将本不是椭球体的地球进行椭球体化,从而形成球面坐标体系,国际标准的地理坐标系就是WGS-84坐标系: 只不过各个国家为了反映该国家所在区域地球 ...
- 如何获取google地图、baidu百度地图的坐标
google:打开google地图-->查找目的地-->右键:此位置居中-->地址栏键入javascript:void(prompt('',gApplication.getMap() ...
随机推荐
- ios相册
1, 系统图片剪裁的问题 http://www.cnblogs.com/liulunet/archive/2013/01/19/2866399.html
- 十分钟搭建自己的hadoop2/CDH4集群
版本及准备 我部署的是hadoop-2.0.0-cdh4.2.0.tar.gz,下载地址为http://archive.cloudera.com/cdh4/cdh/4/hadoop-2.0.0-cdh ...
- ListView之SimpleAdapter
SimpleAdapter是安卓内置的适配器,本文展示的是listview的子项为{图片,文件}组合 如下图所示: 具体代码: SimpleAdapter_test.java /* ListView ...
- Javascript 中的变量
var a; console.log("The value of a is " + a); // The value of a is undefined console.log(& ...
- The Frog's Games(二分)
The Frog's Games Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Others) ...
- 编码规范(CSS)
code { font-family: "PT Mono", Menlo, "Courier New", monospace; padding: 2px 4px ...
- 详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON() —(转)
一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该 ...
- Velocity知识点总结
Velocity知识点总结 1. 变量 (1)变量的定义: #set($name = "hello") 说明:velocity中变量是弱类型的. 当使用#set 指令时,括在双引號 ...
- 观察者模式与Boost.Signals
1) 观察者模式定义 略,各种设计模式的书上都有定义. 2) 观察者模式一般实现 观察者模式一般实现,都是“被观察者”保存一个“观察者”的列表,循环这个列表来通知“观察者”.代码,其中使用了b ...
- 面试前的准备---C#知识点回顾----03
经过一天的奔波,喜忧参半,不细表 再回看下标题,C#知识点回顾 再看下内容,数据库3NF 原谅我这个标题党 今天继续回忆 1.HTTP中Post和Get区别 这忒简单了吧,大家是不是感觉到兴奋了,长舒 ...