Rumah > Artikel > hujung hadapan web > Cara menyediakan peta interaktif menggunakan API Peta Google dalam JavaScript
Cara menyediakan peta interaktif menggunakan API Peta Google dalam JavaScript
- PHPzasal
- 2023-04-26 10:30:37781semak imbas
Dengan pembangunan rangkaian Web, JavaScript, sebagai bahasa pengaturcaraan yang berkuasa, telah menjadi bahagian yang tidak dapat dielakkan. Dalam JavaScript, anda boleh menggunakan API Peta Google untuk membuat peta interaktif. Ini adalah ciri yang sangat berguna, terutamanya dalam perniagaan dalam talian. Dalam artikel ini, kami akan menerangkan cara menyediakan peta interaktif menggunakan API Peta Google dalam JavaScript.
Langkah Pertama: Dapatkan Kunci API Peta Google
Pertama, kita perlu mendapatkan Kunci API Peta Google kita sendiri. Menggunakan kunci API membolehkan kami menggunakan API Peta Google.
Untuk mendapatkan kunci API, mula-mula buat akaun Google Cloud Selepas membuat akaun, kita perlu pergi ke halaman Google Cloud Console, dari situ kita boleh mencipta kunci API Google Maps.
Langkah 2: Buat peta
Seterusnya, kita perlu mencipta peta dalam fail HTML. Ini boleh dilakukan dengan menambah kod berikut dalam fail HTML:
<!DOCTYPE html>
<html>
<head>
<title>设置地图</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* 添加样式，设置地图大小 */
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>这是一个简单的地图</h3>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
zoom: 8
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
Dalam fail HTML di atas, kami telah menggunakan elemen div untuk menetapkan saiz peta. Seterusnya, dalam kod JavaScript, kami menggunakan kunci API bersama-sama dengan latitud dan longitud (YOUR_LATITUDE dan YOUR_LONGITUDE) untuk menetapkan titik tengah dan tahap zum peta. Akhir sekali, kami menghantar fungsi initMap() sebagai fungsi panggil balik kepada API supaya ia akan dipanggil secara automatik apabila API telah selesai memuatkan peta.
Langkah Tiga: Tambah Penanda
API Peta Google juga membolehkan kami menambah penanda pada peta. Kami boleh menetapkan penanda pada peta untuk menandakan lokasi yang menarik.
Seterusnya, kita perlu menambah kod berikut dalam kod JavaScript:
var marker = new google.maps.Marker({
position: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE},
map: map,
title: '这里是我的标记!'
});
Kod di atas akan menetapkan penanda pada peta dan menetapkan tajuk kepada "Inilah penanda saya! " . LATITUD dan LONGITUD ANDA ialah latitud dan longitud titik lokasi yang akan ditanda.
Langkah 4: Tambah tetingkap maklumat
Tetingkap maklumat membolehkan kami menambah lebih banyak maklumat berguna pada tanda. Kami boleh membuka tetingkap maklumat apabila mengklik pada penanda, menunjukkan lebih banyak maklumat.
Seterusnya, kita perlu menambah kod berikut dalam kod JavaScript:
var contentString = '<h3>这是我的标记!</h3><p>这里是更多的信息...</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Kod di atas akan mencipta rentetan yang dipanggil "contentString" yang mengandungi kandungan yang akan dipaparkan dalam maklumat tetingkap Tajuk dan kandungan yang ditunjukkan dalam . Seterusnya, cipta tetingkap maklumat bernama "infowindow", yang mengandungi kandungan rentetan contentString.
Akhir sekali, kami mengikat acara pada penanda supaya tetingkap maklumat terbuka apabila diklik pada penanda.
marker.addListener('click', function() {
infowindow.open(map, marker);
});
Kod di atas akan membuka tetingkap maklumat apabila penyampai diklik.
Ringkasnya, kita dapat melihat cara menggunakan API Peta Google dalam JavaScript untuk menyediakan peta interaktif dan menambah penanda serta tetingkap maklumat. Ciri-ciri ini boleh menyediakan keupayaan pemetaan yang sangat berguna untuk pelbagai jenis aplikasi dalam talian.
Atas ialah kandungan terperinci Cara menyediakan peta interaktif menggunakan API Peta Google dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!