cari

Rumah >hujung hadapan web >tutorial js >Bagaimana Mudah Melaksanakan Berbilang Penanda dengan InfoWindows pada Peta Google menggunakan JavaScript?

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

DDD
DDDasal
2024-12-31 04:22:09906semak imbas

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

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 < locations.length; i++) {
  marker = new google.maps.Marker({
    position: { lat: locations[i][1], lng: locations[i][2] },
    map: map
  });
}

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

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>

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!

JavaScript Array for using map this display
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimanakah `let` dan `const` Berbeza daripada `var` dalam JavaScript Hoisting?Artikel seterusnya：Bagaimanakah `let` dan `const` Berbeza daripada `var` dalam JavaScript Hoisting?

Artikel berkaitan

Lihat lagi