Maison >interface Web >js tutoriel >Comment puis-je tracer facilement plusieurs marqueurs avec des fenêtres d'informations sur une carte Google à l'aide de l'API JavaScript v3 ?

Comment puis-je tracer facilement plusieurs marqueurs avec des fenêtres d'informations sur une carte Google à l'aide de l'API JavaScript v3 ?

Mary-Kate Olsenoriginal: 2024-12-23 15:48:12753parcourir

How Can I Easily Plot Multiple Markers with Info Windows on a Google Map Using the JavaScript API v3?

Simplifiez le traçage de plusieurs marqueurs dans l'API JS de Google Maps v3

Lorsque vous travaillez avec l'API JavaScript de Google Maps, le traçage de plusieurs marqueurs peut souvent nécessiter des implémentations complexes . Cet article fournit une solution simple pour les débutants qui cherchent à afficher un tableau de marqueurs accompagnés de fenêtres d'informations.

Problème :
Considérons un tableau d'emplacements avec leurs noms et coordonnées correspondants. , et les valeurs de référence. Le but est de placer des marqueurs pour chaque emplacement sur une carte et d'afficher une fenêtre d'information avec le nom lors du clic du marqueur.

Solution :

HTML et CSS :

<!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>

JavaScript :

    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]
    ];
    
    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
    });
    
    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));
    }
  </script>
</body>
</html>

Explication :

Créer le carte et une fenêtre d'informations pour afficher les informations sur les marqueurs.
Parcourez le tableau des emplacements et créez un objet marqueur pour chaque emplacement.
Ajoutez les marqueurs à la carte.
Utilisez un écouteur d'événement pour associer la fenêtre d'informations à chaque marqueur, affichant le nom de l'emplacement lorsque vous cliquez dessus.

Résultat :

Lors de son exécution, le code génère une Google Map avec plusieurs marqueurs représentant les emplacements du tableau d’entrée. Cliquer sur n'importe quel marqueur ouvre une fenêtre d'informations affichant son nom.

Remarque de fermeture :

Le code utilise des fermetures pour transmettre le marqueur et l'index d'emplacement comme arguments à l'écouteur d'événement. . Si vous n'êtes pas familier avec les fermetures, le centre de développement de Mozilla propose un guide utile sur le sujet.

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!

JavaScript css html Array Object if for require using Event map JS this location display input windows

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 appeler des méthodes de composant enfant à partir d'un composant parent dans React ?Article suivant：Comment puis-je appeler des méthodes de composant enfant à partir d'un composant parent dans React ?

Articles Liés

Voir plus