Cara Mudah Menambah Berbilang Penanda dengan Custom InfoWindows pada Peta Google menggunakan Google Maps JS API v3?-tutorial js-php.cn

Cara Mudah Menambah Berbilang Penanda dengan Custom InfoWindows pada Peta Google menggunakan Google Maps JS API v3?

Susan Sarandon

Lepaskan： 2024-12-18 17:00:11

asal

147 orang telah melayarinya

How to Easily Add Multiple Markers with Custom InfoWindows to a Google Map using the Google Maps JS API v3?

Google Maps JS API v3 - Contoh Mudah untuk Berbilang Penanda

Mencipta berbilang penanda pada Peta Google boleh menjadi tugas yang sukar, terutamanya untuk pendatang baru kepada API. Untuk memudahkan proses ini, kami akan menyelidiki contoh mudah yang akan membimbing anda melalui langkah yang diperlukan.

Pertimbangkan tatasusunan data berikut yang disediakan oleh 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

Matlamatnya adalah untuk merancang penanda ini pada peta dan paparkan tetingkap maklumat yang mengandungi nama apabila penanda diklik.

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

Kod ini mencipta peta berpusat di sekitar Sydney, Australia, dengan tahap zum 10. Ia menjana penanda secara dinamik untuk setiap pantai dalam tatasusunan dan setiap penanda memaparkan tetingkap maklumat dengan nama pantai pada klik.

Perhatikan bahawa pendengar acara untuk acara klik menggunakan penutupan untuk mengekalkan nilai penanda dan indeks tatasusunan semasa pelaksanaan fungsi panggil balik.

Dengan mengikuti ini langkah, anda boleh menambah berbilang penanda dengan mudah dengan infoWindows tersuai pada visualisasi Peta Google anda sendiri.

Atas ialah kandungan terperinci Cara Mudah Menambah Berbilang Penanda dengan Custom InfoWindows pada Peta Google menggunakan Google Maps JS API v3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!