Latest web development tutorials

Google Map superposiciones

Adición de un marcador en Google Maps


Google Maps - Superposiciones

Las superposiciones son objetos vinculados a la latitud / longitud coordina en el mapa, arrastre o ampliar el mapa se desplazará con usted.

Google Maps API son las siguientes superposiciones:

  • Señalar el uso de marcadores en el mapa para mostrar la frecuencia mostrar un icono personalizado. Los marcadores son objetos de tipo GMarker, y se pueden utilizar para personalizar los tipos de objetos icono GIcon.
  • Líneas en el mapa mediante polilíneas (que representan una colección de puntos) que se mostrarán. GPolyline línea del tipo de objeto.
  • Áreas en el mapa se muestran como polígonos (si el área es una forma arbitraria) o revestimiento inferior (si se trata de un área rectangular). Polígono semejante a una línea poligonal cerrada, que puede ser de cualquier forma. Las superposiciones de suelo se utilizan comúnmente para asignar el área con azulejos asociados directa o indirectamente.
  • El mapa en sí se visualiza usando una superposición de mosaico. Si usted posee una serie de azulejos, se puede utilizar la clase GTileLayerOverlay para cambiar las baldosas existentes en el mapa, incluso se puede utilizar GMapType para crear sus propios tipos de mapas.
  • ventana de información es también un tipo especial de superposición. Nótese, sin embargo, la ventana de información se añadirá automáticamente al mapa, el mapa y sólo puede añadir un tipo de objeto GInfoWindow.

Google Maps - Añade etiquetas

Mapa identifica puntos en el expediente. De forma predeterminada, utilizan G_DEFAULT_ICON (También puede especificar un icono personalizado). GMarker constructor GLatLng y GMarkerOptions (opcional) objeto como un parámetro.

Etiquetas diseñado para ser interactivo. Por ejemplo, por defecto, que recibirá un "clic" eventos, a menudo se utiliza para abrir la ventana de información en los detectores de eventos.

Por el método setMap () para agregar marcadores en el mapa:

Ejemplos

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

marker.setMap(map);

Trate »


Google Maps - marcador se puede arrastrar

El siguiente ejemplo describe cómo utilizar la propiedad de animación que arrastre el marcador:

Ejemplos

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

marker.setMap(map);

Trate »


Google Maps - icon

Tag puede definirse desde el nuevo icono aparece en lugar del icono predeterminado:

Ejemplos

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

marker.setMap(map);

Trate »


Google Maps - polilínea

objeto GPolyline puede crear una superposición lineal en el mapa. GPolyline incluye una serie de puntos y crea una serie de líneas ordenadas que conectan estos puntos.

Polilínea es compatible con los siguientes atributos:

  • Ruta - indique más de una línea de coordenadas de latitud / longitud
  • strokeColor - especifica el valor hexadecimal del color de la línea (formato: "#FFFFFF")
  • strokeOpacity - Transparencia línea designada (el valor de 0,0 a 1,0)
  • strokeWeight - Define el ancho de la línea, expresada en píxeles.
  • editable - si el usuario puede editar la definición de una línea recta (verdadero / falso)

Ejemplos

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

Trate »


Google Maps - Polygon

GPolygon objetos son objetos GPolyline similares, ya que incluyen una serie de puntos ordenados. Sin embargo, los polígonos son dos puntos finales, pero el diseño de la zona de bucle cerrado se define formación.

Y la línea, se puede personalizar el color y la transparencia del polígono bordes (líneas) de color, grosor y transparencia, así como el cierre de la zona de llenado. Los colores deben ser de estilo HTML numérico hexadecimal.

Polígono es compatible con los siguientes atributos:

  • Ruta - indique múltiples coordenadas de latitud lineal (primer y último coordenadas son iguales)
  • strokeColor - especifica el valor hexadecimal del color de la línea (formato: "#FFFFFF")
  • strokeOpacity - Transparencia línea designada (el valor de 0,0 a 1,0)
  • strokeWeight - Define el ancho de la línea, expresada en píxeles.
  • fillColor - valores de color hexadecimales Zona cerrada (formato: "#FFFFFF")
  • fillOpacity - Transparencia especificar el color de relleno (que es de 0,0 a 1,0)
  • editable - si el usuario puede editar la definición de una línea recta (verdadero / falso)

Ejemplos

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
});

Trate »


Google Maps - Ronda

Ronda es compatible con los siguientes atributos:

  • centro - el punto central del círculo de los parámetros especificados google.maps.LatLng
  • radio - especifica el radio del círculo, en metros
  • strokeColor - Especifica los valores de los colores del arco hexadecimal (formato: "#FFFFFF")
  • strokeOpacity - Transparencia arco designado (el valor de 0,0 a 1,0)
  • strokeWeight - Define el ancho de la línea, expresada en píxeles.
  • fillColor - especifica el valor de color hexadecimal del valor del círculo relleno (formato: "#FFFFFF")
  • fillOpacity - Transparencia especificar el color de relleno (que es de 0,0 a 1,0)
  • Define si el usuario puede editar una línea recta (verdadero / falso)

Ejemplos

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

Trate »


Google Maps - ventana Información

En una etiqueta para mostrar una ventana de mensaje de texto:

Ejemplos

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

infowindow.open(map,marker);

Trate »


Google Maps - Manual de Referencia de superposición

Google Maps API Manual de Referencia .