Hola Polifemo
Te ha gustado ¿eh?
Lástima que el manual de la Api de Google Earth sea tan escueto en cuanto a ejemplos de lo que se puede hacer.. Seguro que se pueden hacer muchísimas cosas mas. Creo que ya hemos comentado alguna vez sobre lo poco claro y "raro" que resulta ese manual, al menos para mi.
Por cierto, muy interesante también la página con el codigo jquery para redimensionar el div
Bueno, creo que algo he conseguido a base de eliminar el código sobrante de la página que indicabas y dejando solo el efecto de maximizar el contenedor de la imagen
Un saludo y muchas gracias por tu ayuda
Ahí va (quizá le sobre algo, pero así funciona)
| Code:: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--http://www.csun.edu/~centergs/API/Ballona_HE_Review.htm-->
<html>
<head>
<title>PRUEBA MAXIMIZAR PLUGIN</title>
<meta name="author" content="Eric Meyers_EricCMeyers@yahoo.com">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://www.google.com/jsapi?key=**KEY**"></script>
<script type="text/javascript">
function addSampleUIHtml(html) {
document.getElementById('sample-ui').innerHTML += html;
}
var ge;
var fullScreenState = false;
var noFullScreenIcon = null;
var fullScreenIcon = null;
existingChild = null;
google.load("earth", "1");
google.load("maps", "2");
function init() {
var content = document.getElementById('content');
google.earth.createInstance('content', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getOptions().setScaleLegendVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);
createFullScreenIcon();
createNormalScreenIcon();
google.earth.addEventListener(ge.getWindow(), "click", handleMouseClick);
var mugu1 = ge.createLookAt('');
/* VIEW OF EARTH */
mugu1.set(33.9423, -118.2653,
60000, /* ALT */
ge.ALTITUDE_RELATIVE_TO_GROUND,
0, /* HEAD */
0, /* TILT */
40000 /* RANGE */
);
ge.getOptions().setFlyToSpeed(0.5);
ge.getView().setAbstractView(mugu1);
}
function failureCallback(errorCode) {
}
function handleMouseClick(event){
var INSET_PIXELS_X = document.getElementById("content").offsetWidth - event.getClientX();
var INSET_PIXELS_Y = event.getClientY();
if (INSET_PIXELS_X < 32){
if (INSET_PIXELS_Y < 32){ toggleFullScreen();}
}
}
function toggleFullScreen(){
if (fullScreenState == true) {makeNormalScreen();}
else {makeFullScreen();}
}
function makeFullScreen(){
var samplecontainer = document.getElementById('fullscreencontainer');
var container = document.getElementById('content');
container.style.left = 0;
container.style.top = 0;
container.style.width = samplecontainer.offsetWidth + 'px';
container.style.height = samplecontainer.offsetHeight + 'px';
fullScreenState = true;
noFullScreenIcon.setVisibility(fullScreenState);
fullScreenIcon.setVisibility(!fullScreenState);
}
function makeNormalScreen(){
var samplecontainer = document.getElementById('sizecontainer');
var container = document.getElementById('content');
container.style.left = samplecontainer.style.left;
container.style.top = samplecontainer.style.top;
container.style.width = samplecontainer.offsetWidth + 'px';
container.style.height = samplecontainer.offsetHeight + 'px';
fullScreenState = false;
noFullScreenIcon.setVisibility(fullScreenState);
fullScreenIcon.setVisibility(!fullScreenState);
}
function createFullScreenIcon() {
/* create an image for the screen overlay */
var icon = ge.createIcon('');
icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png');
/* create the screen overlay */
fullScreenIcon = ge.createScreenOverlay('');
fullScreenIcon.setDrawOrder(60);
fullScreenIcon.setIcon(icon);
/* anchor point in top left of icon. */
fullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
fullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
fullScreenIcon.getScreenXY().setX(1);
fullScreenIcon.getScreenXY().setY(1);
/* place icon in top left of screen. */
fullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
fullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
fullScreenIcon.getOverlayXY().setX(2);
fullScreenIcon.getOverlayXY().setY(4);
/* Set icon size. */
fullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
fullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
fullScreenIcon.getSize().setY(32);
fullScreenIcon.getSize().setX(32);
/* add the screen overlay to Earth */
ge.getFeatures().appendChild(fullScreenIcon);
}
function createNormalScreenIcon() {
/* create an image for the screen overlay */
var icon = ge.createIcon('');
icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tonormal.png');
/* create the screen overlay */
noFullScreenIcon = ge.createScreenOverlay('');
noFullScreenIcon.setDrawOrder(62);
noFullScreenIcon.setIcon(icon);
/* anchor point in top left of icon. */
noFullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
noFullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
noFullScreenIcon.getScreenXY().setX(1);
noFullScreenIcon.getScreenXY().setY(1);
/* place icon in top right of screen. */
noFullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
noFullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
noFullScreenIcon.getOverlayXY().setX(2);
noFullScreenIcon.getOverlayXY().setY(4);
/* Set icon size. */
noFullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
noFullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
noFullScreenIcon.getSize().setY(32);
noFullScreenIcon.getSize().setX(32);
noFullScreenIcon.setVisibility(false);
/* add the screen overlay to Earth */
ge.getFeatures().appendChild(noFullScreenIcon);
}
function handleFullScreen(){
if (window.innerWidth == screen.width){
if (window.innerHeight > screen.height - 10){
/*this is likely caused by pressing F11 on the browser */
makeFullScreen();
}
else if (fullScreenState == true) { makeNormalScreen();}
}
else {makeNormalScreen();}
}
Google.setOnLoadCallback(init);
</script>
<style type="text/css">
.tool
{
Position:relative;
Left:350px;
}
.legend
{
Position:relative;
Left:30px;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000 onresize="handleFullScreen();">
<font color="#000000" size=+2 face="corbel"><b>Pulsando en el icono de la esquina superior derecha la imagen se maximiza</b></font>
<br>
<div class="tool">
<font color="#000000" size=-1><i>Click on the <img src="http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png"/> to toggle full browser mode or press F11 for full screen.</i></font>
</div>
<div style="clear: both;"></div>
<div id="fullscreencontainer" style="position: absolute; width: 98.5%; height: 98%;"></div>
<div id="sizecontainer" style="position: absolute; width: 748px; height: 500px;"></div>
<div id="content" style="position: absolute; border: 5px solid #585858; width: 748px; height: 500px;"></div>
</body>
</html> |
Ver más mensajes sobre ¿Como maximizar el div que contiene el plugin? en el foro
RSS - Ultimos Mensajes
Últimas Fotos del Foro
