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() ...
随机推荐
- 发几个速度快可以用的google IP,谷歌IP(转)
google搜索引擎打不开时的解决办法,谷歌(google)的IP是多少? google IP镜像. 这里搜集了几个经过测试可用的IP,用来在不能域名访问google的时候进行访问,实时更新! 前面几 ...
- LinQ to SQL 查询
LINQ to SQL 是将对象关系映射到.NET框架中的一种实现.它可以将关系数据库映射为.NET Framework中的一些类. 然后,开发人员就可以通过使用 LINQ to SQL对数据库中的数 ...
- High bridge, low bridge(离散化, 前缀和)
High bridge, low bridge Q:There are one high bridge and one low bridge across the river. The river h ...
- springMVC3学习(六)--SimpleFormController
SimpleFormController提交表单流程例如以下: login.jsp <form action="login" method="post"& ...
- sql注入数据库修复方法
1.第一种情况是 需要将指定的 注入字符串全部替换掉(仅替换注入的字符串为空) declare @delStr nvarchar(500) set @delStr='<script src=ht ...
- Guava源码分析——ServiceManager
ServiceManager类: 用于监控服务集的管理器,该类提供了诸如startAsync.stopAsync.servicesByState方法来运行.结束和检查服务集,而且,通过监听器 ...
- HDU 1085 Holding Bin-Laden Captive! (母函数)
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- POJ-1118(超时,但未找到原因)
#include<iostream> #include<map> #include<vector> using namespace std; //y=kx+z ty ...
- Ajax请求安全性讨论 - Eric.Chen(转)
Ajax请求安全性讨论 - Eric.Chen 时间 2013-07-23 20:44:00 博客园-原创精华区 原文 http://www.cnblogs.com/lc-chenlong/p/3 ...
- magic Ajax使用以及注意事项
以下是引用片段:一.概述 现在Ajax技术正如火如荼的在Internet上发展着.而面对我们之前开发的ASP.NET1.1的Web项目,类似于下拉框等联动也需要啪啪啪的不断刷新,的确影响到了用户 ...