Cefet TSI
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Cefet TSI

Fórum para juntar o pessoal do curso de Tecnologia de Sistemas para Internet


Trabalho do Google Maps

Cefet TSI :: Matérias - Primeiro Período :: Programação de Clientes Web

Ir para baixo

Trabalho do Google Maps Empty Trabalho do Google Maps

Mensagem por hugoaguiar31 Ter Jun 28, 2011 9:54 pm

Gente, segue trabalho meu e do Leandro do Google Maps pra compartilhar com a galera


Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
   <title>Brasilia</title>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <script type="text/javascript" src="analytics.js"></script>
   <link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body onload="load()">
  <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAMXosGrJ8SGB_GHepvuaDkRShpNLVkG3V44NsnlMnK_Dw9tphsRQUvSU7CV0WmTHdmymMesJbW4UCsw"></script>

  <script type="text/javascript">

    // Valor mais preciso da constante PI
    var PI = (Math.atan(1)*4);

   var map;
    var markerCentral;
    var marcadores = new Array();
    var maxPoints;

    // -15.77481,-47.939758 - Coordenadas de Brasilia (Lat,Long)
    var nomeCidade = "Brasília";
    var lat_centro = -15.77481;
    var long_centro = -47.939758;

    // Rio de Janeiro 22 54 S 43 14 W
    // var nomeCidade = "Rio de Janeiro";
    // var lat_centro = -22.94452;
    // var long_centro = -43.18233;


  var defaultIcon = new GIcon(G_DEFAULT_ICON);
  defaultIcon.image = "icon_p.gif";
  markerOptions = { icon:defaultIcon, draggable:true, bounceGravity:0.3  };

  var princIcon = new GIcon(G_DEFAULT_ICON);
  princIcon.image = "icon_p.png";
  markerOptions1 = { icon:princIcon , draggable:true };

  var atingIcon = new GIcon(G_DEFAULT_ICON);
  atingIcon.image = "icon_a.png";
  markerOptions2 = { icon:atingIcon , draggable:true };

  var altIcon = new GIcon(G_DEFAULT_ICON);
  altIcon.image = "icon_b.png";
  markerOptions3 = { icon:altIcon , draggable:true };

  var altIcon2 = new GIcon(G_DEFAULT_ICON);
  altIcon2.image = "icon_c.png";
  markerOptions4 = { icon:altIcon2, draggable:true  };

  $icon0 = "markerOptions";
  $icon1 = "markerOptions1";
  $icon2 = "markerOptions2";
  $icon3 = "markerOptions3";
  $icon3 = "markerOptions4";

    // Numero randomico entre A e B
    function getRandomNumber(a, b) {
      return a+Math.floor(Math.random()*(b+1-a));
    }

   function  markerText(marker, markerCentral){

       var texto =  "<font size=1>INFO<br/>";
      texto += "<b>Latitude: </b>"+marker.getLatLng().lat().toPrecision(6)+"<br />";
      texto += "<b>Longitude: </b>"+marker.getLatLng().lng().toPrecision(6)+"<br />";
      texto += "<b>Distancia: </b>"+getDistance3(markerCentral,marker).toPrecision(6)+" Km"+"<br />";
      texto +=  "<br /><br />";

      //<font size=1><b>LAT: </b>"+latNova+"<br /><b>LONG: </b>"+longNova+"<br /><b>Distancia: </b>+"+getDistance(lat_brasilia ,long_brasilia,latNova, longNova)+" "+"<br/> DIST: "+getDistance2(lat_brasilia ,long_brasilia,latNova, longNova)+"<br/> TESTE "+marker.getLatLng().distanceFrom(marker1.getLatLng())

      return texto;
   }


   function  markerCentralText(markerCentral , nome){
       var texto =  "<font size=1>INFO<br/>";
      texto += "<b>Nome: </b>"+nome+"<br />";
      texto += "<b>Latitude: </b>"+markerCentral.getLatLng().lat().toPrecision(6)+"<br />";
      texto += "<b>Longitude: </b>"+markerCentral.getLatLng().lng().toPrecision(6)+"<br />";
      texto +=  "<br /><br />";

      //<font size=1><b>LAT: </b>"+latNova+"<br /><b>LONG: </b>"+longNova+"<br /><b>Distancia: </b>+"+getDistance(lat_brasilia ,long_brasilia,latNova, longNova)+" "+"<br/> DIST: "+getDistance2(lat_brasilia ,long_brasilia,latNova, longNova)+"<br/> TESTE "+marker.getLatLng().distanceFrom(marker1.getLatLng())

      return texto;
   }




   function getMarker(lat_brasilia, long_brasilia, markerOptions, map , markerCentral) {
     var difLat = getRandomNumber(-100, 100)/500; // obtenho um numero entre -0.2 e 0.2
     var difLong = getRandomNumber(-100, 100)/500; // obtenho um numero entre -0.2 e 0.2
     var latNova =  lat_brasilia +  difLat;
     var longNova =  long_brasilia + difLong ;

     var marker =  new GMarker(new GLatLng(latNova,longNova), markerOptions);

     map.addOverlay(marker);

     GEvent.addListener(marker,"click", function marco() { marker.openInfoWindowTabsHtml( markerText(marker,markerCentral) ,{maxWidth:430} )});
     GEvent.addListener(marker,"drag",  function update(){ writeStats(); } );

     return marker;
   }

        // Formula pela lei dos dos cossenos em coodenadas esféricas
      function getDistance(lat1,lon1,lat2,lon2){
            var R = 6378.137; // raio da terra em km
            var distance = (Math.acos(Math.sin(toRad(lat1))*Math.sin(toRad(lat2)) +
         Math.cos(toRad(lat1))*Math.cos(toRad(lat2)) * Math.cos(toRad(lon2-lon1)))) * R;
            //return distance.toPrecision(5) +" km" ;
         return distance;
      }
     // Funcao que utiliza a propia api do google (em metros)
     function getDistance2(lat1,lon1,lat2,lon2){
         var pos1 = new GLatLng(lat1,lon1);
        var pos2 = new GLatLng(lat2,lon2);
        return pos1.distanceFrom(pos2);
     }


     // Funcao que utiliza getDistance e tem como parametros dois objetos GMarker
     function getDistance3(marker1, marker2){
         var latlong1 = marker1.getLatLng();
        var latlong2 = marker2.getLatLng();
        return getDistance(latlong1.lat(),latlong1.lng(),latlong2.lat(),latlong2.lng()) ;
     }



      // função para converter graus para radianos
      function toRad(degrees) {
        var arco = 180;
        var rad = (degrees/arco)*PI;
        return rad;
      }

  function load() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl()); // Coloca os botões com as opções tipo de mapa. Se hibrido e tal
    map.setCenter(new GLatLng(lat_centro,long_centro), 10);
        markerCentral  = new GMarker(new GLatLng(lat_centro,long_centro), markerOptions);
      map.addOverlay(markerCentral);
      GEvent.addListener(markerCentral,"click",function marco(){markerCentral.openInfoWindowTabsHtml( markerCentralText(markerCentral, nomeCidade ) ,{maxWidth:430});});
      GEvent.addListener(markerCentral,"drag",  function update(){ writeStats(); } );

      maxPoints = prompt("Número de pontos ",10);

      var i = 0;
      var optName = "";
      var mkoption;
      for (i=0;i<maxPoints;i++) {

        optName = "markerOptions"+getRandomNumber(1,4);
        mkoption = eval(optName);
        marcadores[i] = getMarker(lat_centro,long_centro, mkoption , map, markerCentral);
      }

      writeStats();

      }

   }

   // Calcula media de distancia dos pontos
   function getMedia(){
    var media = 0;
    var soma = 0;

   for (i=0;i<maxPoints;i++) {
      soma +=  getDistance3(markerCentral,marcadores[i]);
   }
   media = (soma / maxPoints);
   return media;
   }

   // Calcula o desvio Padrao (Fonte wikipedia)
   function getDesvioPadrao(){
    var media = getMedia();
    var soma = 0;
    var desvioPadrao = 0;

   for (i=0;i<maxPoints;i++) {
      soma +=  Math.pow(media-getDistance3(markerCentral,marcadores[i]),2);
   }
   desvioPadrao = Math.sqrt(soma/(maxPoints-1));
   return desvioPadrao;
   }



    // Escreve a media, o desvio padrao e a tabela contendo os Pontos e as Distancias
   function writeStats(){
     var i=0;
     var text = "<font size=2>";
      text += "Media = "+getMedia().toPrecision(6)+" Km<br/>";
     text += "Desvio Padrao = "+getDesvioPadrao().toPrecision(6)+"<br/>";

     text += "<br/>";

     text += "<table border=1>"
     text += "<tr><td>Ponto</td><td>Distancia (Km)</td></tr>"
     var latLong;
        for (i=0;i<maxPoints;i++) {
          latLong  = marcadores[i].getLatLng();
          text += "<tr><td>";
          text +=  " P"+(i+1)+ "={ ("+latLong.lat().toPrecision(6)+","+latLong.lng().toPrecision(6)+")} ";
          text += "</td><td>"
          text += getDistance3(markerCentral,marcadores[i]).toPrecision(6);
          text += "</td></tr>";
       }

     text += "</table>"

     text += "</font><br/>"


     writetext(text);
   }

    function writetext(texto){
      var elemento = document.getElementById("texto");
      elemento.innerHTML = texto;
    }

</script>

<table>
<tr><td>
<div id="map" style="width: 500px; height: 400px"></div>
</td>
<td>  &nbsp;</td>
<td align=center>
<span id="texto" ></span>
</td>
</tr>
</table>

<br/>
<form>


</form>
</body>
</html>

hugoaguiar31

Mensagens : 4
Data de inscrição : 19/05/2011

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Cefet TSI :: Matérias - Primeiro Período :: Programação de Clientes Web

 
Permissões neste sub-fórum
Não podes responder a tópicos