Cara Menambah Peta ke Apl Anda: Benam, Peta Interaktif dan Pencari Lokasi Kedai

Untuk menambah peta ke apl anda, mula-mula tentukan sama ada anda memerlukan benam statik (satu lokasi dengan penanda, seperti “cari kedai kami”) atau peta interaktif (banyak penanda daripada data anda, penapis, pengelompokan, “berhampiran saya”). Bagi satu lokasi, peta benam ialah cara terpantas dan, dengan Maps Embed API Google, percuma. Bagi peta interaktif, gunakan perpustakaan peta JavaScript — Google Maps JavaScript API, Mapbox GL JS, atau Leaflet sumber terbuka dengan penyedia jubin — simpan latitud dan longitud setiap tempat dalam pangkalan data anda, dan hadkan kunci API anda kepada domain anda sendiri. Butiran penyedia di bawah diambil daripada dokumentasi penyedia masing-masing setakat September 2026.

Peta jenis apa yang anda perlukan?

Kebanyakan laman perniagaan kecil hanya memerlukan baris pertama. Direktori, pasar dan laman senarai memerlukan baris ketiga dan keempat.

Pilihan anda

Google Maps Platform

Panduan memulakan Google menyatakan anda mesti mencipta projek Cloud dengan pengebilan didayakan dan mendayakan API yang anda mahu. Harga bayar-mengikut-guna Google memberikan SKU Essentials, termasuk Dynamic Maps, had 10,000 peristiwa percuma sebulan, dan menyenaraikan Dynamic Maps pada $7.00 setiap 1,000 peristiwa melebihi itu (pada tahap volum pertama). SKU Maps Embed disenaraikan sebagai tanpa had dan percuma. Google juga menjual pelan langganan bulanan. Semak harga Google Maps Platform untuk angka semasa.

Mapbox

Halaman harga Mapbox menyenaraikan 50,000 muatan peta bulanan percuma untuk Mapbox GL JS di web, kemudian $5.00 setiap 1,000 muatan. Lihat harga Mapbox.

Leaflet dan OpenStreetMap

Leaflet menerangkan dirinya sebagai perpustakaan JavaScript sumber terbuka untuk peta interaktif mesra mudah alih, kira-kira 42 KB JavaScript. Ia memerlukan jubin peta (imej peta) dari suatu tempat. Pelayan jubin awam OpenStreetMap kelihatan menarik, tetapi dasar penggunaan jubin memerlukan atribusi yang kelihatan, melarang muat turun pukal, tidak menawarkan jaminan perkhidmatan, dan memberi amaran kepada perkhidmatan komersial bahawa akses boleh ditarik balik. Untuk produk sebenar, gunakan sumber jubin komersial atau dihoskan sendiri yang berfungsi dengan Leaflet.

Kunci API: awam, tetapi terhad

Kunci peta yang digunakan dalam pelayar boleh dilihat oleh sesiapa yang membuka halaman anda. Ini dijangka, tetapi bermakna seseorang boleh menyalin kunci anda dan menjalankan penggunaan atas bil anda. Panduan keselamatan Google ialah menambah sekatan rujukan laman web (HTTP referrer) yang menyenaraikan domain anda, dan sekatan API supaya kunci hanya berfungsi untuk API yang anda gunakan.

Kunci untuk perkhidmatan pelayan — contohnya geokod beribu alamat — hendaklah berasingan dan disimpan dalam rahsia pelayan, bukan dalam halaman. Tetapkan juga amaran bajet atau kuota dalam konsol penyedia supaya kesilapan tidak boleh menjadi bil yang besar.

Geokod: tukar alamat kepada koordinat sekali sahaja

Peta memplot latitud dan longitud, bukan alamat. Menukar alamat kepada koordinat dipanggil geokod, dan kebanyakan penyedia mengenakan bayaran bagi setiap permintaan. Corak yang cekap:

1. Apabila senarai disimpan, geokodkan alamatnya di pelayan.
2. Simpan latitud dan longitud dalam pangkalan data.
3. Peta membaca koordinat tersimpan; ia tidak sekali-kali membuat geokod semasa paparan halaman.

Semak terma setiap penyedia mengenai berapa lama anda boleh menyimpan hasil geokod; ia berbeza-beza.

Contoh prompt

Satu peta benam:

Pada halaman Hubungi, tambahkan peta Google benam yang menunjukkan alamat kami (12 High Street, Leeds) menggunakan Maps Embed API dengan kunci dalam GOOGLE_MAPS_EMBED_KEY. Tambahkan pautan “Dapatkan arah” di bawahnya. Jadikannya lebar penuh pada telefon dan muatkan secara malas (lazy-load).

Peta interaktif bagi senarai:

Tambahkan latitud dan longitud pada jadual senarai. Apabila senarai dicipta atau alamatnya berubah, geokodkan di pelayan dengan kunci dalam GEOCODING_API_KEY dan simpan koordinat. Pada halaman Lihat, tunjukkan peta dengan satu penanda bagi setiap senarai menggunakan Leaflet, dengan pengelompokan apabila penanda bertindih. Mengklik penanda menunjukkan tajuk, harga dan pautan. Peta dan senarai hendaklah menggunakan penapis yang sama.

“Berhampiran saya”:

Tambahkan butang “Berhampiran saya” yang meminta lokasi pelawat dan menunjukkan senarai dalam 10 km, disusun mengikut jarak. Jika mereka menolak akses lokasi, benarkan mereka menaip nama bandar.

Langkah demi langkah

1. Pilih jenis peta daripada jadual di atas.
2. Cipta akaun penyedia dan projek, dan dayakan hanya API yang anda perlukan.
3. Cipta kunci: kunci pelayar yang dihadkan kepada domain anda (termasuk domain pratonton semasa membina) dan, jika perlu, kunci pelayan untuk geokod.
4. Simpan kunci sebagai rahsia dan minta pembina anda menggunakannya; kunci pelayar tetap dihadkan walaupun ia berakhir dalam halaman.
5. Simpan koordinat bagi setiap tempat dalam pangkalan data anda.
6. Bina peta: penanda, tetingkap timbul, pengelompokan, dan zum lalai yang munasabah.
7. Pasangkannya dengan senarai. Peta sahaja sukar digunakan pada telefon dan tidak boleh diakses oleh pembaca skrin. Paparkan hasil yang sama sebagai senarai.
8. Tetapkan amaran bajet dalam konsol penyedia.
9. Terbitkan dan uji pada domain langsung, kerana sekatan rujukan selalunya menghalang peta sehingga domain langsung ditambah.

Kesilapan biasa

• Kunci tanpa sekatan. Sesiapa sahaja boleh menggunakan semula di laman mereka sendiri.
• Geokod pada setiap paparan halaman. Perlahan dan mahal; geokodkan sekali apabila disimpan.
• Terlupa domain langsung dalam sekatan kunci. Berfungsi dalam pratonton, kotak kelabu kosong dalam pengeluaran.
• Susun atur hanya peta. Penanda tanpa senarai sukar digunakan pada skrin kecil dan tidak boleh diakses.
• Ratusan penanda tanpa pengelompokan. Tidak boleh dibaca dan perlahan.
• Atribusi yang hilang. Kebanyakan penyedia peta dan jubin memerlukannya, dan menyembunyikannya melanggar terma mereka.
• Meminta lokasi semasa halaman dimuatkan. Minta hanya apabila pengguna mengetik “Berhampiran saya”.

Senarai semak

• Jenis peta yang betul dipilih untuk tugas itu
• Kunci pelayar dihadkan kepada domain dan API yang diperlukan
• Kunci pelayan disimpan dalam rahsia
• Koordinat disimpan dalam pangkalan data, digeokod sekali
• Hasil juga ditunjukkan sebagai senarai
• Pengelompokan untuk banyak penanda
• Atribusi kelihatan
• Amaran bajet ditetapkan dengan penyedia
• Diuji pada domain yang diterbitkan dan pada telefon

Menambah peta dengan Mythex

Mythex tidak mempunyai integrasi peta terbina dalam; anda membawa kunci penyedia sendiri, menambahkannya sebagai rahsia projek (atau menampalnya apabila ejen menunjukkan kad rahsia), dan meminta peta dalam sembang, seperti yang diterangkan dalam Integrasikan mana-mana API. Koordinat disimpan dalam pangkalan data projek. Ingat untuk menambah kedua-dua domain pratonton dan domain yang diterbitkan anda ke dalam sekatan rujukan laman web kunci, dan terbitkan semula selepas menukar rahsia.

Peta biasanya berada di sebelah carian dan senarai: lihat cara menambah carian ke apl anda, cara membina laman web direktori dan cara membina laman web perniagaan kecil.

Soalan lazim