Bagaimana Mudah Melaksanakan Berbilang Penanda dengan InfoWindows pada Peta Google menggunakan JavaScript?

Pelaksanaan Berbilang Penanda Peta Google yang Mudah dalam JavaScript

Dalam tutorial ini, kami akan meneroka pendekatan yang dipermudahkan untuk mencipta berbilang penanda pada Peta Google .

Ikhtisar

Untuk pemula meneroka API Peta Google, ia boleh kelihatan rumit untuk memplot berbilang penanda pada peta. Tutorial ini menyediakan penyelesaian yang mudah dan mudah.

Contoh Data

Mari kita gunakan tatasusunan data sampel Google:

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

Mencipta Peta

Pertama, kami memulakan Google Peta:

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

Mencipta Penanda

Untuk mencipta berbilang penanda, kami mengulangi melalui tatasusunan lokasi:

var marker, i;
for (i = 0; i <p><strong>Menambah Pop-up InfoWindows</strong></p><p>Kami mencipta InfoWindow untuk setiap penanda untuk memaparkan nama pantai apabila diklik:</p><pre class="brush:php;toolbar:false">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));

Hasil Lengkap

Coretan kod penuh di bawah termasuk semua elemen yang diperlukan untuk kefungsian berbilang penanda:

// HTML with map container

 
 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
 

  <div> <p>Dengan mengikuti langkah ini, anda boleh memplot berbilang penanda dengan mudah dengan InfoWindows pop timbul pada Peta Google.</p>
</div>

Atas ialah kandungan terperinci Bagaimana Mudah Melaksanakan Berbilang Penanda dengan InfoWindows pada Peta Google menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!