Ajouter un marqueur à la carte Google:
Google Maps - Superpositions
Superpositions sont des objets sur la carte qui sont liés à la latitude coordonnées / longitude.
Google Maps a plusieurs types de revêtements:
- Marker - emplacements simples sur une carte. Les marqueurs peuvent également afficher icône personnalisée images
- Polyligne - Série de lignes droites sur une carte
- Polygon - Série de lignes droites sur une carte, et la forme est "fermée"
- Cercle et Rectangle
- Infos Windows - Affiche le contenu dans un popup ballon sur une carte
- superpositions personnalisées
Google Maps - Ajouter un marqueur
Le constructeur de Marker crée un marqueur. (Notez que la propriété de position doit être définie pour le marqueur à afficher).
Ajouter le marqueur à la carte en utilisant le setMap() méthode:
Exemple
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map); Essayez - le vous - même » Google Maps - Animer le marqueur
L'exemple ci-dessous montre comment animer le marqueur avec la propriété d'animation:
Exemple
var
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map); Essayez - le vous - même » Google Maps - Icon Au lieu de Marker
L'exemple ci - dessous spécifie une image (icon) à utiliser à la place du marqueur par défaut:
Exemple
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map); Essayez - le vous - même » Google Maps - Polyligne
Un Polyline est une ligne qui est tirée à travers une série de coordonnées dans une séquence ordonnée.
Une polyligne prend en charge les propriétés suivantes:
- path - spécifie les coordonnées de plusieurs latitude / longitude pour la ligne
- strokeColor - spécifie une couleur hexadécimal de la ligne (format: "#FFFFFF")
- strokeOpacity - spécifie l'opacité de la ligne (une valeur comprise entre 0,0 et 1,0)
- strokeWeight - spécifie le poids de la course de la ligne en pixels
- modifiable - définit si la ligne est modifiable par les utilisateurs (true/false)
Exemple
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
}); Essayez - le vous - même » Google Maps - Polygon
Un polygone est similaire à une polyligne en ce qu 'il est constitué d'une série de coordonnées selon une séquence ordonnée. Cependant, les polygones sont conçus pour définir des régions au sein d'une boucle fermée.
Polygones sont faites de lignes droites, et la forme est "closed" (toutes les lignes relient le haut).
Un polygone prend en charge les propriétés suivantes:
- path - spécifie les coordonnées de plusieurs LatLng pour la ligne (première et dernière de coordonnées sont égales)
- strokeColor - spécifie une couleur hexadécimal de la ligne (format: "#FFFFFF")
- strokeOpacity - spécifie l'opacité de la ligne (une valeur comprise entre 0,0 et 1,0)
- strokeWeight - spécifie le poids de la course de la ligne en pixels
- fillColor - spécifie une couleur hexadécimal de la zone dans la zone fermée (format: "#FFFFFF")
- fillOpacity - spécifie l'opacité de la couleur de remplissage (une valeur comprise entre 0,0 et 1,0)
- modifiable - définit si la ligne est modifiable par les utilisateurs (true/false)
Exemple
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
}); Essayez - le vous - même » Google Maps - Cercle
Un cercle prend en charge les propriétés suivantes:
- centre - spécifie le google.maps.LatLng du centre du cercle
- rayon - spécifie le rayon du cercle, en mètres
- strokeColor - spécifie une couleur hexadécimal pour la ligne autour du cercle (format: "#FFFFFF")
- strokeOpacity - spécifie l'opacité de la couleur de course (une valeur comprise entre 0,0 et 1,0)
- strokeWeight - spécifie le poids de la course de la ligne en pixels
- fillColor - spécifie une couleur hexadécimal pour la zone dans le cercle (format: "#FFFFFF")
- fillOpacity - spécifie l'opacité de la couleur de remplissage (une valeur comprise entre 0,0 et 1,0)
- modifiable - définit si le cercle est modifiable par les utilisateurs (true/false)
Exemple
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
}); Essayez - le vous - même » Google Maps - InfoWindow
Afficher un InfoWindow avec du contenu de texte pour un marqueur:
Exemple
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker); Essayez - le vous - même » Google Maps - Superpositions de référence
Google Maps API de référence .