Latest web development tutorials

Google Map sobreposições

Adicionando um marcador no Google Maps


Google Maps - Sobreposições

Sobreposições são objetos ligados à latitude / longitude no mapa, arrastar ou ampliar o mapa irá mover com você.

API do Google Maps são os seguintes sobreposições:

  • Aponte utilizando marcadores no mapa para mostrar a frequência exibir um ícone personalizado. Marcadores são objetos tipo GMarker, e pode ser usado para personalizar os tipos de ícone de objetos GIcon.
  • Linhas no mapa usando polilinhas (que representam um conjunto de pontos) a ser exibido. linha GPolyline do tipo de objeto.
  • Áreas no mapa é apresentado como polígonos (se a área é uma forma arbitrária) ou cobertura inferior (se é uma área rectangular). Polígono semelhante a uma poligonal fechada, pode ser de qualquer forma. As sobreposições de solo são comumente usados ​​para mapear a área com azulejos, directa ou indirectamente associadas.
  • O próprio mapa é exibido usando uma sobreposição de blocos. Se você possui uma série de telhas, você pode usar a classe GTileLayerOverlay para mudar as telhas existentes no mapa, você pode até mesmo usar GMapType para criar seus próprios tipos de mapa.
  • janela de informação é também um tipo especial de sobreposição. Note, no entanto, a janela de informações será automaticamente adicionado ao mapa, eo mapa só pode adicionar um tipo de objeto GInfoWindow.

Google Maps - Adicione tag

Mapa identifica pontos no registro. Por padrão, eles usam G_DEFAULT_ICON (Você também pode especificar um ícone personalizado). construtor GMarker GLatLng e GMarkerOptions (opcional) objeto como um parâmetro.

Etiquetas projetadas para ser interativo. Por exemplo, por padrão, eles recebem ", clique em" eventos, muitas vezes usado para abrir a janela de informações nos ouvintes de evento.

Pelo método setMap () para adicionar marcadores no mapa:

Exemplos

var marker=new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);

tente »


Google Maps - marcador arrastável

O exemplo a seguir descreve como usar a propriedade de animação para arrastar o marcador:

Exemplos

marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});

marker.setMap(map);

tente »


Google Maps - ícone

Tag pode ser definida a partir do novo ícone é exibido no lugar do ícone padrão:

Exemplos

var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});

marker.setMap(map);

tente »


Google Maps - polilinha

GPolyline objeto pode criar uma sobreposição linear no mapa. GPolyline incluem uma série de pontos e cria uma série de linhas ordenadas de ligação esses pontos.

Polyline suporta os seguintes atributos:

  • path - especificar mais de uma linha de latitude / longitude coordenadas
  • strokeColor - especifica o valor de cor hexadecimal da linha (formato: "# FFFFFF")
  • strokeOpacity - Transparência linha designada (o valor 0,0 a 1,0)
  • strokeWeight - Define a largura da linha, em pixels.
  • editável - se o usuário pode editar a definição de uma linha reta (true / false)

Exemplos

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});

tente »


Google Maps - Polygon

objetos GPolygon são objetos GPolyline semelhantes porque eles incluem uma série de pontos ordenados. No entanto, os polígonos são dois pontos de extremidade, mas o desenho da área de circuito fechado é definido formação.

E a linha, você pode personalizar a cor ea transparência do polígono bordas (linhas) de cor, espessura e transparência, bem como o encerramento da área preenchida. As cores devem ser no estilo HTML numérico hexadecimal.

Polygon suporta os seguintes atributos:

  • caminho - especifica múltiplas coordenadas de latitude linear (primeiro e último coordenadas são iguais)
  • strokeColor - especifica o valor de cor hexadecimal da linha (formato: "# FFFFFF")
  • strokeOpacity - Transparência linha designada (o valor 0,0 a 1,0)
  • strokeWeight - Define a largura da linha, em pixels.
  • fillColor - valores de cor hexadecimais Área fechada (formato: "# FFFFFF")
  • fillOpacity - Transparência especificar a cor de preenchimento (que é 0,0 a 1,0)
  • editável - se o usuário pode editar a definição de uma linha reta (true / false)

Exemplos

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

tente »


Google Maps - Round

Rodada suporta os seguintes atributos:

  • centro - o ponto central do círculo os parâmetros especificados google.maps.LatLng
  • raio - especifica o raio do círculo, em metros
  • strokeColor - Especifica os valores de cor hexadecimal arco (formato: "# FFFFFF")
  • strokeOpacity - Transparência arco designado (o valor de 0,0 a 1,0)
  • strokeWeight - Define a largura da linha, em pixels.
  • fillColor - especifica o valor de cor hexadecimal do valor círculo de preenchimento (formato: "# FFFFFF")
  • fillOpacity - Transparência especificar a cor de preenchimento (que é 0,0 a 1,0)
  • Define se o usuário pode editar uma linha reta (true / false)

Exemplos

var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

tente »


Google Maps - janela Informações

Em uma tag para exibir uma janela de mensagem de texto:

Exemplos

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

infowindow.open(map,marker);

tente »


Google Maps - sobreposição Manual de Referência

Google Maps API Manual de Referência .