Asas Peta Google
Peta Google Asas
Membuat Peta Google yang ringkas
Sekarang mari kita buat Peta Google yang ringkas.
Berikut ialah Peta Google yang menunjukkan London, UK:
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Running Instance»
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
Analisis Contoh
Kami menggunakan contoh di atas untuk menganalisis proses penciptaan Peta Google.
Mengapa aplikasi perlu mengisytiharkan HTML5?
Kebanyakan penyemak imbas menggunakan "mod piawai" halaman pemaparan dokumen HTML5 , yang bermakna aplikasi anda serasi dengan semua penyemak imbas utama.
Selain itu, jika tiada teg DOCTYPE, penyemak imbas akan menggunakan mod campuran (mod quirks) untuk memaparkan kandungan halaman.
Petua: Perlu diingat bahawa sesetengah CSS dalam "mod campuran" tidak boleh digunakan dalam mod standard. Dalam aplikasi tertentu, semua saiz berasaskan peratusan mesti diwarisi daripada elemen blok induk. Jika tiada saiz dinyatakan dalam modul induk, nilai lalai ialah 0 x 0 piksel. Jika anda ingin menggunakan peratusan, anda boleh mengisytiharkannya dalam teg <style> seperti ini:
html {height:100 % }
badan {height:100%;margin:0; padding:0}
#googleMap {height:100%}
</style>
Gaya ini pernyataan Menunjukkan bahawa modul peta (GoogleMap) harus Ketinggian HTML ialah 100%.
Tambahkan Kunci API Peta Google
Dalam contoh berikut, API Peta Google mesti disertakan dalam teg <skrip> pertama:
Letakkan kunci API yang dijana oleh google dalam parameter key (key=YOUR_API_KEY).
Parameter sensor diperlukan dan menentukan sama ada aplikasi menggunakan sensor (serupa dengan navigasi GPS) untuk mencari lokasi pengguna. Nilai parameter boleh ditetapkan kepada benar atau palsu.
HTTPS
Jika aplikasi anda ialah aplikasi HTTP (HTTPS: HTTP Secure) yang selamat, anda boleh menggunakan HTTPS untuk memuatkan Google API Peta:
Pemuatan tak segerak
Begitu juga, kami juga boleh memuatkan API Peta Google selepas halaman dimuatkan sepenuhnya.
Contoh berikut menggunakan window.onload untuk memuatkan Peta Google selepas halaman dimuatkan sepenuhnya. Fungsi loadScript() mencipta teg <skrip> API Peta Google. Juga pada penghujung teg ditambah callback=initialize parameter, initialize() sebagai fungsi panggil balik akan dilaksanakan selepas API dimuatkan sepenuhnya:
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function loadScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
</body>
</html>Running Instance »
Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian
Tentukan atribut peta
Sebelum memulakan peta, kita perlu untuk mencipta Objek atribut Peta untuk mentakrifkan beberapa sifat peta:
center:new google.maps.LatLng(51.508742,-0.120850),
zum:7,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
pusat (titik tengah)
Atribut tengah menentukan pusat bagi peta, yang melepasi Koordinat (latitud, longitud) untuk mencipta titik tengah pada peta.
Zum (tahap zum)
Atribut zum menentukan tahap zum peta. zum: 0 menunjukkan zum penuh seluruh peta Bumi.
MapTypeId (jenis awal peta)
Atribut mapTypeId menentukan jenis awal peta.
mapTypeId termasuk empat jenis berikut:
google.maps.MapTypeId.HYBRID: Paparkan lapisan lutsinar jalan utama imej satelit
-
google.maps.MapTypeId.ROADMAP: Paparkan peta jalan biasa
google.maps.MapTypeId.SATELLITE: Paparkan imej satelit
google.maps.MapTypeId.TERRAIN: Memaparkan peta dengan ciri semula jadi seperti rupa bumi dan tumbuh-tumbuhan
Tempat untuk memaparkan Peta Google
Biasanya Peta Google digunakan dalam <div> elemen:
Nota: Peta akan memaparkan saiz peta mengikut saiz yang ditetapkan dalam div, jadi kita boleh menetapkan saiz peta dalam elemen <div>
Buat objek Peta
,mapProp);
Kod di atas menggunakan parameter (mapProp) untuk mencipta peta baharu dalam elemen <div>
Petua: Jika anda ingin mencipta berbilang peta dalam halaman, anda hanya perlu menambah objek peta baharu.
Contoh berikut mentakrifkan empat kejadian peta (empat peta menggunakan jenis peta yang berbeza):
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapProp3 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapProp4 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
</body>
</html>Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat tika dalam talian
Muatkan peta
Pemuatan tetingkap Kemudian mulakan objek Map dengan melaksanakan fungsi initialize(), yang memastikan Peta Google dimuatkan selepas halaman dimuatkan sepenuhnya:
