Dodaj znacznik do mapy Google:
Mapy Google - Nakładki
Nakładki są obiekty na mapie, które są zobowiązane do szerokości współrzędnych / długości geograficznej.
Mapy Google ma kilka rodzajów nakładek:
- Marker - pojedyncze lokalizacje na mapie. Markery mogą także wyświetlać obrazy niestandardowe ikony
- Łamana - Seria prostych linii na mapie
- Polygon - Seria prostych linii na mapie, a kształt jest "zamknięta"
- Okrągła i prostokątne
- Informacje Windows - Wyświetla zawartość wewnątrz balonu podręcznego na górze mapy
- nakładki na zamówienie
Mapy Google - dodać znacznik
Konstruktor Marker tworzy znacznik. (Należy pamiętać, że nieruchomość pozycja musi być ustawiony na znacznik, aby wyświetlić).
Dodaj znacznik do mapy za pomocą setMap() metodę:
Przykład
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map); Spróbuj sam " Mapy Google - animowanie Marker
Poniższy przykład pokazuje, jak animować znacznik z właściwości animacji:
Przykład
var
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map); Spróbuj sam " Google Maps - Ikona Zamiast Marker
Poniższy przykład określa obraz (icon) , aby użyć zamiast domyślnego znacznika:
Przykład
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map); Spróbuj sam " Mapy Google - polilinii
Łamaną to linia, która jest zasysane poprzez serię współrzędnych w uporządkowanej kolejności.
Polilinia obsługuje następujące właściwości:
- ścieżka - określa współrzędne kilku szerokość / długość geograficzna dla linii
- strokeColor - określa kolor szesnastkowy dla linii (format: "#FFFFFF")
- strokeOpacity - określa przezroczystość linii (wartość między 0,0 a 1,0)
- strokeWeight - określa masę udaru linia w pikselach
- edytowalne - określa, czy linia jest edytowane przez użytkowników (true/false)
Przykład
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
}); Spróbuj sam " Mapy Google - Polygon
Wielokąta jest podobny do polilinii, że składa się z kilku współrzędnych w uporządkowanej kolejności. Jednakże wielokąty są zaprojektowane tak, aby określić obszary w zamkniętej pętli.
Wielokąty są wykonane z prostych linii i kształtów jest "closed" (wszystkie linie podłączyć).
Wielokąt obsługuje następujące właściwości:
- ścieżka - określa współrzędne poĹ,oĹĽenia geograficznego kilka linii (pierwszy i ostatni współrzędnych są równe)
- strokeColor - określa kolor szesnastkowy dla linii (format: "#FFFFFF")
- strokeOpacity - określa przezroczystość linii (wartość między 0,0 a 1,0)
- strokeWeight - określa masę udaru linia w pikselach
- fillColor - określa kolor szesnastkowy dla obszaru w rejonie zamkniętym (format: "#FFFFFF")
- fillOpacity - określa stopień przezroczystości koloru wypełnienia (wartość między 0,0 a 1,0)
- edytowalne - określa, czy linia jest edytowane przez użytkowników (true/false)
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
}); Spróbuj sam " Mapy Google - Okrągłe
Okrąg obsługuje następujące właściwości:
- Centrum - określa google.maps.LatLng środka okręgu
- Promień - określa promień okręgu, w metrach
- strokeColor - określa kolor szesnastkowy dla linii wokół kręgu (format: "#FFFFFF")
- strokeOpacity - określa stopień przezroczystości koloru obrysu (wartość między 0,0 a 1,0)
- strokeWeight - określa masę udaru linia w pikselach
- fillColor - określa kolor szesnastkowy dla obszaru wewnątrz okręgu (format: "#FFFFFF")
- fillOpacity - określa stopień przezroczystości koloru wypełnienia (wartość między 0,0 a 1,0)
- edytowalne - określa, czy koło jest edytowane przez użytkowników (true/false)
Przykład
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
}); Spróbuj sam " Mapy Google - InfoWindow
Wykazują InfoWindow z niektórych treści tekstu do znacznika:
Przykład
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker); Spróbuj sam "