Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Memplot Berbilang Penanda dengan Mudah dengan Windows Maklumat pada Peta Google Menggunakan API JavaScript v3?

Bagaimanakah Saya Boleh Memplot Berbilang Penanda dengan Mudah dengan Windows Maklumat pada Peta Google Menggunakan API JavaScript v3?

Mary-Kate Olsenasal: 2024-12-23 15:48:12760semak imbas

How Can I Easily Plot Multiple Markers with Info Windows on a Google Map Using the JavaScript API v3?

Permudahkan Plot Berbilang Penanda dalam Peta Google JS API v3

Apabila bekerja dengan API JavaScript Peta Google, memplot berbilang penanda selalunya memerlukan pelaksanaan yang rumit . Artikel ini menyediakan penyelesaian yang mudah untuk pemula yang ingin memaparkan tatasusunan penanda dengan tetingkap maklumat yang disertakan.

Masalah:
Mari kita pertimbangkan tatasusunan lokasi dengan nama, koordinat yang sepadan. , dan nilai rujukan. Matlamatnya adalah untuk meletakkan penanda bagi setiap lokasi pada peta dan memaparkan tetingkap maklumat dengan nama apabila klik penanda.

Penyelesaian:

HTML dan CSS:

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

JavaScript:

    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));
    }
  </script>
</body>
</html>

Penjelasan:

Buat peta dan tetingkap maklumat untuk memaparkan maklumat penanda.
Lelaran melalui tatasusunan lokasi dan buat objek penanda untuk setiap lokasi.
Tambahkan penanda pada peta.
Gunakan pendengar acara untuk mengaitkan tetingkap maklumat dengan setiap penanda, memaparkan nama lokasi apabila diklik.

Keputusan:

Setelah dilaksanakan, kod menjana Peta Google dengan berbilang penanda yang mewakili lokasi daripada tatasusunan input. Mengklik mana-mana penanda membuka tetingkap maklumat yang memaparkan namanya.

Nota Penutupan:

Kod menggunakan penutupan untuk menghantar penanda dan indeks lokasi sebagai hujah kepada pendengar acara . Jika tidak biasa dengan penutupan, Mozilla's Dev Center menawarkan panduan berguna tentang topik tersebut.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memplot Berbilang Penanda dengan Mudah dengan Windows Maklumat pada Peta Google Menggunakan API JavaScript v3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html Array Object if for require using Event map JS this location display input windows

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：Bagaimana Saya Boleh Memanggil Kaedah Komponen Anak daripada Komponen Induk dalam React?Artikel seterusnya：Bagaimana Saya Boleh Memanggil Kaedah Komponen Anak daripada Komponen Induk dalam React?

Artikel berkaitan

Lihat lagi