Google Maps - Superposición
Una superposición es un objeto unido a una coordenada de longitud/latitud en el mapa y se moverá a medida que arrastra o acerca el mapa.
La API de Google Maps tiene las siguientes superposiciones:
1. Los puntos en el mapa se muestran utilizando marcadores, y los iconos personalizados generalmente se muestran. Una etiqueta es un objeto de tipo Gmarker, y el icono se puede personalizar utilizando un objeto de tipo gicon.
2. Las líneas en el mapa se muestran utilizando polilines (que representan una colección de puntos). Una línea es un objeto de tipo GPolyline.
3. El área del mapa se muestra como un polígono (si es una forma arbitraria) o una superposición de superficie inferior (si es un área rectangular). Un polígono es similar a una polilínea cerrada, por lo que puede ser cualquier forma. Las superposiciones de tierra generalmente se usan en el mapa que tienen asociaciones directas o indirectas con fichas.
4. El mapa en sí se muestra con superposiciones de mosaicos. Si tiene su propia serie de mosaicos, puede usar la clase GtilElayeroverlay para cambiar los mosaicos que ya tiene en el mapa, o incluso usar GMapType para crear su propio tipo de mapa.
5. La ventana de información también es una capa de superposición especial. Sin embargo, tenga en cuenta que la ventana de información se agrega automáticamente al mapa, y el mapa solo puede agregar un objeto de tipo Ginfowindow.
Google Maps - Agregar etiquetas
Marque los puntos en el mapa. Por defecto, usan G_Default_icon (también puede especificar iconos personalizados). El constructor Gmarker toma los objetos Glatlng y GMarkerOptions (opcional) como parámetros.
Los marcadores están diseñados para ser interactivos. Por ejemplo, de forma predeterminada reciben eventos de "clic", que a menudo se usan para abrir Windows de información en los oyentes de eventos.
Agregue una etiqueta en el mapa a través del método setmap ():
Ejemplo
<html> <fead> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var mycenter = newe Google.maps.latlng (51.508742, -0.120850); function inicialize () {var mapprop = {Center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var = new Google.maps.map (document.getElementByid ("GooglEmap"); marcador = nuevo Google.Maps.Marker ({Position: MyCenter,}); Marker.SetMap (map);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <viD = "googlemap"> </div> </body> </html>Ejemplo de representación:
Google Maps - etiquetas dragables
El siguiente ejemplo describe cómo usar la propiedad de animación para arrastrar una etiqueta:
Ejemplo
<html> <fead> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var mycenter = newe google.maps.latlng (51.508742, -0.120850); var marcador; function inicialize () {var mapprop = {Center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = nuevo google.maps.Map(document.getElementById("googleMap"),mapProp);marker=new google.maps.Marker({ position:myCenter, animation:google.maps.Animation.BOUNCE });marker.setMap(map);}google.maps.event.addDomListener(window, 'load', Initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Google Maps - icono
Las etiquetas se pueden mostrar con un nuevo icono personalizado en lugar del icono predeterminado:
Ejemplo
<html> <fead> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var mycenter = newe Google.maps.latlng (51.508742, -0.120850); function inicialize () {var mapprop = {Center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var = new Google.maps.map (document.getElementByid ("GooglEmap"); marcador = nuevo Google.Maps.Marker ({Position: MyCenter, Icon: 'Pinkball.png'}); Marker.SetMap (map);} google.maps.event.adddomListener (ventana, 'load', inicialize); </script> </head> <body> <iv id = "googlemap"> </div> </body> </html>Google Maps - Líneas plegables
Los objetos GPolyline crean superposiciones lineales en los mapas. GPolyline incluye una serie de puntos y crea una serie de segmentos de línea que conectan estos puntos de manera ordenada.
Polilines admite las siguientes propiedades:
Ruta: especifica las coordenadas de latitud/longitud de múltiples líneas rectas
Strokecolor: especifica el valor de color hexadecimal de la línea (formato: "#ffffff")
Strokeopacity: especifica la transparencia de una línea (el valor es de 0.0 a 1.0)
Peso de accidente cerebrovascular: define el ancho de la línea en píxeles.
Editable: define si el usuario puede editar una línea recta (verdadero/falso)
Ejemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var x = nuevo 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.888916); Var Londres = New Google.maps.latlng (52.395715,4.888916); Var Londres = New Google.Maps.latlng (52.395715,4.888916); Var Londres = New Google.Maps.latlng (52.395715,4.888916); Google.maps.latlng (51.508742, -0.120850); function 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, Amsterdam, Londres]; var vuelo de vuelo = nuevo google.maps.polyline ({ruta: mytrip, strokecolor: "#0000ff", strokeopacity: 0.8, strokeweight: 2wightweight: 2weight: 2weight: 2weight: 2wighte }); FlightPath.SetMap (MAP);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <div ID = "googlemap"> </div> </body> </html>Ejemplo de representación:
Google Maps - Polígonos
Los objetos GPolygon son similares a los objetos Gpolyline en que todos incluyen una serie de puntos ordenados. Sin embargo, en lugar de tener dos puntos finales como polilíneas, los polígonos están diseñados para definir áreas que forman bucles cerrados.
Al igual que las polilíneas, puede personalizar el color, el grosor y la transparencia de los bordes de polígono (líneas), así como el color y la transparencia de las áreas de relleno cerrado. El color debe estar en el estilo hexadecimal HTML.
Los polígonos admiten las siguientes propiedades:
Ruta: especifica las coordenadas de múltiples latitudes de línea recta (las primeras y las últimas coordenadas son iguales)
Strokecolor: especifica el valor de color hexadecimal de la línea (formato: "#ffffff")
StrokeOpacity: especifica la transparencia de la línea (este valor es de 0.0 a 1.0)
Peso de accidente cerebrovascular: define el ancho de la línea en píxeles.
FillColor: especifica el valor de color hexadecimal para el área cerrada (formato: "#ffffff")
Fillopacity: especifica la transparencia del color de relleno (el valor es de 0.0 a 1.0)
Editable: define si el usuario puede editar una línea recta (verdadero/falso)
Ejemplo
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var x = nuevo 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.888916); Var Londres = New Google.maps.latlng (52.395715,4.888916); Var Londres = New Google.Maps.latlng (52.395715,4.888916); Var Londres = New Google.Maps.latlng (52.395715,4.888916); Google.maps.latlng (51.508742, -0.120850); function 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, amsterdam, londres, staVanger]; var flightpath = nuevo google.maps.polygon ({ruta: mytrip, strokecolor: "#0000ff", strokeopacity: 0.8, strokeweight: 2, 2, strokework FillColor: "#0000ff", Fillopacity: 0.4}); FlightPath.SetMap (map);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <bodi = "googlemap"> </div> </body> </html>Ejemplo de representación:
Google Maps - Círculo
Los círculos admiten las siguientes propiedades:
Centro: especifique el parámetro de punto central del círculo google.maps.latlng
Radio: especifica el radio del círculo en metros
Strokecolor: especifica el valor de color hexadecimal del arco (formato: "#ffffff")
Strokeopacity: especifica la transparencia del arco (el valor es de 0.0 a 1.0)
Peso de accidente cerebrovascular: define el ancho de la línea en píxeles.
FillColor - Especifica el valor de color hexadecimal del valor de relleno del círculo (formato: "#ffffff")
Fillopacity: especifica la transparencia del color de relleno (el valor es de 0.0 a 1.0)
Define si el usuario puede editar una línea recta (verdadero/falso)
Ejemplo
<html> <fead> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var Amsterdam = new Google.maps.latlng (52.395715,4.888916); function inicialize () {var mapprop = {Center: Amsterdam, 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, FellColor: "#0000ff", FillerAft ", FillerAft }); mycity.setMap (map);} google.maps.event.adddomListener (Window, 'Load', Initialize); </script> </head> <body> <div ID = "googlemap"> </div> </body> </html>Ejemplo de representación:
Google Maps - Ventana de información
Muestre una ventana de mensaje de texto en una etiqueta:
Ejemplo
<html> <fead> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> <script> var mycenter = newe Google.maps.latlng (51.508742, -0.120850); function inicialize () {var mapprop = {Center: mycenter, zoom: 5, maptypeid: google.maps.maptypeid.roadmap}; var = new Google.maps.map (document.getElementByid ("GooglEmap"); marcador = nuevo Google.Maps.Marker ({Position: MyCenter,}); Marker.SetMap (map); var infowindow = new Google.maps.infowindow ({content: "¡Hola World!"}); Infowindow.open (map, marcador);} google.maps.event.adddomlistener (ventana, 'load', load ', load', load ', load', load ', load', load ', load', load ', Initialize); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>Ejemplo de representación:
Lo anterior es una compilación de la información sobre la superposición de Google Maps. Continuaremos agregándolo más tarde. ¡Gracias por su apoyo para este sitio!