Google Earth Pluginのballoonで動的なコンテンツを表示
4028 ワード
以前はGoogle Earth Client側でKMLでデータ展示を行い、各要素がクリックするとballoonがポップアップし、各ballonはjavascript(Ajax)を通じてバックグラウンドプログラムを呼び出し、動的な内容を提示する.
このBalloonStyleは指定された要素に適用され、その要素をクリックするとactionが要求した内容がポップアップする.
その後、ウェブページ側でも統合表示が必要となる.
各要素の表示は問題ありませんが、クリックするとBalloonに出てくるのは
Loading....
Google Earth Plugin APIを見てみると、セキュリティのため、以下の内容がデフォルトで遮断されているという.
JavaScript
CSS
今、ホームページでplacemarkをクリックすると、ダイナミックな内容が表示されます!
<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);
}});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をクリックすると、ダイナミックな内容が表示されます!