Maison >interface Web >js tutoriel >Comment afficher facilement plusieurs marqueurs et fenêtres d'informations dans l'API Google Maps JS v3 ?

Comment afficher facilement plusieurs marqueurs et fenêtres d'informations dans l'API Google Maps JS v3 ?

Mary-Kate Olsenoriginal: 2024-12-20 17:12:10805parcourir

How to Easily Display Multiple Markers and Info Windows in Google Maps JS API v3?

Affichage de plusieurs marqueurs dans Google Maps JS API v3

Introduction

L'affichage de plusieurs marqueurs sur Google Maps ne pose aucun problème significatif défi; cependant, plusieurs tutoriels peuvent sembler trop complexes pour les débutants. Cet article présente une approche simplifiée pour tracer des marqueurs et afficher une fenêtre d'informations en cliquant.

Approche

1. Obtenir les données du marqueur :

Commencez par récupérer les données du marqueur à partir d'un tableau, comme illustré dans l'exemple de Google :

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

2. Initialiser la carte :

Instancier une nouvelle carte Google Map dans un élément div, en fournissant des options telles que le zoom, le centre et le type de carte.

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-33.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

3. Ajouter des marqueurs et des fenêtres d'informations :

Parcourez le tableau des emplacements et créez un marqueur pour chaque emplacement. Lorsque vous cliquez sur le marqueur, affichez une fenêtre d'informations avec le nom de l'emplacement.

var infowindow = new google.maps.InfoWindow();
var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
 
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

Exemple de code

L'extrait de code complet suivant illustre la mise en œuvre :

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head>
<body>
  <div>

Supplémentaire Considérations

L'exemple fourni utilise une clé API fixe ; n'oubliez pas de le remplacer par le vôtre.
La magie de fermeture est utilisée pour garantir que les données de localisation correctes sont transmises à la fenêtre d'informations.
Reportez-vous à l'article du Mozilla Dev Center pour mieux comprendre les fermetures.

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!

Array for map JS this location display windows zoom

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je détecter les fenêtres de navigateur inactives à l’aide de JavaScript ?Article suivant：Comment puis-je détecter les fenêtres de navigateur inactives à l’aide de JavaScript ?

Articles Liés

Voir plus