`

在Google Earth Plugin里的balloon显示动态内容

阅读更多

之前在Google Earth Client 端用KML做数据展示, 其中每个元素点击之后都会弹出balloon, 每个ballon会通过javascript(Ajax)调用后台程序, 呈现动态内容.

 

<BalloonStyle>
				<text> <![CDATA[ 
					<html>
						<body id="body" style="margin:0; padding:0; width:400px; height:150px; overflow: hidden;">
							Loading....
							<script type="text/javascript">
								var refreshContent= function() {
									var httpRequest= new XMLHttpRequest();
									httpRequest.open( 'GET', '${address}/elementDetails!detailsOnMap.action?elementId=$[id]', true );
									httpRequest.onreadystatechange = function( ) {
										if( httpRequest.readyState == 4 ) {
											if( httpRequest.status >= 300 ) {
												document.getElementById( "body" ).innerHTML= 'Error ' + httpRequest.status; 
											}
											else {
												document.getElementById( "body" ).innerHTML= httpRequest.responseText; 
											}

										}
									};
									httpRequest.send();
								}
								refreshContent();
							</script>
						</body>
					</html> ]]> 
				</text>
			</BalloonStyle>

 这个BalloonStyle会被应用到指定的元素上, 点击该元素, 就会弹出action请求回来的内容.

 

 

后来需要在网页端也能集成显示.

各个元素显示都没有问题, 但是就是点击的时候, Balloon里出现的只有

Loading....

看了一下Google Earth Plugin API, 说是为了安全起见, 默认屏蔽了下面的内容:

 

 

  • JavaScript
  • CSS
  • <iframe> tags
  • <embed> tags
  • <object> tags

    为了兼容Google Earth Client端的成像, 所以决定不改KML的内容. 在网页端的程序做一些处理.
    //为所有的地图上的所有元素增加click事件
    google.earth.addEventListener(
    			ge.getGlobe(), 'click', function(event) {
    			var obj = event.getTarget();
    			//判断是否为KmlPlacemark
    			if (obj.getType() == 'KmlPlacemark' ){
    				//阻止默认事件处理
    				event.preventDefault();
    				var placemark = obj;
    				var placemark_name = placemark.getName();
    				//获取非安全的Balloon内容, 包括HTML和javascript脚本
    				var placemark_desc = placemark.getBalloonHtmlUnsafe();
    				//从原有placemark_desc中提取访问的URL	
    				var url = getURL(placemark_desc);
    				//create new balloon with rendered content
    				var balloon = ge.createHtmlStringBalloon('');
    				balloon.setFeature(placemark);
    				if(url){
    					//动态请求URL, 并将内容赋予balloon
    					setHTMLContent(balloon,url);
    				}else{
    					//如果原有balloon里没有URL, 则显示原来的内容
    					obj.setContentString(placemark_desc); 
    				}
    				
    				ge.setBalloon(balloon);
    		}});
       下面是里面用的的两个JS方法
    function getURL(content){
    		var durl=/(http:\/\/[^\']+)\'/i;  
    		url = content.match(durl); 
    		return url.length > 0 ? url[1] : ''; 
    	  }
    var setHTMLContent= function(obj, url) {
    									var httpRequest= new XMLHttpRequest();
    									httpRequest.open( 'GET', url, true );
    									httpRequest.onreadystatechange = function( ) {
    										if( httpRequest.readyState == 4 ) {
    											if( httpRequest.status >= 300 ) {
    												obj.setContentString('Error ' + httpRequest.status); 
    											}
    											else {
    												var content = '<div id="body" style="margin:0; padding:0; width:400px; overflow: hidden;">'+
    													httpRequest.responseText
    												+'</div>';
    												obj.setContentString(content); 
    											}
    											
    										}
    									};
    									httpRequest.send();
    								}
     
  •  

    现在在网页上点击placemark, 动态内容就可以显示出来了!

     

     

     

     

     

    分享到:
    评论

    相关推荐

      google earth plugin 7安装包

      google earth plugin 安装版,不是下载器。

      GoogleEarthPlugin非在线安装策略.rar

      Google Earth Plugin是一款由Google公司开发的插件,它允许用户在网页浏览器中查看和操作Google Earth的三维地球模型。然而,在线安装此插件可能消耗大量的时间和网络资源,特别是在网络环境不稳定或速度较慢的情况...

      GoogleEarth-Win-Plugin-7.1.5.1557.zip

      5. 在支持插件的网页中,通过特定的JavaScript API调用谷歌地球插件,展示3D地图内容。 在GIS开发中,谷歌地球插件发挥着至关重要的作用: 1. **交互式地图应用**:开发者可以创建具有深度交互性的地图应用,用户...

      Hello Earth Demo Using Google Earth Plugin

      2017年我刚入职现在的公司,需要搞三维地图,我把目光移到谷歌地球API上,然后这时才发现谷歌地球API在2015年底已经关闭了。不过凡事都可以折腾,恰好2017年3月份,谷歌开源了谷歌地球企业版。通过一系列排列组合,...

      Qt 调用 google Earth 代码

      本篇文章将详细介绍如何在Qt应用中调用Google Earth的插件(plugin),以实现集成Google Earth的功能。 首先,理解Qt调用外部插件的基本原理至关重要。Qt支持动态链接库(DLL)和插件架构,使得开发者能够扩展应用...

      如何用VC编程控制GoogleEarth

      主要分为两种API:Google Earth Plugin(已弃用)和Google Earth Enterprise(适用于内部网络)。在这里,我们关注的是使用VC与Google Earth Desktop应用程序的交互。 2. **ActiveX控件**: 要在VC中控制Google ...

      google earth jsapi.js

      《Google Earth API与GEPlugin在Web开发中的应用详解》 Google Earth API和GEPlugin是Google提供的一套强大的工具,用于将交互式的3D地球模型集成到Web应用程序中。这一技术的运用,使得开发者能够创建出丰富的地理...

      Google Earth B/S二次开发简单源码

      在IT行业中,Google Earth是一款广泛使用的虚拟地球仪应用程序,它提供了全球地理信息的三维视图。对于开发者来说,Google Earth的B/S(Browser/Server,浏览器/服务器)二次开发允许我们利用其强大的地理可视化功能...

      Google Earth API (Java版)——Com.Brant.ge

      KML文件被用来定义在Google Earth中显示的3D模型、图层、标记、路径等。Google Earth API允许开发者动态生成和解析KML,使应用具有实时更新的能力。 在Java版的Google Earth API中,主要涉及以下几个关键概念: 1....

      谷歌浏览器插件开发代码demo | google-chrome-plugin-demo.zip

      本压缩包"google-chrome-plugin-demo.zip"包含了一个完整的Chrome插件开发代码示例,名为"full-chrome-plugin-demo",非常适合初学者和开发者探索和学习如何构建自己的Chrome插件。 1. **Chrome插件结构**: ...

      Google Plugin for Eclipse 4.2

      Google Plugin for Eclipse 3.8/4.2则是在这两个Eclipse版本上运行的插件,它使得开发者能够无缝地在Eclipse环境中进行谷歌应用引擎(Google App Engine)项目的开发,同时支持Android应用程序的构建和调试。...

      浅谈GoogleEarth二次开发技术

      2. **插件开发**:Google Earth Web Plugin使得开发者能够在网页中嵌入Google Earth,用户无需安装完整的Google Earth客户端即可查看和操作地球仪。 3. **KML与KMZ文件**:这两种文件格式是Google Earth用于存储地理...

      Google Plugin for Eclipse 4.3

      安装Google Plugin for Eclipse 4.3通常通过Eclipse的内置软件更新功能完成,用户可以在Eclipse的"Help"菜单中选择"Install New Software",然后添加Google的更新站点进行安装。安装后,需要根据开发者的需求配置...

      google plugin for eclipse

      "Google Plugin for Eclipse" 是一款由Google开发的集成开发环境(IDE)插件,专为Eclipse设计,目的是为了方便开发者在Eclipse中进行Google相关的应用开发,如Android应用、Google App Engine应用等。这款插件提供了...

      GoogleEarthAPI开发者指南_目录版

      为了使使用Google Earth API开发的网站能够正常运行,用户需要在浏览器中安装Google Earth插件。插件支持的操作系统包括Microsoft Windows XP/Vista 和 MacOS。支持的浏览器包括: - Internet Explorer 6.0+ 和 7.0...

      GoogleEarthPlugin

      GoogleEarthPlugin

      com.googlecode 的 maven-db-plugin.jar 包

      `com.googlecode` 的 `maven-db-plugin.jar` 包是一个在 `googlecode` 平台上发布的 Maven 插件。这个插件主要用于与数据库相关的构建任务,例如自动化地创建、更新或者清理数据库。`Maven` 是一个广泛使用的项目...

      google.map.plugin插件下载

      谷歌地图插件(Google Map Plugin)是用于在网站或应用程序中集成谷歌地图功能的一个工具,它使得开发者能够轻松地在自己的平台中嵌入交互式地图、定位服务、路线规划等功能。"google.map.plugin.js" 文件很可能是这...

      Google Plugin for Eclipse 3.5 离线安装包 part2

      Google Plugin for Eclipse 3.5 离线安装包 part2 分享给需要的人 支持eclipse 3.5 myeclipse 8.X

    Global site tag (gtag.js) - Google Analytics