之前在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 安装版,不是下载器。
2017年我刚入职现在的公司,需要搞三维地图,我把目光移到谷歌地球API上,然后这时才发现谷歌地球API在2015年底已经关闭了。不过凡事都可以折腾,恰好2017年3月份,谷歌开源了谷歌地球企业版。通过一系列排列组合,...
谷歌地球浏览器插件最新版,离线安装包,非下载器,GIS开发利器,找了很久才找到的资源。谷歌地球浏览器插件最新版,离线安装包,非下载器,GIS开发利器,找了很久才找到的资源
Qt 调用 Google earth plugin com组件的代码,可成功 加载google 地球
在线安装GoogleEarthPlugin非常的耗时,如果你已经有安装好的机器,那么可以直接复制过来了,或者自己再做个安装包
Google Earth PRO6.1.0.5001中文破解版,完美破解!下载后解压可以直接使用!
Google Plugin for Eclipse 4.3版本
google plugin for eclipse 4.3,不容易下载下来。
GoogleEarthPlugin
Google Plugin for Eclipse 3.8/4.2 (Juno)
Google Plugin for Eclipse 3.5 离线安装包 part2 分享给需要的人 支持eclipse 3.5 myeclipse 8.X
RotatePad 是 GEFS-Online ( ) 的非官方扩展,GEFS-Online 是基于 Google Earth Plugin 的免费飞行模拟器。 尽管 GEFS 提供了一些使用操纵杆的功能,但不幸的是它已损坏并且在大多数浏览器中不起作用。 此扩展允许 ...
谷歌浏览器插件开发代码demo ,各种功能的代码示例demo
Google Plugin for Eclipse 3.5 离线安装包 part3 分享给需要的人 支持eclipse 3.5 myeclipse 8.5 myeclipse 8.6
PBHelper plugin说明 一.功能 1.当前行高亮显示 2.单击关键词部分,自动查询并以黄底色显示...8.提供全局查找功能,在所有源代码中(包括 datawindow 对象)查找需要的内容,双击可以定位. 9.窗口tab设置,方便切换窗口。
google plugin for eclipse 4.3 最新离线安装包,由于google被墙,无法在线安装 gwt 等google插件通过此离线安装包克服此困难。可惜没找到luna的离线安装包
google-plugin1
离线安装google plugin for eclipse,由于eclipse自带的market不给力,那就选择离线安装。 下载后,打开eclipse,选择 install new software,Add,Location中定位到下载的zip文件,然后选择需要安装的组件,Next,...
maven plugin maven plugin scm 项目管理 构建工具 antmaven plugin maven plugin scm 项目管理 构建工具 ant
GoogleEarthPluginSetup GE