Nakładki Map Google
Mapy Google – nakładki
Nakładki to obiekty na mapie powiązane ze współrzędnymi szerokości/długości geograficznej.
Mapy Google mają kilka rodzajów nakładek:
- Marker - pojedyncze lokalizacje na mapie. Markery mogą również wyświetlać niestandardowe obrazy ikon
- Polilinia — seria prostych linii na mapie
- Wielokąt — seria prostych linii na mapie, a kształt jest „zamknięty”
- Okrąg i prostokąt
- Okna informacyjne — wyświetla zawartość w wyskakującym dymku na górze mapy
- Niestandardowe nakładki
Mapy Google — Dodaj znacznik
Konstruktor Marker tworzy marker. Zwróć uwagę, że właściwość pozycji musi być ustawiona, aby znacznik był wyświetlany.
Dodaj znacznik do mapy za pomocą metody setMap():
Przykład
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Mapy Google — animuj znacznik
Poniższy przykład pokazuje, jak animować znacznik za pomocą właściwości animacji:
Przykład
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Mapy Google — ikona zamiast znacznika
Poniższy przykład określa obraz (ikonę) do użycia zamiast domyślnego znacznika:
Przykład
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Mapy Google – polilinia
Polyline to linia, która jest rysowana przez szereg współrzędnych w uporządkowanej kolejności.
Polilinia obsługuje następujące właściwości:
- ścieżka — określa kilka współrzędnych szerokości/długości geograficznej linii
- strokeColor - określa szesnastkowy kolor linii (format: "#FFFFFF")
- strokeOpacity - określa nieprzezroczystość linii (wartość pomiędzy 0.0 a 1.0)
- strokeWeight - określa wagę obrysu linii w pikselach
- editable - określa czy linia może być edytowana przez użytkowników (prawda/fałsz)
Przykład
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Mapy Google – wielokąt
Polygon jest podobny do Polyline, ponieważ składa się z szeregu współrzędnych w uporządkowanej kolejności. Jednak wielokąty są przeznaczone do definiowania regionów w zamkniętej pętli.
Wielokąty składają się z linii prostych, a kształt jest „zamknięty” (wszystkie linie łączą się).
Wielokąt obsługuje następujące właściwości:
- ścieżka — określa kilka współrzędnych LatLng dla linii (pierwsza i ostatnia współrzędna są równe)
- strokeColor - określa szesnastkowy kolor linii (format: "#FFFFFF")
- strokeOpacity - określa nieprzezroczystość linii (wartość pomiędzy 0.0 a 1.0)
- strokeWeight - określa wagę obrysu linii w pikselach
- fillColor — określa szesnastkowy kolor dla obszaru w zamkniętym regionie (format: "#FFFFFF")
- fillOpacity — określa krycie koloru wypełnienia (wartość od 0,0 do 1,0)
- editable - określa czy linia może być edytowana przez użytkowników (prawda/fałsz)
Przykład
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
});
Mapy Google – krąg
Okrąg obsługuje następujące właściwości:
- center - określa google.maps.LatLng środka okręgu
- promień — określa promień okręgu w metrach
- strokeColor - określa szesnastkowy kolor linii wokół okręgu (format: "#FFFFFF")
- strokeOpacity — określa krycie koloru obrysu (wartość od 0,0 do 1,0)
- strokeWeight - określa wagę obrysu linii w pikselach
- fillColor — określa szesnastkowy kolor obszaru wewnątrz okręgu (format: "#FFFFFF")
- fillOpacity — określa krycie koloru wypełnienia (wartość od 0,0 do 1,0)
- editable - określa czy krąg może być edytowany przez użytkowników (prawda/fałsz)
Przykład
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Mapy Google - InfoWindow
Pokaż InfoWindow z zawartością tekstową dla znacznika:
Przykład
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);