Bagaimana Mudah Melaksanakan Berbilang Penanda dengan InfoWindows pada Peta Google menggunakan JavaScript?-tutorial js-php.cn

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

DDD

Lepaskan： 2024-12-31 04:22:09

asal

901 orang telah melayarinya

How to Easily Implement Multiple Markers with InfoWindows on a Google Map using 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
];

Salin selepas log masuk

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

Salin selepas log masuk

Mencipta Penanda

Untuk mencipta berbilang penanda, kami mengulangi melalui tatasusunan lokasi:

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

Salin selepas log masuk

Menambah Pop-up InfoWindows

Kami mencipta InfoWindow untuk setiap penanda untuk memaparkan nama pantai apabila diklik:

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

Salin selepas log masuk

Hasil Lengkap

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

// 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>

Salin selepas log masuk

Dengan mengikuti langkah ini, anda boleh memplot berbilang penanda dengan mudah dengan InfoWindows pop timbul pada Peta Google.

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!