Menambah penanda ke peta menggunakan API Peta Google dan Artikel JQuery

Untuk kod Google Maps, kita boleh menghubungkan terus ke pelayan Google:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Parameter Sensor = Palsu Menentukan bahawa kita tidak mahu menggunakan sensor (seperti pencari GPS) untuk menentukan lokasi pengguna.

Sekarang kita mempunyai perpustakaan asas kita, kita boleh mula membina fungsi kita.

menggariskan skrip

mari kita mulakan dengan kerangka kod peta kami:

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

Kami membungkus semua fungsi peta kami di dalam objek JavaScript yang dipanggil MyMap, yang akan membantu mengelakkan konflik yang berpotensi dengan skrip lain pada halaman. Objek mengandungi dua pembolehubah dan dua fungsi. Pembolehubah peta akan menyimpan rujukan kepada objek Peta Google yang akan kami buat, dan pemboleh ubah batas akan menyimpan kotak sempadan yang mengandungi semua penanda kami. Ini akan berguna selepas kami menambah semua penanda, apabila kami mahu mengezum peta sedemikian rupa sehingga mereka semua kelihatan pada masa yang sama.

Sekarang untuk kaedah: init akan mencari elemen pada halaman dan memulakannya sebagai peta Google baru dengan tahap pusat dan zoom yang diberikan. Sementara itu, placemarkers mengambil nama fail XML dan akan memuatkan dalam menyelaraskan data dari fail tersebut untuk meletakkan satu siri penanda pada peta.

Memuatkan peta

Sekarang kita mempunyai struktur asas di tempat, mari kita tulis fungsi init kami:

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
  this.bounds = new google.maps.LatLngBounds();}

Kami membuat objek literal untuk mengandungi satu set pilihan, menggunakan parameter yang diluluskan ke kaedah. Kemudian kami memulakan dua objek yang ditakrifkan dalam API Peta Google -peta dan latlngbounds -dan berikannya kepada sifat -sifat objek MyMap kami yang kami buat sebelum ini untuk tujuan ini.

Pembina peta diluluskan elemen DOM untuk digunakan sebagai peta pada halaman, serta satu set pilihan. Pilihan yang telah kami sediakan, tetapi untuk mengambil elemen DOM yang kami perlukan untuk mengambil rentetan pemilih yang diluluskan, dan gunakan fungsi JQuery $ untuk mencari item pada halaman. Kerana $ mengembalikan objek jQuery dan bukannya node dom mentah, kita perlu menggerudi menggunakan [0]: ini membolehkan kita mengakses node dom "telanjang". LL mempunyai peta kami yang dipaparkan di halaman, dan mempunyai kotak sempadan kosong, bersedia untuk diperluas ketika kami menambah penanda kami.

Menambah penanda

Bercakap di mana, mari kita lihat fungsi placemarker:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Fungsi ini sedikit lebih rumit, tetapi mudah untuk memahami. Mula -mula kita panggil kaedah $ .get JQuery untuk melaksanakan permintaan Ajax Get. Kaedah ini mengambil dua parameter: URL untuk meminta (dalam kes ini, fail XML tempatan kami), dan fungsi panggil balik untuk dilaksanakan apabila permintaan itu selesai. Fungsi itu, pada gilirannya, akan diluluskan tindak balas kepada permintaan, yang dalam kes ini akan menjadi XML kami.

jQuery merawat XML sama seperti html, jadi kita boleh menggunakan $ (xml) .find ('penanda'). Setiap (...) untuk gelung ke atas setiap elemen penanda dalam tindak balas XML dan buat penanda pada peta untuk setiap satu.

Kami ambil nama dan alamat penanda, maka kami membuat objek Latlng baru untuk setiap satu, yang kami berikan kepada pemboleh ubah titik. Kami melanjutkan kotak terikat untuk memasukkan titik itu, dan kemudian membuat penanda di lokasi tersebut di peta.

Kami mahu gelembung alat tool untuk muncul apabila pengguna mengklik pada penanda tersebut, dan kami mahu ia mengandungi nama dan alamat lokasi kami. Oleh itu, kita perlu menambah pendengar acara kepada setiap penanda menggunakan kaedah API API.AddListener MAPS. Sebelum kita berbuat demikian, kita akan membuat alat tool itu sendiri. Dalam API Google Maps, jenis alat ini dipanggil Infowindow. Oleh itu, kami membuat Infowindow baru, dan juga menyediakan beberapa HTML untuk mengisi dengan maklumat yang diperlukan. Kemudian kami menambah pendengar acara kami. Pendengar akan menyala setiap kali salah satu penanda diklik, dan kedua -duanya menetapkan kandungan Infowindow dan membukanya supaya dapat dilihat pada peta.

Akhirnya, selepas menambahkan semua penanda dan pengendali acara yang berkaitan dan Infowindows, kami sesuai dengan peta kepada penanda dengan menggunakan kaedah FitBounds API Maps. Apa yang kita perlukan untuk lulus adalah objek batas yang telah kita luangkan untuk memasukkan setiap penanda. Dengan cara ini, tidak kira di mana peta telah dizoom atau panned, ia akan sentiasa kembali ke tahap zoom yang ideal yang merangkumi semua penanda kami.

mengikat semuanya bersama

Sekarang kod kami sudah siap, mari kita beraksi. Kami akan menggunakan JQuery's $ ('Dokumen'). Sedia menunggu sehingga halaman dimuatkan, kemudian memulakan peta, menunjuk ke elemen halaman dengan ID peta menggunakan rentetan pemilih #Map:

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

Kami juga melampirkan pendengar acara klik ke butang #Showmarkers. Apabila butang itu diklik, kami memanggil fungsi placemarker kami dengan URL ke fail XML kami. Berikan putaran dan anda akan melihat satu set penanda tersuai muncul di peta. Kami telah diliputi di sini, jadi pastikan anda menyemak dokumentasi untuk merasakan segala yang mungkin.

Jika anda suka membaca siaran ini, anda akan suka dipelajari; Tempat untuk mempelajari kemahiran dan teknik segar dari Sarjana. Ahli -ahli mendapat akses segera ke semua eBook SitePoint dan kursus dalam talian interaktif, seperti asas -asas jQuery.

Soalan Lazim (Soalan Lazim) Mengenai Google Maps API dengan JQuery

Bagaimana saya boleh mengintegrasikan API Peta Google dengan jQuery? Pertama, anda perlu memasukkan skrip API Google Maps dalam fail HTML anda. Kemudian, anda perlu memulakan peta dalam fail JavaScript anda. Anda boleh menggunakan jQuery untuk memilih elemen HTML di mana anda ingin memaparkan peta. Kemudian, anda boleh menggunakan kaedah API Google Maps untuk menyesuaikan peta mengikut keperluan anda. Ingat untuk menggantikan 'your_api_key' dengan kunci API sebenar anda dalam tag skrip.

Bagaimana saya boleh menyesuaikan peta yang dipaparkan menggunakan API Google Maps dan JQuery? peta. Anda boleh menetapkan tahap zoom, memusatkan peta di lokasi tertentu, dan pilih jenis peta untuk dipaparkan. Anda juga boleh menambah penanda, tingkap maklumat, dan pendengar acara ke peta. Semua penyesuaian ini boleh dilakukan dalam fail JavaScript di mana anda memulakan peta.

Bagaimana saya boleh menambah penanda ke peta? .maps.marker kelas dan menentukan kedudukan kedudukan dan peta dalam pembina. Pilihan kedudukan harus menjadi objek Google.maps.latlng yang mewakili koordinat geografi penanda. Pilihan peta mestilah objek Google.maps.map yang mewakili peta di mana penanda harus dipaparkan. Penanda dengan membuat contoh baru kelas Google.maps.infowindow dan menentukan pilihan kandungan dalam pembina. Pilihan kandungan harus menjadi rentetan yang mewakili kandungan HTML yang akan dipaparkan dalam tetingkap INFO. Kemudian, anda boleh menggunakan kaedah terbuka objek tetingkap maklumat untuk memaparkan tetingkap maklumat apabila penanda diklik.

Bagaimana saya boleh menambah pendengar acara ke penanda? Ditambah kepada penanda dengan menggunakan kaedah AddListener kelas Google.maps.event. Hujah pertama kaedah AddListener harus menjadi objek penanda, hujah kedua haruslah nama peristiwa itu, dan argumen ketiga harus menjadi fungsi yang akan dilaksanakan ketika peristiwa itu terjadi. Jenis peta yang dipaparkan?

Jenis peta yang dipaparkan boleh diubah dengan menetapkan pilihan MapTypeid objek Map. Pilihan MapTypeid mestilah salah satu daripada nilai berikut: Google.maps.maptypeid.roadmap, google.maps.maptypeid.satellite, google.maps.maptypeid.hybrid, atau google.maps.maptypeid.terrain.

Bagaimana saya boleh menetapkan tahap zum peta?

Tahap zum peta boleh ditetapkan dengan menetapkan pilihan zoom objek peta. Pilihan zoom harus menjadi nombor yang mewakili tahap zoom. Semakin tinggi bilangannya, semakin dekat zoom.

Bagaimana saya boleh memusatkan peta di lokasi tertentu? objek. Pilihan Pusat mestilah objek Google.maps.latlng yang mewakili koordinat geografi lokasi. diperoleh dari konsol Platform Cloud Google. Anda perlu membuat projek baru, membolehkan Google Maps JavaScript API, dan membuat kunci API baru. dikendalikan dengan menggunakan kaedah addDomListener kelas Google.maps.event. Hujah pertama kaedah AddDomListener harus menjadi objek tetingkap, hujah kedua harus menjadi peristiwa 'ralat', dan argumen ketiga harus berfungsi untuk dilaksanakan ketika ralat terjadi.

Atas ialah kandungan terperinci Menambah penanda ke peta menggunakan API Peta Google dan Artikel JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!