Google Maps - Sobreposição
Uma sobreposição é um objeto ligado a uma coordenada de longitude/latitude no mapa e se moverá à medida que você arrasta ou amplia o mapa.
A API do Google Maps tem as seguintes sobreposições:
1. Os pontos no mapa são exibidos usando marcadores e os ícones personalizados geralmente são exibidos. Uma tag é um objeto do tipo Gmarker e o ícone pode ser personalizado usando um objeto do tipo gicon.
2. As linhas no mapa são exibidas usando polilinas (representando uma coleção de pontos). Uma linha é um objeto do tipo gpolyline.
3. A área no mapa é exibida como um polígono (se for uma forma arbitrária) ou uma sobreposição da superfície inferior (se for uma área retangular). Um polígono é semelhante a uma poliina fechada, por isso pode ser qualquer forma. As sobreposições no solo são geralmente usadas no mapa que possuem associações diretas ou indiretas com ladrilhos.
4. O próprio mapa é exibido usando sobreposições de ladrilhos. Se você tiver sua própria série de ladrilhos, pode usar a classe GtileLayerOverlay para alterar os ladrilhos que você já possui no mapa ou até mesmo usar o GMAPTYPE para criar seu próprio tipo de mapa.
5. A janela de informações também é uma camada de sobreposição especial. No entanto, observe que a janela de informações é adicionada automaticamente ao mapa e o mapa pode adicionar apenas um objeto do tipo ginfowindow.
Google Maps - Adicionar tags
Marque os pontos no mapa. Por padrão, eles usam g_default_icon (você também pode especificar ícones personalizados). O construtor Gmarker toma objetos Glatlng e GmarkerOptions (opcional) como parâmetros.
Os marcadores são projetados para serem interativos. Por exemplo, por padrão, eles recebem eventos "Click", que geralmente são usados para abrir o Windows Information Windows em ouvintes de eventos.
Adicione uma tag no mapa através do método setMap ():
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> Google.maps.latlng (51.508742, -0.120850); function Initialize () {var mapprop = {Center: MyCenter, Zoom: 5, MapTypeId: Google.maps.maptypeid.RoadMap}; var map = New.Maps.map (DocumentAMENTBY; Marker = novo Google.maps.marker ({Posição: MyCenter,}); Marker.SetMap (Map);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <rd Id "GoogleMap"> </Div> </body> </hmExemplo de renderização:
Google Maps - Tags dragáveis
O exemplo a seguir descreve como usar a propriedade de animação para arrastar uma tag:
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> google.maps.latlng (51.508742, -0.120850); var marker; função inicialize () {var mapprop = {Center: myCenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getElementById ("googleMap"), mapprop); marker = new google.maps.marker ({position: myCenter, animação: google.maps.animation.bounce}); marker.setmap (map);}}, Google.maps.event.adddddddomListner (windonMapMap (map);}}, Google.maps.event.addddddddomListner (map);}}, Google.Maps.eVent.addddddddddddddom); Initialize); </script> </ad> <body> <div id = "googleMap"> </div> </body> </html>Google Maps - Icon
As tags podem ser exibidas com um novo ícone personalizado em vez do ícone padrão:
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> Google.maps.latlng (51.508742, -0.120850); function Initialize () {var mapprop = {Center: MyCenter, Zoom: 5, MapTypeId: Google.maps.maptypeid.RoadMap}; var map = New.Maps.map (DocumentAMENTBY; Marker = novo google.maps.marker ({Posição: myCenter, icon: 'Pinkball.png'}); marker.setMap (map);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> </body> <dr = "googlemap ',"Google Maps - linhas dobráveis
Os objetos gpolyline criam sobreposições lineares nos mapas. A GPolyLine inclui uma série de pontos e cria uma série de segmentos de linha que conectam esses pontos de maneira ordenada.
As polilinas suportam as seguintes propriedades:
Caminho - Especifica as coordenadas de latitude/longitude de várias linhas retas
Strokecolor - Especifica o valor de cor hexadecimal da linha (formato: "#ffffff")
StrokeOpacity - Especifica a transparência de uma linha (o valor é de 0,0 a 1,0)
StrokeWeight - Define a largura da linha em pixels.
Editável - define se o usuário pode editar uma linha reta (true/false)
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=AIZASYDY0KKJITPVD2U7ATOAWHC9YSHSH6OHXOIYM&sensor=false"> </script> <Script> google.maps.latlng (52.395715.4.888916); var stavanger = new google.maps.latlng (58.983991,5.734863); var amsterdam = new google.maps.latlng (52.395715,4.8888887710s; google.maps.latlng (51.508742, -0.120850); função inicialize () {var mapprop = {Center: x, zoom: 4, maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getElementById ("googleMap"), mapprop); var mytrip = [Stavanger, Amsterdã, Londres]; var FlightPath = new Google.Maps.poline ({Path: MyTrip, Strokecolor: "#0000ff", Stokepacity: 0.8, 0.8, 0.8, 0,8, Strokolor: "##0000ff", Strokepacity: }); flowPath.setMap (map);} google.maps.event.adddomListener (janela, 'load', inicializar); </script> </fabexExemplo de renderização:
Google Maps - Polígonos
Os objetos GPolygon são semelhantes aos objetos gpolyline, pois todos incluem uma série de pontos ordenados. No entanto, em vez de ter dois pontos de extremidade como polilinas, os polígonos são projetados para definir áreas que formam loops fechados.
Como polilinas, você pode personalizar a cor, a espessura e a transparência das bordas de polígono (linhas), bem como a cor e a transparência das áreas de enchimento fechado. A cor deve estar no estilo HTML do número hexadecimal.
Os polígonos suportam as seguintes propriedades:
Caminho - Especifica as coordenadas de múltiplas latitudes de linha reta (as primeiras e as últimas coordenadas são iguais)
Strokecolor - Especifica o valor de cor hexadecimal da linha (formato: "#ffffff")
StrokeOpacity - Especifica a transparência da linha (este valor é de 0,0 a 1,0)
StrokeWeight - Define a largura da linha em pixels.
FillColor - Especifica o valor de cor hexadecimal para a área fechada (formato: "#ffffff")
FillOpacity - Especifica a transparência da cor de preenchimento (o valor é de 0,0 a 1,0)
Editável - define se o usuário pode editar uma linha reta (true/false)
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=AIZASYDY0KKJITPVD2U7ATOAWHC9YSHSH6OHXOIYM&sensor=false"> </script> <Script> google.maps.latlng (52.395715.4.888916); var stavanger = new google.maps.latlng (58.983991,5.734863); var amsterdam = new google.maps.latlng (52.395715,4.8888887710s; google.maps.latlng (51.508742, -0.120850); função inicialize () {var mapprop = {Center: x, zoom: 4, maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getElementById ("googleMap"), mapprop); var mytrip = [stavanger, Amsterdã, Londres, Stavanger]; var FlightPath = new Google.Maps.polygon ({Path: MyTrop, Strokecolor: "#0000ff",, Sloky ({Path: MyTrop, Strokecolor: "#0000ff",, sloky ({Path: MyTrop, Strokecolor: "#0000ff",, Stropy, ({Path: MyTrop, Strokecolor: "#0000ff",, Stropy. FILLCOLOR: "#0000FF", FillOpacity: 0.4}); FlightPath.SetMap (map);} google.maps.event.adddomListener (Window, 'Load', Initialize); </critpt> </head> <body> <div Id = "GoogleMap"> </div> </body> </HtExemplo de renderização:
Google Maps - Circle
Os círculos suportam as seguintes propriedades:
centro - especifique o parâmetro central do ponto do círculo google.maps.latlng
raio - especifica o raio do círculo em metros
Strokecolor - Especifica o valor de cor hexadecimal do arco (formato: "#ffffff")
StrokeOpacity - Especifica a transparência do arco (o valor é de 0,0 a 1,0)
StrokeWeight - Define a largura da linha em pixels.
FillColor - Especifica o valor de preenchimento de cor hexadecimal do círculo (formato: "#ffffff")
FillOpacity - Especifica a transparência da cor de preenchimento (o valor é de 0,0 a 1,0)
Define se o usuário pode editar uma linha reta (true/false)
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <bript> var amster google.maps.latlng (52.395715.4.888916); function Initialize () {var mapprop = {Center: Amsterdã, Zoom: 7, Maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);var myCity = new google.maps.Circle({ center:amsterdam, radius:20000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 }); mycity.setmap (map);} google.maps.event.adddomListener (janela, 'load', inicializar); </sCript> </fabela> <body> <div id = "googleMap"> </div> </body> </html>Exemplo de renderização:
Google Maps - Janela de informação
Exiba uma janela de mensagem de texto em uma tag:
Exemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> Google.maps.latlng (51.508742, -0.120850); function Initialize () {var mapprop = {Center: MyCenter, Zoom: 5, MapTypeId: Google.maps.maptypeid.RoadMap}; var map = New.Maps.map (DocumentAMENTBY; Marker = new google.maps.marker ({Posição: myCenter,}); marker.setMap (map); var infowindow = new google.maps.infowindow ({content: "hello world!"}); infowindow.open (map, marker);}} google.maps.evinte.adddddom. Initialize); </script> </ad> <body> <div id = "googleMap"> </div> </body> </html>Exemplo de renderização:
O exposto acima é uma compilação das informações sobre a sobreposição do Google Maps. Continuaremos a adicioná -lo mais tarde. Obrigado pelo seu apoio a este site!