Comment afficher facilement plusieurs marqueurs et fenêtres d'informations dans l'API Google Maps JS v3 ?-js tutoriel-php.cn

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

Mary-Kate Olsen

Libérer： 2024-12-20 17:12:10

original

811 Les gens l'ont consulté

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]
];

Copier après la connexion

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
});

Copier après la connexion

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));
}

Copier après la connexion

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>

Copier après la connexion

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!