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