Latest web development tutorials

Google Map Nakładki

Dodawanie znacznika w Mapach Google


Mapy Google - Nakładki

Nakładki są obiekty związane z szerokości / długości geograficznej na mapie, przeciągnij lub powiększyć mapę przesunie się z tobą.

Google Maps API są następujące nakładki:

  • Wskazać za pomocą markerów na mapie, aby pokazać często wyświetla ikonę niestandardową. Markery są obiektami typu GMarker i mogą być wykorzystywane do dostosowywania typy ikon obiektów GICON.
  • Linie na mapie za pomocą polilinii (stanowiących zbiór punktów) mają być wyświetlane. GPolyline linia typu obiektu.
  • Obszary na mapie są wyświetlane jako wielokąty (jeśli teren jest dowolny kształt) lub dolną nakładkę (jeśli jest to prostokątny obszar). Wielokąt podobny do zamkniętej linii łamanej, może mieć dowolny kształt. Nakładki naziemne są powszechnie używane do mapowania powierzchni z płytek bezpośrednio lub pośrednio związanych.
  • Sama mapa jest wyświetlana za pomocą nakładki płytek. Jeśli jesteś właścicielem serię płytek, można użyć klasy GTileLayerOverlay zmienić istniejące płytki na mapie, można nawet użyć GMapType tworzyć własne typy map.
  • Okno informacyjne jest również specjalny rodzaj nakładki. Należy jednak pamiętać, okno informacyjne zostaną automatycznie dodane do mapy, a mapa może dodać tylko jeden rodzaj GInfoWindow obiekt.

Google Maps - Dodaj znacznik

Mapa identyfikuje punkty na płycie. Domyślnie używają G_DEFAULT_ICON (Można również określić niestandardową ikonę). Konstruktor GMarker GLatLng i GMarkerOptions (opcjonalnie) obiektu jako parametr.

Tagi zaprojektowany jako interaktywny. Na przykład, domyślnie otrzymują "kliknięcie" wydarzenia, często wykorzystywane, aby otworzyć okno informacyjne w detektorach zdarzeń.

Przez setMap () metoda, aby dodać znaczniki na mapie:

Przykłady

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

marker.setMap(map);

Spróbuj »


Mapy Google - przeciągany marker

W poniższym przykładzie opisano sposób korzystania z właściwości animacji przeciągnij znacznik:

Przykłady

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

marker.setMap(map);

Spróbuj »


Mapy Google - ikona

można zdefiniować od nowa ikona Tag jest wyświetlany w miejsce domyślnej ikony:

Przykłady

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

marker.setMap(map);

Spróbuj »


Mapy Google - polilinii

Obiekt GPolyline można utworzyć liniowy nakładki na mapie. GPolyline obejmować szereg punktów i tworzy szereg uporządkowanych linie łączące te punkty.

Łamana obsługuje następujące atrybuty:

  • Ścieżka - podać więcej niż jedną linię szerokości / długości geograficznej współrzędnych
  • strokeColor - określa szesnastkową wartość koloru linii (format: "#FFFFFF")
  • strokeOpacity - Przejrzystość wyznaczona linia (wartość 0,0 do 1,0)
  • strokeWeight - Określa szerokość linii w pikselach.
  • edytowalne - czy użytkownik może edytować definicję linii prostej (prawda / fałsz)

Przykłady

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

Spróbuj »


Mapy Google - Polygon

Przedmioty GPolygon są podobne przedmioty GPolyline ponieważ zawierają szereg uporządkowanych punktach. Jednakże wielokąty są dwie końcowe, ale konstrukcja zamkniętego obszaru pętli jest określony skład.

A linia, można dostosować kolor i przezroczystość wielokąta krawędzi (linii) kolor, grubość i przejrzystości, a także zamknięcie wypełnionego obszaru. Kolory powinny być w szesnastkowym numerycznej stylu HTML.

Polygon obsługuje następujące atrybuty:

  • Ścieżka - określić wiele współrzędne liniowe Latitude (pierwsze i ostatnie współrzędne są równe)
  • strokeColor - określa szesnastkową wartość koloru linii (format: "#FFFFFF")
  • strokeOpacity - Przejrzystość wyznaczona linia (wartość 0,0 do 1,0)
  • strokeWeight - Określa szerokość linii w pikselach.
  • fillColor - obszar zamknięty wyznaczony szesnastkowe wartości kolorów (format: "#FFFFFF")
  • fillOpacity - Przejrzystość określić kolor wypełnienia (czyli 0,0 do 1,0)
  • edytowalne - czy użytkownik może edytować definicję linii prostej (prawda / fałsz)

Przykłady

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

Spróbuj »


Mapy Google - Okrągłe

Okrągły obsługuje następujące atrybuty:

  • Centrum - punkt środkowy okręgu parametry określone google.maps.LatLng
  • Promień - określa promień okręgu, w metrach
  • strokeColor - Określa wartości kolorów szesnastkowym łuku (format: "#FFFFFF")
  • strokeOpacity - Przejrzystość wyznaczony łuku (wartość 0,0 do 1,0)
  • strokeWeight - Określa szerokość linii w pikselach.
  • fillColor - określa szesnastkową wartość koloru wartości okręgu Fill (format: "#ffffff")
  • fillOpacity - Przejrzystość określić kolor wypełnienia (czyli 0,0 do 1,0)
  • Określa, czy użytkownik może edytować linię prostą (prawda / fałsz)

Przykłady

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

Spróbuj »


Mapy Google - Okno informacyjne

Na znacznik, aby wyświetlić okno wiadomości tekstowej:

Przykłady

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

infowindow.open(map,marker);

Spróbuj »


Mapy Google - nakładka Reference Manual

Google Maps API Reference ręczne .