Ajout de marqueurs à une carte à l'aide de l'API Google Maps et de l'article jQuery

Pour le code Google Maps, nous pouvons créer un lien directement vers les serveurs Google:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Le capteur = faux paramètre spécifie que nous ne voulons pas utiliser un capteur (comme un localisateur GPS) pour déterminer l'emplacement de l'utilisateur.

Maintenant que nous avons nos bibliothèques de base, nous pouvons commencer à construire nos fonctionnalités.

décrivant le script

Commençons par le squelette de notre code de carte:

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

Nous emballons toutes nos fonctionnalités de carte dans un objet JavaScript appelé MyMap, ce qui aidera à éviter les conflits potentiels avec d'autres scripts de la page. L'objet contient deux variables et deux fonctions. La variable MAP stockera une référence à l'objet Google Map que nous allons créer, et la variable Bounds stockera une boîte de limite qui contient tous nos marqueurs. Cela sera utile après avoir ajouté tous les marqueurs, lorsque nous voulons zoomer la carte de telle manière qu'ils sont tous visibles en même temps.

Maintenant pour les méthodes: init trouvera un élément sur la page et l'initialisera comme une nouvelle carte Google avec un centre et un zoom donné. Les joueurs de ventre, quant à eux, prennent le nom d'un fichier XML et se chargera dans les données de coordonnées de ce fichier pour placer une série de marqueurs sur la carte.

Chargement de la carte

Maintenant que nous avons la structure de base en place, écrivons notre fonction d'init:

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();}

Nous créons un objet littéral pour contenir un ensemble d'options, en utilisant les paramètres transmis dans la méthode. Ensuite, nous initialisons deux objets définis dans l'API Google Maps - une carte et un latlngbounds - et les attribuer aux propriétés de notre objet MYMAP que nous avons configuré plus tôt à cet effet.

Le constructeur de cartes a passé un élément DOM à utiliser comme carte de la page, ainsi qu'un ensemble d'options. Les options que nous avons déjà préparées, mais pour récupérer l'élément DOM, nous avons besoin pour prendre la chaîne de sélecteur transmise et utiliser la fonction jQuery $ pour trouver l'élément sur la page. Parce que $ renvoie un objet jQuery plutôt qu'un nœud Dom brut, nous devons explorer en utilisant [0]: cela nous permet d'accéder au nœud Dom «nu».

Ainsi, une fois que cette fonction a été exécutée, nous ' Ll a affiché notre carte sur la page et avoir une boîte de délimitation vide, prête à être élargie à mesure que nous ajoutons nos marqueurs.

ajoutant les marqueurs

En parlant de cela, jetons un coup d'œil à la fonction des classeurs:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Cette fonction est un peu plus compliquée, mais il est facile de comprendre. Nous appelons d'abord la méthode $ .Get de jQuery pour exécuter une demande AJAX GET. La méthode prend deux paramètres: l'URL à demander (dans ce cas, notre fichier XML local) et une fonction de rappel à exécuter à la fin de la demande. Cette fonction, à son tour, sera transmise la réponse à la demande, qui dans ce cas sera notre XML.

jQuery traite XML exactement comme HTML, afin que nous puissions utiliser $ (xml) .find ('marqueur'). Chaque (…) pour boucler sur chaque élément de marqueur dans la réponse XML et créer un marqueur sur la carte pour chacun.

Nous saisissons le nom et l'adresse des marqueurs, puis nous créons un nouvel objet latlng pour chacun, que nous attribuons à une variable ponctuelle. Nous étendons la boîte de délimitation pour inclure ce point, puis créons un marqueur à cet emplacement sur la carte.

Nous voulons qu'une bulle d'info-bulle apparaisse chaque fois qu'un utilisateur clique sur ces marqueurs, et nous voulons qu'il contienne le nom et l'adresse de notre emplacement. Par conséquent, nous devons ajouter un écouteur d'événements à chaque marqueur à l'aide de la méthode API Event.AddListener MATS. Avant de le faire, cependant, nous créerons l'info-bulle elle-même. Dans l'API Google Maps, ce type d'info-bulle est appelé Infowindow. Nous créons donc un nouvel Infowindow, et avons également configuré un HTML pour le remplir avec les informations nécessaires. Ensuite, nous ajoutons notre écouteur d'événements. L'auditeur tirera chaque fois que l'un des marqueurs est cliqué, et tous deux définissent le contenu de l'infowindow et l'ouvrent pour qu'il soit visible sur la carte.

Enfin, après avoir ajouté tous les marqueurs et leurs gestionnaires d'événements et Infowindows associés, nous ajustez la carte aux marqueurs en utilisant la méthode FitBounds de l'API MAPS. Tout ce dont nous avons besoin pour le passer, c'est l'objet Bounds que nous étendons pour inclure chaque marqueur. De cette façon, peu importe où la carte a été zoomée ou diffusée, elle reviendra toujours à un niveau de zoom idéal qui comprend tous nos marqueurs.

attacher tout ensemble

Maintenant que notre code est prêt, mettons-le en action. Nous utiliserons $ ('Document') de JQuery.

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

Nous joignons également un écouteur d'événements de clic au bouton #showmarkers. Lorsque ce bouton est cliqué, nous appelons notre fonction de classeurs avec l'URL vers notre fichier XML. Donnez-lui un tour et vous verrez un ensemble de marqueurs personnalisés apparaître sur la carte.

Résumé

Vous avez probablement deviné qu'il y a beaucoup plus à l'API Google Maps que quoi Nous avons couvert ici, alors assurez-vous de consulter la documentation pour avoir une idée de tout ce qui est possible.

Si vous avez aimé lire ce post, vous aimerez l'apprentissage; L'endroit pour acquérir de nouvelles compétences et techniques de la maîtrise. Les membres ont un accès instantané à tous les livres électroniques de SitePoint et aux cours en ligne interactifs, comme JQuery Fundamentals.

Questions fréquemment posées (FAQ) sur l'API Google Maps avec jQuery

Comment puis-je intégrer l'API Google Maps avec jQuery?

L'intégration de l'API Google Maps à jQuery implique quelques étapes. Tout d'abord, vous devez inclure le script API Google Maps dans votre fichier HTML. Ensuite, vous devez initialiser la carte dans votre fichier JavaScript. Vous pouvez utiliser jQuery pour sélectionner l'élément HTML où vous souhaitez afficher la carte. Ensuite, vous pouvez utiliser les méthodes de l'API Google Maps pour personnaliser la carte en fonction de vos besoins. N'oubliez pas de remplacer 'your_api_key' par votre clé API réelle dans la balise de script.

Comment puis-je personnaliser la carte affichée à l'aide de l'API Google Maps et JQuery?

L'API Google Maps fournit plusieurs options pour personnaliser la carte. Vous pouvez définir le niveau de zoom, centrer la carte à un emplacement spécifique et choisir le type de carte à afficher. Vous pouvez également ajouter des marqueurs, des fenêtres d'informations et des auditeurs d'événements sur la carte. Toutes ces personnalisations peuvent être effectuées dans le fichier JavaScript où vous initialisez la carte.

Comment puis-je ajouter des marqueurs à la carte?

Ajout de marqueurs à la carte implique la création d'une nouvelle instance du Google .maps.marker Classe et spécifiant les options de position et de carte dans le constructeur. L'option de position doit être un objet Google.maps.latlng représentant les coordonnées géographiques du marqueur. L'option de carte doit être l'objet Google.maps.map représentant la carte où le marqueur doit être affiché.

Comment puis-je ajouter des fenêtres d'informations aux marqueurs?

Les fenêtres d'informations peuvent être ajoutées à Les marqueurs en créant une nouvelle instance de la classe google.maps.infowindow et en spécifiant l'option de contenu dans le constructeur. L'option de contenu doit être une chaîne représentant le contenu HTML à afficher dans la fenêtre Info. Ensuite, vous pouvez utiliser la méthode ouverte de l'objet de fenêtre d'information pour afficher la fenêtre d'information lorsque le marqueur est cliqué.

Comment puis-je ajouter des écouteurs d'événements aux marqueurs?

Les écouteurs d'événements peuvent être Ajouté aux marqueurs en utilisant la méthode AddListener de la classe Google.maps.event. Le premier argument de la méthode AddListener doit être l'objet marqueur, le deuxième argument doit être le nom de l'événement, et le troisième argument devrait être la fonction à exécuter lorsque l'événement se produit.

Comment puis-je changer Le type de carte affiché?

Le type de carte affiché peut être modifié en définissant l'option MapTypeid de l'objet MAP. L'option MapTypeid doit être l'une des valeurs suivantes: google.maps.maptypeid.roadmap, google.maps.maptypeid.satellite, google.maps.maptypeid.hybrid, ou google.maps.maptypeid.terrain.

Comment puis-je définir le niveau de zoom de la carte?

Le niveau de zoom de la carte peut être défini en définissant l'option de zoom de l'objet MAP. L'option Zoom doit être un nombre représentant le niveau de zoom. Plus le nombre est élevé, plus le zoom.

Comment puis-je centrer la carte à un emplacement spécifique?

La carte peut être centrée à un emplacement spécifique en définissant l'option centrale de la carte objet. L'option centrale doit être un objet Google.maps.latlng représentant les coordonnées géographiques de l'emplacement.

Comment puis-je obtenir la clé API pour Google Maps?

La clé API pour Google Maps peut être obtenu à partir de la console de la plate-forme Google Cloud. Vous devez créer un nouveau projet, activer l'API JavaScript Google Maps et créer une nouvelle clé API.

Comment puis-je gérer les erreurs dans l'API Google Maps?

Erreurs dans Google Maps API Can Soyez géré à l'aide de la méthode AddomListener de la classe Google.maps.Event. Le premier argument de la méthode AddomListener doit être l'objet Window, le deuxième argument doit être l'événement «Erreur», et le troisième argument doit être la fonction à exécuter lorsque l'erreur se produit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!