Bagaimana untuk Memaparkan Berbilang Penanda dengan InfoWindows menggunakan Google Maps JS API v3?

Google Maps JS API v3 - Contoh Penanda Berbilang Mudah

Membuat Peta dan Penanda

Untuk bermula, buat fail HTML baharu dan sertakan skrip API Peta Google dengan kunci API anda. Seterusnya, sediakan objek Map dan sediakannya dengan parameter yang diperlukan:

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

Mencipta InfoWindow

Tentukan objek InfoWindow, yang memaparkan nama lokasi pada klik penanda:

var infowindow = new google.maps.InfoWindow();

Loosing Melalui Lokasi Data

Seterusnya, ulangi tatasusunan data anda dan buat penanda untuk setiap lokasi, tambahkannya pada peta:

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

Menetapkan Acara Klik untuk InfoWindows

Akhir sekali, tambahkan pendengar acara pada setiap penanda yang mencetuskan InfoWindow untuk dibuka apabila diklik:

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

Kod Lengkap

Kod lengkap kelihatan seperti ini:

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

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Berbilang Penanda dengan InfoWindows menggunakan Google Maps JS API v3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!