Επιπλέον Γραφικές του Google

Google Maps - Επιπλέον Στρώσεις

Οι επιπλέον στρώσεις είναι αντικείμενα που είναι δεσμευμένα σε γεωγραφικές συντεταγμένες στο χάρτη.

Το Google Maps έχει διάφορους τύπους επιπλέον στρώσεων:

  • Δείκτης (Marker) - Μια μοναδική τοποθεσία στο χάρτη. Ο δείκτης μπορεί επίσης να εμφανίζει προσαρμοσμένες εικόνες εικονιδίων
  • Ευκλείδεια Γραμμή (Polyline) - Μια σειρά από ευκλείδειες γραμμές στο χάρτη
  • Πολυγώνιο (Polygon) - Μια σειρά από ευκλείδειες γραμμές στο χάρτη, η μορφή της οποίας είναι "κλειστή"
  • Κυκλικές και ορθογώνιες (Circle και Rectangle)
  • Παράθυρα πληροφοριών (Info Windows) - Εμφάνιση περιεχομένου στον ατμοσφαιρικό αερόσακο στην κορυφή του χάρτη
  • Προσαρμοσμένες επιπλέον στρώσεις (Custom overlays)

Google Maps - Προσθήκη Σημαδίου

Ο δείκτης μπορεί να δημιουργήσει σημάδια. Λάβετε υπόψη ότι πρέπει να ρυθμίσετε την ιδιότητα position για να εμφανιστεί το σημάδι.

Χρησιμοποιήστε τη μέθοδο setMap() για να προσθέσετε τον δείκτη στη χάρτη:

instance

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

Google Maps - Κίνηση Δείκτη

Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιηθεί η ιδιότητα animation για να ρυθμίσετε την κίνηση του δείκτη:

instance

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

Google Maps - Εικονίδιο Αντικατάστασης Δείκτη

Το παρακάτω παράδειγμα καθορίζει την εικόνα (εικονίδιο) που θα χρησιμοποιηθεί για να αντικαταστήσει τον προεπιλεγμένο δείκτη:

instance

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

Google Maps - Ευκλείδεια Γραμμή

Η ευκλείδεια γραμμή είναι μια γραμμή που αποδίδεται από μια σειρά γεωγραφικών συντεταγμένων που είναι σε σειρά.

Η ευκλείδεια γραμμή υποστηρίζει τις ακόλουθες ιδιότητες:

  • path Περιγραφή των γεωγραφικών συντεταγμένων
  • strokeColor - Specify the hexadecimal color of the line (format: "#FFFFFF")
  • strokeOpacity - Specify the opacity of the line (a value between 0.0 and 1.0)
  • strokeWeight - Specify the line width of the stroke (in pixels)
  • editable - Define whether the line can be edited by the user (true/false)

instance

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

Google Maps - Polygon

Similar to a polyline, a polygon is composed of a series of sequentially arranged coordinates. However, a polygon is designed to define the area within the closed loop.

A polygon is composed of straight lines and is shaped as 'closed' (all lines are connected).

The polygon supports the following properties:

  • path - Specify the latitude and longitude coordinates of the line (the first and last coordinates are equal)
  • strokeColor - Specify the hexadecimal color of the line (format: "#FFFFFF")
  • strokeOpacity - Specify the opacity of the line (a value between 0.0 and 1.0)
  • strokeWeight - Specify the line width of the stroke (in pixels)
  • fillColor - Specify the hexadecimal color of the area inside the closed region (format: "#FFFFFF")
  • fillOpacity - Specify the opacity of the fill color (a value between 0.0 and 1.0)
  • editable - Define whether the line can be edited by the user (true/false)

instance

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

Google Maps - Circle

The circle supports the following properties:

  • center - Specify the google.maps.LatLng of the center
  • radius - Specify the radius of the circle in meters
  • strokeColor - Specify the hexadecimal color of the line around the circle (format: "#FFFFFF")
  • strokeOpacity - Specify the opacity of the stroke color (a value between 0.0 and 1.0)
  • strokeWeight - Specify the line width of the stroke (in pixels)
  • fillColor - Specify the hexadecimal color of the area inside the circle (format: "#FFFFFF")
  • fillOpacity - Specify the opacity of the fill color (a value between 0.0 and 1.0)
  • editable - Define whether the circle can be edited by the user (true/false)

instance

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

Google Maps - Information Window

to display an information window with text content for the marker:

instance

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