Livros publicados do autor.
Olá pessoal, meu nome é Maurício Júnior e estou disposto a mostrar como adicionar botões para navegar no mapa do Virtual Earth. No primeiro passo, mostrei como adicionar o mapa junto de sua página ou portal da internet. Foi bem simples e fácil.
Para quem não viu e quer começar do primeiro passo, acesse o link abaixo falando e siga os passos.
Link: http://www.aspneti.com/visualizar/downloadArtigo.aspx?ch_artigos=306
O objetivo agora é adicionar botões que caminha para direita, caminha para esquerda, subir e descer. Todos estes botões são essenciais para a navegação dentro do mapa. Existe ainda o botão aerial cujo mostra o mapa em forma aérea com grande verde e azul do mar. (Referência 2.1)
Lembre-se que o exemplo neste passo dois, é continuação da parte um, portanto entendo que já foi feito a versão anterior. Segue todo código da primeira parte. Referência 2.2.
|
<html>
<head>
<title>My Virtual Earth</title>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
.pin
{
width:44px;height:17px;
font-family:Arial,sans-serif;
font-weight:bold;font-size:8pt;
color:White;overflow:hidden;
cursor:pointer;text-decoration:none;
text-align:center;background:#0000FF;
border:1px solid #FF0000;
z-index:5}
-->
</STYLE>
<link href="http://dev.virtualearth.net/standard/v2/MapControl.css" type="text/css" rel="stylesheet" />
<!--script src="http://local.live.com/MapControl.ashx"></script-->
<script src="http://dev.virtualearth.net/standard/v2/MapControl.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var map = null;
function UpdateInfo(e)
{
document.getElementById("info").innerHTML =
'Latitude = ' +
e.view.latlong.latitude +
', Longitude = '
+ e.view.latlong.longitude +
', Zoom=' +
e.view.zoomLevel;
}
function MouseClick(e)
{
map.RemovePushpin('pin');
map.AddPushpin('pin',
e.view.latlong.latitude,
e.view.latlong.longitude,
88,
34,
'pin',
'MyPin',
1);
}
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();
map.AttachEvent("onendcontinuouspan",
UpdateInfo);
map.AttachEvent("onendzoom",
UpdateInfo) ;
map.AttachEvent("onclick",
MouseClick);
}
</script>
</head>
<body onload="OnPageLoad();">
<div id="info" style="HEIGHT: 50px; font-size:10pt"></div>
<div id="myMap" style="WIDTH: 600px; HEIGHT: 400px; OVERFLOW:hidden"></div>
</body>
</html>
|
Referência: 2.2
O que falta é, acrescentar as functions em javascript e os botões para a navegação. O primeiro botão será o de SUBIR o mapa ou a localização dentro do mapa. Primeiro o HTML. (Referência 2.3)
|
<input type="button" value="Subir" onclick="DoPanUp()" ID="PanUpButton" NAME="PanUpButton">
|
Referência: 2.3
Note que atributo onclick possui uma function em javascript chamada DoPanUp(). É bem simples esta function. (Referência 2.4)
|
function DoPanUp()
{
map.ContinuousPan(0, -10, 20);
}
|
Referência: 2.4
Peguei a variável map e chamei uma function ContinuousPan passando os parâmetros necessários para caminhar no mapa. Para correr no mapa, é sempre utilizada esta function. Você deve pensar que agora ficou simples e realmente ficou.
O segundo botão é para descer no mapa. (Referência 2.5)
|
<input type="button" value="Descer" onclick="DoPanDown()" ID="PanDownButton" NAME="PanDownButton">
|
Referência: 2.5
Existe outra function dentro do atributo onclick chamado DoPanDown(). (Referência 2.6)
|
function DoPanDown()
{
map.ContinuousPan(0, 10, 20);
}
|
Referência: 2.6
Em vez de andar -10 eu ando 10 cujo faz descer a navegação dentro do mapa. Continuando com os botões, colocarei o botão que anda para a esquerda. (Referência 2.7)
|
<input type="button" value="Esquerda" onclick="DoPanLeft()" ID="PanLeftButton" NAME="PanLeftButton">
|
Referência: 2.7
A function criada agora dentro do javascript é DoPanLeft() que anda para a esquerda todo o mapa da página. (Referência 2.8)
|
function DoPanLeft()
{
map.ContinuousPan(-10, 0, 20);
}
|
Referência: 2.8
Note que agora alterei o valor do primeiro parâmetro, deixei zerado o segundo e continuei com 20 o terceiro parâmetro. Dessa forma o caminho é alterado para a esquerda. O próximo botão é ir para direita.
|
<input type="button" value="Direita" onclick="DoPanRight()"ID="PanRightButton" NAME="PanRightButton">
|
Referência: 2.9
Criei uma outra function chamada DoPanRight() cujo tem o trabalho de movimentar todo mapa para a direita. Lógico que poderia ter apenas uma function passando os valores necessários, porém para que entendesse com mais precisão, achei melhor criar uma function para cada botão que chama outra function passando valores diferentes. (Referência 2.10)
|
function DoPanRight()
{
map.ContinuousPan(10, 0, 20);
}
|
Referência: 2.10
No primeiro parâmetro, em vez de colocar o valor negativo, coloquei positivo para que ande para direita. Foi mantido os outros valores em relação a function 2.8.
Bom, criei os botões para navegação do mapa. Vejamos como ficou com figuras ilustradas. (Referência 2.11)
Ao clicar no botão SUBIR, automaticamente toda área de visualização subiu sem qualquer problema indo para COLOMBIA e VENEZUELA. (Referência 2.12)
Cliquei no botão DIREITA e ao mesmo tempo foi tudo movido para a direção de SENEGAL do outro lado do mar. (Referência 2.13)
Clicando no botão ESQUERDO, volto para a antiga posição. (Referência 2.14)
Note que no canto esquerdo e topo do mapa, existe uma área de navegação onde possui dois links: road e aerial que mostram o mapa de duas formas diferentes. A forma que é mostrada junto à referência 2.14 é chamada de aerial. Cliquei no link chamado road e ao mesmo tempo o mapa foi alterado com outra perspectiva. (Referência 2.15)
Eu fico por aqui com mais um artigo, qualquer dúvida favor entrar em contato através do e-mail mauricio@aspneti.com. Espero que tenha gostado.
Mauricio Junior
www.mauriciojunior.org
www.aspneti.com