Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Memaparkan Berbilang Penanda dan Maklumat Windows dengan Mudah dalam Peta Google JS API v3?

Bagaimana untuk Memaparkan Berbilang Penanda dan Maklumat Windows dengan Mudah dalam Peta Google JS API v3?

Mary-Kate Olsenasal: 2024-12-20 17:12:10802semak imbas

How to Easily Display Multiple Markers and Info Windows in Google Maps JS API v3?

Paparan Berbilang Penanda dalam Peta Google JS API v3

Pengenalan

Memaparkan berbilang penanda pada Peta Google tidak mendatangkan kesan yang signifikan cabaran; bagaimanapun, beberapa tutorial mungkin kelihatan terlalu rumit untuk pemula. Artikel ini membentangkan pendekatan yang dipermudahkan untuk merancang penanda dan memaparkan tetingkap maklumat apabila mengklik.

Pendekatan

1. Dapatkan Data Penanda:

Mulakan dengan mendapatkan semula data penanda daripada tatasusunan, seperti yang digambarkan dalam sampel Google:

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

2. Mulakan Peta:

Segerakkan Peta Google baharu dalam elemen div, menyediakan pilihan seperti zum, tengah dan jenis peta.

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

3. Tambah Penanda dan Windows Maklumat:

Gelung melalui tatasusunan lokasi dan buat penanda untuk setiap lokasi. Apabila penanda diklik, paparkan tetingkap maklumat dengan nama lokasi.

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

Kod Contoh

Coretan kod lengkap berikut menunjukkan pelaksanaan:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <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>

Tambahan Pertimbangan

Contoh yang disediakan menggunakan kunci API tetap; ingat untuk menggantikannya dengan anda sendiri.
Sihir penutupan digunakan untuk memastikan data lokasi yang betul dihantar ke tetingkap maklumat.
Rujuk artikel Pusat Pengembang Mozilla untuk pemahaman lanjut tentang penutupan.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Berbilang Penanda dan Maklumat Windows dengan Mudah dalam Peta Google JS API v3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Array for map JS this location display windows zoom

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 Saya Boleh Mengesan Windows Pelayar Tidak Aktif Menggunakan JavaScript?Artikel seterusnya：Bagaimanakah Saya Boleh Mengesan Windows Pelayar Tidak Aktif Menggunakan JavaScript?

Artikel berkaitan

Lihat lagi