Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Prikaži plast vreme na Google zemljevidu

  V prejšnji lekciji smo na spletno stran dodali Google zemljevide, torkrat pa bomo dodali še plast z vremenom in ga naredili bolj zanimivega.
 
 
1
 
 

Za začetek spremenimo, da se bo zemljevid prikazal čez cel zaslon (lahko  si tudi sami izmislite mere - po želji) .

<style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
</style>


 
 
2
 
 

Potem dodamo še JavaScript del kode, ki poskrbi da se Google zemljevid pojavi na željenem mestu.
Ker želimo, da se na zemljevidu vidi celotno ozemlje Slovenije, vpišemo koordinate (LatLng) geometričnega središča Slovenije, ki se nahaja v Vačah pri Litiji.

var mapOptions = {
    zoom: 9,
    center: new google.maps.LatLng(46.119944, 14.815333),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

 
 
3
 
 

Plasti so predmeti, ki so sestavljeni iz več elementov prikazanih na zemljevidu in z njimi manipuliramo.


Za dodajanje plasti na zemljevid moramo klicati setMap(), kateri prikaže elemente na zemljevidu.

V tej lekciji bomo dodali plast vreme (WeatherLayer) ter oblačnost (CloudLayer). Vremenske podatke dobimo iz spletne strani weather.com

Na sliki je prikazan pričakovan končni izgled.
 
 
4
 
 

Prva plast katero bomo dodali se imenuje weatherLayer() objekt. V tej plasti moramo definrati enoti in sicertemperatureUnits in windSpeedUnits.

var weatherLayer = new google.maps.weather.WeatherLayer({
    temperatureUnits: google.maps.weather.TemperatureUnit.
CELSIUS
});

Opcije temperaturne enote:
CELSIUS
FAHRENHEIT

 
 
 
 
 
5
 
 

Znotraj WeatherLayer definiramo še windSpeedUnits. To naredimo tako da za temperaturnim postavimo vejico (,) in vpišemo:

var weatherLayer = new google.maps.weather.WeatherLayer({
    temperatureUnits: google.maps.weather.TemperatureUnit.
CELSIUS,
windSpeedUnits: google.maps.weather.WindSpeedUnit.METERS_PER_SECOND
});


Opcije enote za hitrost vetra:
KILOMETERS_PER_HOUR
METERS_PER_SECOND
MILES_PER_HOUR
 
 
6
 
 

Na koncu spremenljivki weatherLayer dodamo setMap(), da se vse skupaj lahko izvede na zemljevidu map.

weatherLayer.setMap(map);

 
 
7
 
 

Podobno potem naredimo še za CloudLayer()objekt, vendat kot nova spremenljivka var cloudLayer.

var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);

V cloudLayer primeru ni potrebno definirati nobenih enot.

 
 
8
 
 
 
 
Komentiraj
 
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!