Bagaimana untuk Memaparkan Berbilang Penanda dengan InfoWindows menggunakan Google Maps JS API v3?-tutorial js-php.cn

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

Barbara Streisand

Lepaskan： 2024-12-20 15:45:10

asal

781 orang telah melayarinya

How to Display Multiple Markers with InfoWindows using the 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
});

Salin selepas log masuk

Mencipta InfoWindow

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!