NUNCA MAIS PASSE RAIVA POR NÃO CONSEGUIR RESOLVER UM PROBLEMA COM O EXCEL - GARANTIDO!

UNIVERSIDADE DO VBA - Domine o VBA no Excel Criando Sistemas Completos - Passo a Passo - CLIQUE AQUI

Você está em: PrincipalArtigosProgweb : Virtualearth001
Quer receber novidades e e-books gratuitos?

 

Virtual Earth – Primeiro Passo

 

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>

<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

 

Untitled Document
ASP BÁSICO
1 Cálculo de Frete Internacional com ASP e Access
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 1
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 2
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 3
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 4
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 5
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 6
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 7
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 8
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 9
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 10
1 ASP 3.0 utilizando 3 camadas - Parte 1
1 ASP 3.0 utilizando 3 camadas - Parte 2
1 ASP 3.0 utilizando 3 camadas - Parte 3
COLDFUSION
1 Criando um formulário em Flash usando o ColdFusion MX 7
FLASH - ACTIONSCRIPT
1 Movimentar objeto – Parte 01
1 Movimentar objeto – Parte 02
1 Jogo – Acerte o Alvo
1 Como Movimentar um Objeto utilizando Botões
1 Exibir frases Aleatórias
1 Ações Básicas do ActionScript
1 Criando Botões com MovieClip no Flash
1 Criando Links em Botões Flash
1 Integrando Flash com Fireworks na Criação de Botões
1 Interpolação Motion (Movimento)
1 Interpolação Shape (Forma)
1 Principais Eventos do Mouse (Flash/ActionScript)
1 Criando Máscaras no Flash (Mask) Parte 1
1 Criando Máscaras no Flash (Mask) Parte 2
1 Galeria de Fotos Carregando Arquivos Externos (Flash e ActionScript)
PHP BÁSICO
1 Introdução ao PHP
1 Lógica em PHP
1 Trabalhando com Formulários HTML
1 Utilizando Arquivos – Criando um Scrap Book
1 Banco de Dados em Arquivos Texto
1 PHP - Sistema de busca de preços - Parte 1
1 PHP - Sistema de busca de preços - Parte 2
1 PHP - Sistema de busca de preços - Parte 3
1 PHP - Sistema de busca de preços - Parte 4
1 PHP - Sistema de busca de preços - Parte Final
1 Primeiros Scripts
1 Guardando dados em memória
1 Um pouco mais sobre variáveis
1 Manipulando variáveis
1 Estruturas de controle - Parte 1
1 Estruturas de controle - Parte 2
1 Estruturas de controle - Parte 3
1 Estruturas de controle - Parte 4
1 Estruturas de controle - Parte 5
1 Criação de Funções no PHP
1 Funções – Um pouco mais Sobre Parâmetros - Parte 1
1 Funções – Um pouco mais Sobre Parâmetros - Parte 2
1 Funções – Alguns Truques
1 Funções – Últimos Truques
1 Arrays – Noções Básicas
1 Arrays – Um pouco Mais Sobre Criação de Arrays
PHP COM BANCO DE DADOS
1 Criando um Sistema Ficha Cadastral Clientes - Parte 1
1 Criando um Sistema Ficha Cadastral Clientes - Parte 2
1 Criando um Sistema Ficha Cadastral Clientes - Parte Final
1 Controle Horarios Funcionários - Parte 1
1 Controle Horarios Funcionários - Parte 2
1 Controle Horarios Funcionários - Parte 3
1 Controle Horarios Funcionários - Parte 4
1 Controle Horarios Funcionários - Parte 5
1 Controle Horarios Funcionários - Parte 6
1 Controle Horarios Funcionários - Parte 7
1 Controle Horarios Funcionários - Parte 8
1 Controle Horarios Funcionários - Parte 9
1 Controle Horarios Funcionários - Parte 10
1 Controle Horarios Funcionários - Parte 11
1 Controle Horarios Funcionários - Parte 12
1 Controle Horarios Funcionários - Parte 13 - Conclusão
1 Instalando o PHP no Windows XP
1 Instalando o MySQL no Windows XP
1 Sistema Controle Extintores -Parte 1
1 Sistema Controle Extintores -Parte 2
1 Sistema Controle Extintores -Parte 3
1 Sistema Controle Extintores -Parte 4
1 Sistema Controle Extintores -Parte 5
1 Sistema Controle Extintores -Parte - Conclusão
1 PHP - Controle dos Correios - Parte 1
1 PHP - Controle dos Correios - Parte 2
1 PHP - Controle dos Correios - Parte 3
1 PHP - Controle dos Correios - Parte 4
1 PHP - Controle dos Correios - Parte 5
1 PHP - Controle dos Correios - Parte 6
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 1
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 2
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 3
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 4
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 5
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 6
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 7
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 8
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 9
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 10
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 11
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 12
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 13
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 14
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 15
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 16
JAVASCRIPT BÁSICO
1 JavaScript Básico - Lição 1
1 JavaScript Básico - Lição 2
1 JavaScript Básico - Lição 3
1 JavaScript Básico - Lição 4
1 JavaScript Básico - Lição 5
1 JavaScript Básico - Lição 6
1 JavaScript Básico - Lição 7
1 JavaScript Básico - Lição 8 - Instruções If e Else
1 JavaScript Básico - Lição 9 - Tópicos Diversos
1 JavaScript Básico - Lição 10 - Objetos Math e Date
1 JavaScript Básico - Lição 11 - Trabalhando com o objeto Browser
1 JavaScript - Criando Seus Próprios Objetos
1 JavaScript - Virtual Earth – Primeiro Passo
1 JavaScript - Virtual Earth – Segundo Passo
Quer receber novidades e e-books gratuitos?

 
 

Contato: Telefone: (51) 3717-3796 | E-mail: webmaster@juliobattisti.com.br | Whatsapp: (51) 99627-3434

Júlio Battisti Livros e Cursos Ltda | CNPJ: 08.916.484/0001-25 | Rua Vereador Ivo Cláudio Weigel, 537 - Universitário, Santa Cruz do Sul/RS, CEP: 96816-208

Todos os direitos reservados, Júlio Battisti 2001-2025 ®

LIVRO: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2016 - CURSO COMPLETO E PRÁTICO

DOMINE A PROGRAMAÇÃO VBA NO EXCEL - 878 PÁGINAS - CLIQUE AQUI