Bagaimana untuk Memaparkan Berbilang Penanda dan Maklumat Windows dengan Mudah dalam Peta Google JS API v3?-tutorial js-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-12-20 17:12:10

asal

796 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!