Latest web development tutorials

Google Map Overlays

Ajout d'un marqueur dans Google Maps


Google Maps - Superpositions

Superpositions sont des objets liés à la latitude / longitude, coordonnées sur la carte, faites glisser ou agrandir la carte se déplace avec vous.

Google Maps API sont les superpositions suivantes:

  • Le point en utilisant des marqueurs sur la carte pour afficher l'écran souvent une icône personnalisée. Les marqueurs sont des objets de type GMarker, et peuvent être utilisés pour personnaliser les types d'objets de l'icône.
  • Les lignes sur la carte en utilisant polylignes (représentant une collection de points) à afficher. ligne GPolyline de type object.
  • Les zones sur la carte est affichée sous forme de polygones (si la zone est une forme arbitraire) ou la superposition de fond (si elle est une zone rectangulaire). Polygon semblable à une polyligne fermée, il peut avoir une forme quelconque. superpositions au sol sont généralement utilisées pour cartographier la zone avec des carreaux associés directement ou indirectement.
  • La carte elle-même est affiché en utilisant un revêtement de tuiles. Si vous possédez une série de tuiles, vous pouvez utiliser la classe GTileLayerOverlay pour changer les tuiles existantes sur la carte, vous pouvez même utiliser GMapType pour créer vos propres types de cartes.
  • Fenêtre d'information est également un type spécial de recouvrement. Notez, cependant, la fenêtre d'information sera automatiquement ajouté à la carte, et la carte ne peut ajouter objet GInfoWindow un type.

Google Maps - Ajouter tag

Plan identifie les points sur le dossier. Par défaut, ils utilisent G_DEFAULT_ICON (Vous pouvez également spécifier une icône personnalisée). constructeur GMarker GLatLng et GMarkerOptions (en option) objet comme paramètre.

Mots conçu pour être interactif. Par exemple, par défaut, ils reçoivent ", cliquez sur" les événements, souvent utilisé pour ouvrir la fenêtre d'informations dans les écouteurs d'événement.

Par setMap () pour ajouter des marqueurs sur la carte:

Exemples

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

marker.setMap(map);

Essayez »


Google Maps - marqueur draggable

L'exemple suivant décrit comment utiliser la propriété d'animation pour faire glisser le marqueur:

Exemples

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

marker.setMap(map);

Essayez »


Google Maps - icon

Tag peut être défini à partir de la nouvelle icône est affichée à la place de l'icône par défaut:

Exemples

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

marker.setMap(map);

Essayez »


Google Maps - polyligne

objet GPolyline peut créer une superposition linéaire sur la carte. GPolyline comprennent une série de points et crée une série de lignes ordonnées reliant ces points.

Polyline prend en charge les attributs suivants:

  • Chemin - plus d'une ligne de latitude / coordonnées de longitude
  • strokeColor - spécifie la valeur de couleur hexadécimale de la ligne (format: "#FFFFFF")
  • strokeOpacity - Transparence ligne désignée (la valeur 0.0 à 1.0)
  • strokeWeight - Définit la largeur de la ligne, en pixels.
  • modifiable - si l'utilisateur peut modifier la définition d'une ligne droite (vrai / faux)

Exemples

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

Essayez »


Google Maps - Polygon

objets GPolygon sont des objets GPolyline similaires parce qu'ils comprennent une série de points ordonnés. Cependant, les polygones sont deux points d'extrémité, mais la conception de la zone en boucle fermée est définie formation.

Et la ligne, vous pouvez personnaliser la couleur et la transparence du polygone bords (lignes) de couleur, l'épaisseur et la transparence, ainsi que la fermeture de la zone remplie. Couleurs devraient être dans le style HTML numérique hexadécimal.

Polygon prend en charge les attributs suivants:

  • Chemin - plusieurs coordonnées linéaires de latitude (premier et dernier coordonnées sont égales)
  • strokeColor - spécifie la valeur de couleur hexadécimale de la ligne (format: "#FFFFFF")
  • strokeOpacity - Transparence ligne désignée (la valeur 0.0 à 1.0)
  • strokeWeight - Définit la largeur de la ligne, en pixels.
  • fillColor - zone fermée hexadécimaux désignée des valeurs de couleur (format: "#FFFFFF")
  • fillOpacity - Transparence spécifier la couleur de remplissage (qui est 0.0 à 1.0)
  • modifiable - si l'utilisateur peut modifier la définition d'une ligne droite (vrai / faux)

Exemples

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 »


Google Maps - Round

Rond prend en charge les attributs suivants:

  • centre - le point des paramètres de cercle spécifié centre google.maps.LatLng
  • rayon - spécifie le rayon du cercle, en mètres
  • strokeColor - Indique les valeurs de couleur hexadécimal d'arc (format: "#FFFFFF")
  • strokeOpacity - Transparence arc désigné (la valeur 0.0 à 1.0)
  • strokeWeight - Définit la largeur de la ligne, en pixels.
  • fillColor - spécifie la valeur de couleur hexadécimale de la valeur cercle de remplissage (format: "#FFFFFF")
  • fillOpacity - Transparence spécifier la couleur de remplissage (qui est 0.0 à 1.0)
  • Définit si l'utilisateur peut modifier une ligne droite (vrai / faux)

Exemples

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

Essayez »


Google Maps - Fenêtre d'information

Sur une étiquette pour afficher une fenêtre de message texte:

Exemples

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

infowindow.open(map,marker);

Essayez »


Google Maps - Manuel de référence overlay

Google Maps API Manuel de référence .