Comment implémenter facilement plusieurs marqueurs avec InfoWindows sur une carte Google à l'aide de JavaScript ?-js tutoriel-php.cn

Comment implémenter facilement plusieurs marqueurs avec InfoWindows sur une carte Google à l'aide de JavaScript ?

DDD

Libérer： 2024-12-31 04:22:09

original

902 Les gens l'ont consulté

How to Easily Implement Multiple Markers with InfoWindows on a Google Map using JavaScript?

Implémentation simple de plusieurs marqueurs Google Maps en JavaScript

Dans ce didacticiel, nous explorerons une approche simplifiée pour créer plusieurs marqueurs sur une carte Google Map .

Présentation

Pour les débutants qui explorent l'API Google Maps, il peut sembler complexe de tracer plusieurs marqueurs sur une carte. Ce didacticiel fournit une solution simple et directe.

Exemples de données

Utilisons l'exemple de tableau de données de Google :

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  // ... Additional beach locations
];

Copier après la connexion

Création du Map

Tout d'abord, nous initialisons un Google Carte :

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

Copier après la connexion

Création de marqueurs

Pour créer plusieurs marqueurs, nous parcourons le tableau d'emplacements :

var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: { lat: locations[i][1], lng: locations[i][2] },
    map: map
  });
}

Copier après la connexion

Ajout Pop-up InfoWindows

Nous créons une InfoWindow pour chaque marqueur pour afficher le nom de la plage lorsque vous cliquez dessus :

var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

Copier après la connexion

Résultat complet

L'extrait de code complet ci-dessous comprend tous les éléments nécessaires à la fonctionnalité de marqueurs multiples :

// HTML with map container
<!DOCTYPE html>
<html> 
<head> 
  <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

En suivant ces étapes, vous pouvez facilement tracer plusieurs marqueurs avec des fenêtres d'information contextuelles sur une carte Google.

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!