Conheça o Júlio Battisti

Julio Battisti - Autor de mais de 25 livros de informática Júlio Battisti tem mais de 50 livros publicados, centenas de e-books e é certificado Microsoft.

SAIBA MAIS...

Loja Virtual do Site

Curta Nossa Fanpage

FILTRO DE TUTORIAIS:

Virtual Earth – Primeiro Passo

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)

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>

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>

</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)

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)

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>

</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>

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>

</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

Júlio Battisti Livros e Cursosa sua sala de aula na internet

Conheça o Júlio Battisti

Loja Virtual do Site

Curta Nossa Fanpage

Loja Virtual

Virtual Earth – Primeiro Passo

Livros

Vídeo-Aulas

E-books

Cursos Online

Conteúdo Gratuito

Institucional