Bermula dengan Resipi Peta Google

Artikel ini meneroka pelbagai kaedah untuk mengintegrasikan peta Google ke laman web, memberi tumpuan kepada jenis yang paling biasa: peta statik, imej pandangan jalan, peta tertanam, dan peta JavaScript. Walaupun API dan perkhidmatan maju wujud, panduan ini menumpukan pada integrasi laman web asas. Untuk penerokaan yang mendalam, rujuk dokumentasi API Google Maps rasmi.

Konsep Utama:

• Jenis peta: Peta Google menawarkan jenis peta yang pelbagai, masing -masing sesuai dengan keperluan khusus. Peta statik menyediakan peta berasaskan imej yang mudah, manakala peta tertanam menawarkan interaktiviti asas melalui iframes. Peta JavaScript menyediakan ciri penyesuaian dan dinamik yang paling luas.
• Kekunci API: Menggunakan Google Maps API memerlukan kunci API, boleh didapati secara percuma dengan had penggunaan. Trafik yang lebih tinggi memerlukan membeli kuota tambahan. Menggunakan kekunci berasingan untuk laman web yang berbeza adalah disyorkan.
Peta JavaScript (fleksibiliti maksimum):
• Peta JavaScript API membuka ciri -ciri canggih seperti penempatan penanda, tingkap maklumat, geokod, heatmaps, dan analisis geometri.
Mendapatkan kunci API:

Seperti yang dimandatkan oleh Google, semua aplikasi API peta memerlukan kunci API. Kunci ini membolehkan pemantauan penggunaan dan memudahkan hubungan dari Google jika perlu. Melebihi had penggunaan memerlukan membeli kuota tambahan.

mengakses Konsol Platform Awan Google (memerlukan akaun Google).

Buat projek baru.
Dayakan API yang diperlukan (Peta Embed API, Peta JavaScript API, API Peta Statik, dan API Imej View Street biasanya digunakan).
Menjana kunci API awam yang baru di bawah "kelayakan," memilih pilihan "Kunci Penyemak imbas". Secara pilihan, hadkan kunci kepada domain tertentu.

ingat: Elakkan menggunakan kunci yang sama di beberapa laman web. Buat projek dan kunci berasingan untuk setiap.

peta statik:

Peta statik menawarkan integrasi yang paling mudah. Mereka dihasilkan melalui permintaan URL yang mengembalikan imej peta, Embeddable menggunakan tag . Parameter penting termasuk kunci API, pusat peta, dan saiz imej.

contoh (ganti <img alt="Bermula dengan Resipi Peta Google" > dengan kunci sebenar anda):

__YOUR_API_KEY__

Street View Images:

<code class="language-html"><img src="https://maps.googleapis.com/maps/api/staticmap?center=Piazza%20Mattei,+Rome+Italy&size=600x300&key=__YOUR_API_KEY__" alt="Rome, Piazza Mattei"></code>

Sama seperti peta statik, imej Street View memberikan imejan peringkat jalan statik. Parameter mengawal sudut kamera, medan pandangan, dan padang.

peta tertanam:

Peta tertanam meningkatkan interaktiviti menggunakan iframes. Mereka menawarkan pelbagai mod: tempat (penanda di lokasi), arahan (laluan antara mata), carian (hasil carian), dan paparan (peta asas).

JavaScript Maps:

Peta JavaScript menyediakan tahap penyesuaian tertinggi. Bahagian ini menunjukkan memaparkan tempat, menambah penanda, dan tetingkap maklumat.

Sertakan API JavaScript:

<code class="language-html"><img src="https://maps.googleapis.com/maps/api/staticmap?center=Piazza%20Mattei,+Rome+Italy&size=600x300&key=__YOUR_API_KEY__" alt="Rome, Piazza Mattei"></code>

2. Buat bekas peta ().

   <div id="map"></div>

Mulakan peta menggunakan JavaScript:

<code class="language-html"></code>

Kesimpulan:

Gambaran keseluruhan ini menyediakan asas untuk menggunakan Peta Google di laman web. Kemungkinan melangkaui asas-asas ini, merangkumi ciri-ciri canggih seperti geometri, geokod, dan integrasi data masa nyata. Ingatlah untuk berunding dengan dokumentasi rasmi untuk butiran komprehensif dan teknik lanjutan.

Atas ialah kandungan terperinci Bermula dengan Resipi Peta Google. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!