Como desenhar uma linha poligonal tendo um conjunto de locais em série no Google Maps V3

Escrito por veronica summers | Traduzido por davy de lima
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

O Google Maps API V3 lhe dá controle sobre os dados de entrada e cria mapas do Google personalizados. Se você tem uma lista ou um conjunto de coordenadas de latitude e longitude, é possível especificar que o Google use o conjunto para criar uma rota ou uma linha poligonal em um mapa. Por exemplo, você poderia criar uma linha seguindo os contornos de uma montanha em uma pista de caminhada ou uma rota marítima em torno de uma série de ilhas.

Nível de dificuldade:
Desafiante

Outras pessoas estão lendo

Instruções

    Instruções

  1. 1

    Abra o arquivo HTML e vá até a seção onde você define o seu Google Map.

  2. 2

    Sob o código onde inicializa o mapa, defina as características do polígono. Por exemplo, digite:

    var polylineOptions = { strokeColor: '#000000', strokeWeight: 3

    Nesse exemplo, a cor da linha é definida como a cor hexadecimal preta e o peso da linha é três.

  3. 3

    Inicialize a linha poligonal. Por exemplo, digite:

    polylineExample = new google.maps.Polyline(polylineOptions); polylineExample.setMap(map);

    Nesse exemplo, estamos adicionando o polígono para o mapa com as características definidas na variável "polylineOptions".

  4. 4

    Crie o conjunto de locais clicando sobre os pontos do mapa. Por exemplo, digite:

    google.maps.event.addListener(map, 'click', addLatLng); }

    Nesse exemplo, o Google escuta para que o usuário clique no mapa, e armazena esse valor em "addLatLng".

  5. 5

    Crie o polígono utilizando a função addlatLng. Por exemplo, digite:

    function addlatLng (event) { var route = polyline.getpath ( ); route.push (event.latLng);

    Continuando o exemplo, "getpath" retorna ao conjunto de valores atribuídos à variável "route" e empurra as novas coordenadas geográficas para o conjunto.

  6. 6

    Adicione um marcador de posição para cada ponto geográfico ao longo da linha poligonal. Por exemplo, digite:

    var locMarker = new google.maps.locMarker({ position: event.latLng, title: '#' + route.getLength(), map: map }); }

    Nesse exemplo, o Google Maps traça os locais na rota ou na linha poligonal usando os dados no conjunto "route".

  7. 7

    Guarde o seu código e teste-o. O Google Maps exibe uma linha em seu mapa. Para cada local, o Google Maps coloca um marcador. A linha poligonal no mapa será semelhante a uma imagem de ligar os pontos.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível