Livros publicados do autor:

 

 

 

 

         OlĂĄ pessoal, o objetivo deste artigo Ă© mostrar como utilizar o “Virtual Earth”, Terra Virtual. Para quem ainda nĂŁo sabe muito bem o que Ă© este componente, irei dizer: - É um componente onde pode ser visto o mapa do planeta Terra online direto de sua pĂĄgina ou portal na internet. Pode ser localizado um paĂ­s, cidade e rua com uma visĂŁo surpreendente; isso tudo direto do seu site, pode ser um serviço disponibilizado ao usuĂĄrio do seu site / portal.

 

         Mostrarei como utilizar este componente criado pela Microsoft passo a passo e assim alcançar o meu objetivo. A versĂŁo que utilizarei Ă© a 2.0 do Virtual Earth Map Control. O mapa Ă© usado no Virtual Earth, Ă© um controle JScript ou JavaScript e uma progressiva folha estilo sheet (css).

        

Ao final, sua pĂĄgina ficarĂĄ como da figura referĂȘncia 1.1.

 

ReferĂȘncia: 1.1 – Terra Virtual

        

AlĂ©m do mapa, sua pĂĄgina ficarĂĄ com alguns controles (botĂ”es) para subir, descer, ir para direita, ir para esquerda, aproxima e distanciar. Estes nomes podem ser colocados de acordo com o gosto; tanto inglĂȘs como portuguĂȘs.

 

                                                                             

Usando o Map Control (Controle de mapa)

 

 

         O Virtual Earth Map Control Ă© um script .js que pode ser encontrado no link http://dev.virtualearth.net/standard/v2/MapControl.js. O link mostrado pode ser usado diretamente do site, isso assegura o seu site sempre atualizado, caso haja qualquer outro tipo de atualização da versĂŁo do controle. O mesmo pode ser baixado e utilizado diretamente do seu site, portanto nĂŁo poderĂĄ ser atualizado sempre, ou entĂŁo, vocĂȘ terĂĄ que baixar todos os dias e atualiza-lo em seu site. Considero que o melhor mesmo seja utilizar diretamente do link indicado.

 

         O outro link do estilo sheet pode ser encontrado utilizando o endereço http://dev.vitualearth.net/standard/v2/MapControl.css.

 

 

Criando um Controle de Mapa (Map Control)

 

         Para criar uma nova instancia de um Virtual Earth Map Control precisarei escrever uma simples função em JScript da minha pĂĄgina. Posicionar dentro da pĂĄgina e montar um conteĂșdo inicial do controle. O construtor controle do mapa pode ser descrito da seguinte forma: (ReferĂȘncia 1.2)

 

 

Msn.VE.MapControl._constructor(map, params);

 

ReferĂȘncia: 1.2

 

map: Objeto para a criação do mapa.

params: O objeto contém parùmetros requeridos para iniciar o mapa.

 

O parĂąmetro dos objetos contĂ©m os seguintes membros: (ReferĂȘncia 1.3)

 

 

Latitude

Especificar a latitude de um ponto centro do mapa.

Longitude

Especificar a longitude de um ponto centro do mapa.

ZoomLevel

Especificar o inicio do zoom de um mapa.

MapStyle

Especificar o estilo do mapa. Seta um valor usando o MapStyle enumaration.

ShowScaleBar

Determinar qual a escala do mapa Ă© mostrado. Retorna Boolean.

ShowDashBoard

Determinar se o controles do mapa (navegação e controle de zoom) serão mostrados no mapa. Retorna Boolean.

DashBoardSize

Especificar um tamanho relativo para o painel (dashboard). Atribuir um valor usando um dos “dashboardsize” enumeration.

DashBoardX

Especificar a posição x do canto esquerdo do controle dashboard, objeto relativo do canto esquerdo do mapa.

DashBoardY

Especificar a posição y do canto esquerdo do controle dashboard, objeto relativo do canto esquerdo do mapa.

ReferĂȘncia: 1.3

 

 

         Um valor “Boolean” Ă© especificado no meio do controle mapa que suporte o obliqueEnabled da imagem, ou seja, que tenha suporte suficiente para mostrar a imagem grĂĄfica. Se o valor atribuĂ­do for true, vocĂȘ tambĂ©m deverĂĄ especificar o parĂąmetro obliqueUrl. Especificar a URL da uma imagem da pĂĄgina.

 

 

PĂĄgina simples usando o Virtual Map Control

 

 

<html>

<head>

<title>Virtual Earth</title>

<link href="http://dev.virtualearth.net/standard/v2/MapControl.css" type="text/css" rel="stylesheet" />

<script src="http://dev.virtualearth.net/standard/v2/MapControl.js" type="text/javascript"></script>

 

<script language="javascript" type="text/javascript">

var map = null;

 

function OnPageLoad()

{

    var params = new Object();

 

    params.latitude = -7.541648553787295;

    params.longitude= -52.20703125;

    params.zoomlevel = 4;

    params.mapstyle = Msn.VE.MapStyle.Road;

    params.showScaleBar = true;

    params.showDashboard = true;

    params.dashboardSize = Msn.VE.DashboardSize.Normal;

    params.dashboardX = 5;

    params.dashboardY = 5;

   

    map = new Msn.VE.MapControl(

        document.getElementById("myMap"),

        params);

 

    map.Init();

}

</script>

<body onload="OnPageLoad();">

    <div id="myMap" style="WIDTH: 600px; HEIGHT: 400px; OVERFLOW:hidden"></div>

</body>

</html>

 

ReferĂȘncia: 1.4

 

Resultado (ReferĂȘncia 1.5)

 

ReferĂȘncia: 1.5

Explicação:

 

         O primeiro de tudo criei uma pĂĄgina normal em html utilizando javascript. Coloquei o tĂ­tulo da pĂĄgina. (ReferĂȘncia 1.6)

 

 

<title>Virtual Earth</title>

 

ReferĂȘncia: 1.6

 

         Logo apĂłs, adicionei os dois arquivos necessĂĄrios para o perfeito funcionamento do Virtual Earth. Coloquei os dois endereços do site indicado anteriormente para os arquivos .js e .css. (ReferĂȘncia 1.7)

 

 

<link href="http://dev.virtualearth.net/standard/v2/MapControl.css" type="text/css" rel="stylesheet" />

<script src="http://dev.virtualearth.net/standard/v2/MapControl.js" type="text/javascript"></script>

 

ReferĂȘncia: 1.7

 

 

         AtĂ© o momento foi simples e fĂĄcil o desenvolvimento, portanto, devo criar uma função que ao iniciar a pĂĄgina, a mesma seja executada. Essa função deve ser em JScript. Coloquei o nome de OnPageLoad(). (ReferĂȘncia 1.8)

 

 

 

<script language="javascript" type="text/javascript">

var map = null;

 

function OnPageLoad()

{

    var params = new Object();

    params.latitude = -7.541648553787295;

    params.longitude= -52.20703125;

    params.zoomlevel = 4;

    params.mapstyle = Msn.VE.MapStyle.Road;

    params.showScaleBar = true;

    params.showDashboard = true;

    params.dashboardSize = Msn.VE.DashboardSize.Normal;

    params.dashboardX = 5;

    params.dashboardY = 5;

    

    map = new Msn.VE.MapControl(

        document.getElementById("myMap"),

        params);

 

    map.Init();

}

</script>

ReferĂȘncia: 1.8

 

Explicação:

 

         É importante dizer que, a primeira linha Ă© obrigatĂłria, ou seja, para indicar que iniciou um script; <script>... O passo seguinte foi adicionar uma variĂĄvel map com o comando. (ReferĂȘncia 1.9)

 

 

 

var map = null;

 

ReferĂȘncia: 1.9

 

 

         Usarei a variĂĄvel (referĂȘncia 1.9) para ser utilizada mais abaixo juntamente com o componente. A function serĂĄ chamada automaticamente ao iniciar a pĂĄgina. Precisei criar uma outra variĂĄvel do tipo Object() chamada params, onde indico os parĂąmetros necessĂĄrios antes de usar o MapControl. A referĂȘncia 1.10 mostra a function perfeitamente atĂ© o momento falado.

 

 

 

function OnPageLoad()

{

    var params = new Object();

 

    params.latitude = -7.541648553787295;

    params.longitude= -52.20703125;

    params.zoomlevel = 4;

    params.mapstyle = Msn.VE.MapStyle.Road;

    params.showScaleBar = true;

    params.showDashboard = true;

    params.dashboardSize = Msn.VE.DashboardSize.Normal;

    params.dashboardX = 5;

    params.dashboardY = 5;

...

ReferĂȘncia: 1.10

 

         Os parĂąmetros de latitude, longitude, zoomlevel e outros sĂŁo necessĂĄrios para que funcione perfeitamente. Atribui alguns valores cujo indica o caminho do Brasil, ou seja, ao iniciar a tela, automaticamente serĂĄ mostrado a regiĂŁo do Brasil na AmĂ©rica Latina. Caso tenha dĂșvida em algum parĂąmetro, a referĂȘncia 1.3 cujo foi falado e explicado cada um deles.

 

 

    params.latitude = -7.541648553787295;

    params.longitude= -52.20703125;

 

ReferĂȘncia: 1.11

 

Os nĂșmeros (referĂȘncia 1.11) indicam a localização diretamente do Brasil. Continuando com o script, preciso chamar o componente passando os seguintes dados: minha div e os parĂąmetros atribuĂ­dos. Em seguida, iniciar a aplicação. (ReferĂȘncia 1.12)

 

 

 

 

 

    map = new Msn.VE.MapControl(

        document.getElementById("myMap"),

        params);

 

    map.Init();

 

ReferĂȘncia: 1.12

 

         Para nĂŁo ter problemas com versĂŁo do browser a ser utilizado, coloquei a minha div assim: “document.getElementById(“myMap”)”. Essa myMap Ă© o nome ou id da div da pĂĄgina. Logo apĂłs coloquei a variĂĄvel “params” criada anteriormente. Tudo isso, igualei a variĂĄvel map. O mĂ©todo que chamei Ă© o “Msn.VE.MapControl”. Na linha seguinte foi iniciar o mesmo com o comando “map.Init()”.

 

 

 

}

</script>

<body onload="OnPageLoad();">

    <div id="myMap" style="WIDTH: 600px; HEIGHT: 400px; OVERFLOW:hidden"></div>

</body>

</html>

 

ReferĂȘncia: 1.13

 

         Fechei o script com a tag “ } ”, fechei a tag “</script>” e iniciei automaticamente o meu corpo html. Note que no atributo “onload” utilizei o mesmo nome da função criada anteriormente. Adicionei o “div” com o id igual a “myMap”, o mesmo nome indicado dentro da function. Depois fechei o corpo e o html.

 

         Bom, nesse primeiro passo eu termino aqui, segue todo cĂłdigo explicado para melhor entendimento. (ReferĂȘncia 1.14)

 

 

<html>

<head>

<title>Virtual Earth</title>

<link href="http://dev.virtualearth.net/standard/v2/MapControl.css" type="text/css" rel="stylesheet" />

<script src="http://dev.virtualearth.net/standard/v2/MapControl.js" type="text/javascript"></script>

 

<script language="javascript" type="text/javascript">

var map = null;

 

function OnPageLoad()

{

    var params = new Object();

 

    //params.latitude = 51.567;

    //params.longitude = -0.026;

    params.latitude = -7.541648553787295;

    params.longitude= -52.20703125;

    params.zoomlevel = 4;

    params.mapstyle = Msn.VE.MapStyle.Road;

    params.showScaleBar = true;

    params.showDashboard = true;

    params.dashboardSize = Msn.VE.DashboardSize.Normal;

    params.dashboardX = 5;

    params.dashboardY = 5;

   

    map = new Msn.VE.MapControl(

        document.getElementById("myMap"),

        params);

 

    map.Init();

}

</script>

<body onload="OnPageLoad();">

    <div id="myMap" style="WIDTH: 600px; HEIGHT: 400px; OVERFLOW:hidden"></div>

</body>

</html>

 

ReferĂȘncia: 1.14

 

Espero ter ajudado. Qualquer dĂșvida, favor entrar em contato atravĂ©s de o e-mail a seguir. Fiquem de olho no segundo passo.

 

 

Mauricio Junior

mauriciojunior@mauriciojunior.org

www.aspneti.com

www.mauriciojunior.org