Rumah > Artikel > hujung hadapan web > HTML Peta Google
HTML Peta Google
- WBOYasal
- 2024-09-04 16:42:13718semak imbas
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>
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 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 Kami akan menggunakan teg pratakrif kami dalam HTML seperti 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. Di bawah ialah contoh HTML Peta Google: Kod: Output: Kod: Output: Kod: Output: 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. 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!Contoh HTML Peta Google
Contoh #1
<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>
Contoh #2
<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>
Contoh #3
<!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>
Conclusion