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

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 Olsen

Libérer： 2024-12-23 15:48:12

original

748 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!