2014-01-27 86 views
1

我該如何改變google地球上的地標氣球的風格?不是kml數據,是氣球本身。例如,我想繞邊界。我做了一個例子,但總是查看我放置的樣式的空白邊框。CSS Ballon google earth

Javascript代碼:

var ge=null; 
var html="<div class='ews_infobox'> Prueba </div>"; 
var inicio={"latitud": 43.3667, "longitud": -5.8333,"zoom": 5000.0}; 


function initCB(pluginInstance) { 
ge = pluginInstance; 
ge.getWindow().setVisibility(true); 
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW); 

    //Crea un placemark. 
    var placemark = ge.createPlacemark(''); 

    //Define icono. 
    var icon = ge.createIcon(''); 
    icon.setHref('images/home2.png'); 

    // Placemark en Oviedo. 
    var point = ge.createPoint(''); 
    point.setLatitude(43.3667); 
    point.setLongitude(-5.8333); 
    placemark.setGeometry(point); 

    // Add the placemark to Earth. 
    ge.getFeatures().appendChild(placemark); 

    //Crea la vista (LookAct). 
    ge.getOptions().setFlyToSpeed(.2); 
    var lookAt = ge.createLookAt(''); 

    // Pone las posiciones. 
    lookAt.setLatitude(inicio.latitud); 
    lookAt.setLongitude(inicio.longitud); 
    lookAt.setRange(inicio.zoom); 

    // Actualiza vista de google Earth. 
    ge.getView().setAbstractView(lookAt); 


    eventoMarca(placemark); 
} 

function eventoMarca(placemark){ 


google.earth.addEventListener(placemark, 'click', function(event) { 


    var balloon = ge.createHtmlDivBalloon(''); 
     balloon.setFeature(placemark); 
     var div = document.createElement('DIV'); 
     div.innerHTML = html; 
     balloon.setContentDiv(div); 
     ge.setBalloon(balloon); 

    }); 

} 

風格的CSS:

.ews_infobox 
{ 
padding:15px; 
color:#000; 
background:#f3961c; 
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c)); 
background:-moz-linear-gradient(#f9d835, #f3961c); 
background:-o-linear-gradient(#f9d835, #f3961c); 
background:linear-gradient(#f9d835, #f3961c); 
-webkit-border-radius:10px; 
-moz-border-radius:10px; 
border-radius:10px; 
width: 80px; 
height: 40px; 

} 

而氣球是:ballon

+0

你可以創建一個你到目前爲止擁有的JSFiddle嗎? –

+0

是的,[link](http://jsfiddle.net/sandritascs/7mrBU/4/) – sandrita

+0

是否需要使用Google地球?這需要一個瀏覽器插件,在Linux上完全不受支持。對於大多數用途(idk yours),Google Maps API可能是更好的選擇,並且易於自定義。 –

回答

0

AFAIK有沒有辦法在所有做到這一點。您只能更改內容的樣式,而不能更改氣球本身。

這是因爲'氣球框架'實際上不是DOM的一部分 - 它由插件本地呈現。

+0

感謝所有^^ – sandrita