HTML Peta Google-html tutorial-php.cn

Dalam HTML, kami telah membincangkan beberapa sifat dan atribut dengan elemen dalam artikel sebelumnya. Ia mempunyai banyak ciri untuk menarik pengguna dalam talian dalam teknologi web. Peta Google itu adalah salah satu ciri Syarikat Google kerana kami akan menggunakan peta Google yang sama dalam kod HTML kami untuk memaparkan lokasi di tapak web. Ia digunakan terutamanya untuk laman web syarikat untuk mengenal pasti lokasi dengan tepat di mana mereka berada di kawasan tersebut. Ia dipanggil HTML dengan menggunakan bahasa javascript untuk mencari dan menetapkan latitud dan longitud untuk Geo-lokasi untuk syarikat.

Sintaks:

HTML mempunyai sintaks umum untuk setiap teg untuk membangunkan kandungan halaman web.

<html>
<body>
<script src="google-api url">
function()
{
}
</script>
</body>
</html>

Salin selepas log masuk

Sintaks untuk HTML peta Google sedang menambah Google API dalam teg skrip kemudian kami akan menetapkan geo-lokasi kandungan halaman web. Kami boleh menyelaraskan dan menggunakan beberapa elemen HTML dan atribut ke halaman web untuk menarik pengguna, yang akan menjadi pertumbuhan syarikat dan perniagaan. Kami akan menyesuaikan halaman web dengan persekitaran mesra pengguna berdasarkan keperluan perniagaan.

Bagaimana untuk Membuat Peta Google dalam HTML?

Kami akan memanggil API peta Google pada halaman web kami menggunakan tag. Kami boleh menetapkan penanda selepas menambah peta Google pada halaman HTML terutamanya; ia mengandungi tiga langkah. 1. Kami akan membuat halaman HTML terlebih dahulu, 2. Kemudian tambah peta dengan penanda. 3. akhirnya, kami akan mendapat kunci API untuk mengesahkan lokasi. Kami akan membuat halaman HTML dengan teg pratakrif kami berdasarkan prospektus tersuai dan juga menyelaraskan atribut gaya dalam halaman jika mereka perlu menggunakan

unsur; kami akan mengasingkan kandungan dengan paparan modul berasingan dalam tapak web.

Menambah peta dengan penanda ialah tahap kedua untuk mencipta peta Google pada halaman web. Bahagian ini akan menerangkan cara memuatkan peta dalam API javascript ke dalam halaman web, dan juga kami akan menulis fungsi javascript kami yang menggunakan API untuk menambah peta dengan penanda untuk halaman web. Apabila kami menambah API dalam teg skrip, parameter panggil balik akan melaksanakan beberapa syarat seperti fungsi initMap selepas skrip memuatkan API peta. Jika kami menggunakan atribut async dalam skrip halaman web, penyemak imbas membenarkan API memuatkan baki kandungan halaman pemaparan halaman web. Dalam teg Skrip URL API peta Google, kami akan melihat parameter utama yang mengandungi kunci API. Kami tidak akan menetapkan sebarang kunci untuk bahagian ini akan menjana kunci API secara automatik, dan kemudian parameter panggil balik dipanggil menggunakan fungsi initMap dengan parameter.

Fungsi initMap akan digunakan untuk memulakan dan menambah peta apabila kami memuatkan halaman web dengan menggunakan fungsi javascript dengan tag skrip tag HTML. Kami akan memanggil beberapa kaedah lalai dalam fungsi, seperti getElementById() ialah salah satu fungsi dalam perpustakaan javascript untuk mencari lokasi peta pada halaman web dengan mengasingkan

tag dalam HTML. Dalam fungsi Skrip, kami akan mencipta contoh peta menggunakan operator baharu seperti yang sama dalam bahasa pengaturcaraan Java, google.maps.Map() baharu ialah sintaks untuk mencipta tika peta Google dalam fungsi javascript.

Kami akan menggunakan teg pratakrif kami dalam HTML seperti

, navigasi sisi untuk tempat kami mencari peta dalam halaman web; peta akan menyelaraskan halaman HTML dengan susunan seperti latitud dan longitud pertama. Kami akan menetapkan pilihan zum dalam saiz minimum dan maksimum serta navigasi potret dan landskap dengan halaman web. Jika sifat zum telah menetapkan nilai seperti 0 ialah bahagian paling rendah dalam paparan bahagian zum, dan ia memaparkan keseluruhan peta pada satu halaman. Kita boleh menetapkan nilai yang lebih tinggi dalam sifat zum dengan imej resolusi tinggi pada halaman web. Kami akan menetapkan kedudukan penanda pada halaman web dengan menggunakan sifat kedudukan.

Kami akan mendapat kunci API dalam langkah ketiga apabila kami mencipta peta pada halaman web; kunci akan digunakan untuk mengesahkan peta dan fungsi javascript dalam kunci API tersuai kami. Menggunakan alat konsol Google Cloud Platform yang mengandungi pilihan untuk membuat kunci API anda.

Contoh HTML Peta Google

Di bawah ialah contoh HTML Peta Google:

Contoh #1

Kod:

<html>
<body>
<div id="m" style="width:402px;height:433px;background:green"></div>
<script>
function sample() {
var m1 = {
center: new google.maps.LatLng(52.3, -0.14),
zoom: 13,
mapss: google.maps.MapTypeId.HYBRID
}
var m2 = new google.maps.Map(document.getElementById("m"), m1);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>

Salin selepas log masuk

Output:

HTML Peta Google

Contoh #2

Kod:

<html>
<head>
<style>
#m {
height: 403px;
width: 102%;
}
</style>
</head>
<body>
<div id="m"></div>
<script>
function initMap() {
var loc = {lat: -26.334, lng: 132.034};
var m1 = new google.maps.Map(
document.getElementById('m'), {zoom: 3, center: loc});
var mar = new google.maps.Marker({position: loc, map: m1});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

Salin selepas log masuk

Output:

HTML Peta Google

Contoh #3

Kod:

<!DOCTYPE html>
<html>
<body>
<div id="m1" style="width:402px;height:303px;"></div>
<br>
<div id="m2" style="width:402px;height:303px;"></div>
<br>
<div id="m3" style="width:402px;height:303px;"></div>
<br>
<div id="m4" style="width:402px;height:303px;"></div>
<script>
function sample() {
var choice1 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.ROADMAP
};
var choice2 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.SATELLITE
};
var choice3 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.HYBRID
};
var choice4 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.TERRAIN
};
var i = new google.maps.Map(document.getElementById("m1"),choice1);
var j = new google.maps.Map(document.getElementById("m2"),choice2);
var k = new google.maps.Map(document.getElementById("m3"),choice3);
var l = new google.maps.Map(document.getElementById("m4"),choice4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>

Salin selepas log masuk

Output:

HTML Peta Google

Contoh di atas, kami menggunakan Peta Google dalam tiga gaya berbeza dengan elemen HTML, atribut dan fungsi javascript yang dipratakrifkan untuk memanggil API peta dalam halaman web.

Conclusion

Utilisation de l'API cartographique du document pour identifier l'emplacement dans la fonction javascript. C’est entièrement basé sur les capteurs. Lorsque nous utilisons le mobile dans Google Maps, nous permettrons à l'emplacement de récupérer uniquement les données d'un emplacement source vers la direction de destination. Nous vérifions également si l'application accepte le capteur pour détecter l'emplacement de l'utilisateur et vérifie le problème de compatibilité du navigateur. Le paramètre du capteur n'est pas utilisé pendant des durées plus longues.

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

Label berkaitan：

html html5 HTML Tutorial HTML Properties HTML tags

sumber：php

Artikel sebelumnya：Butang Set Semula HTML Artikel seterusnya：Elemen Sembunyikan HTML

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang