Set Kawalan Peta Google
Peta GoogleSet Widget
Peta Google - Tetapan Set Widget Lalai:
Peta Google - Tetapan set widget lalai:
Apabila menggunakan peta google standard, tetapan lalainya adalah seperti berikut:
.Zum-Memaparkan peluncur untuk mengawal tahap zum peta
.PPan-Peta memaparkan kawalan seperti mangkuk di bawah rata Klik pada 4 penjuru untuk menyorot peta
.MapType - membenarkan pengguna bertukar antara jenis peta (peta jalan dan satallite)
.StreetView - dipaparkan sebagai Ikon Pegman , boleh diseret ke titik tertentu pada peta untuk membuka Street View
Peta Google - Lebih banyak set kawalan
Selain lalai di atas set kawalan, Google juga mempunyai :
.Skala - Memaparkan skala peta
.Putar - Memaparkan ikon bulatan kecil untuk memutar peta
.verview Peta - Menghadap peta dari perspektif kawasan yang luas
Apabila membuat peta, anda boleh menentukan set kawalan yang dipaparkan dengan menetapkan pilihan atau dengan memanggil setOptions() Tukar tetapan peta.
Peta Google - Matikan set kawalan lalai
Anda mungkin mahu dapat mematikan set kawalan lalai.
Untuk mematikan set kawalan lalai, tetapkan sifat disableDefaultUI peta kepada benar:
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:7,
disableDefaultUI:true,
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>Jalankan instance »
Klik butang "Jalankan Contoh" untuk melihat tika dalam talian
Peta Google - buka semua set widget
Beberapa set widget dipaparkan pada peta secara lalai dihidupkan, manakala yang lain tidak akan dipaparkan melainkan anda menetapkannya.
Tetapkan kawalan kepada benar untuk menjadikannya kelihatan - tetapkan kawalan kepada palsu untuk menyembunyikannya.
Kejadian berikut membolehkan semua kawalan:
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:7,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
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>Jalankan instance»
Klik" Butang Jalankan Contoh" untuk melihat tika dalam talian
Peta Google - Ubah Suai Set Kawalan
Sesetengah kawalan peta boleh dikonfigurasikan. Tukar set kawalan dengan menyatakan medan pilihan kawalan.
F Contohnya, pilihan untuk mengubah suai kawalan Zum ditentukan dalam zoomControlOptions. zoomControlOptions mengandungi 3 pilihan berikut:
.google.maps.ZoomControlStyle.SMALL - Paparkan kawalan zum diminimumkan
.google.maps .LARGE - Memaparkan kawalan slaid zum standard
.google.maps.ZoomControlStyle.DEFAULT - Memilih kawalan yang paling sesuai berdasarkan peranti dan saiz peta
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:7,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
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>Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
Nota: Jika anda perlu mengubah suai kawalan, dayakan kawalan dahulu (tetapkan kepada benar).
Kawalan lain ialah kawalan MapType.
Kawalan MapType boleh dipaparkan sebagai salah satu daripada pilihan gaya berikut:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR, digunakan untuk memaparkan sekumpulan kawalan dalam bar mendatar seperti itu Butang ditunjukkan dalam Peta Google.
google.maps.MapTypeControlStyle.DROPDOWN_MENU, memaparkan kawalan butang tunggal yang membolehkan anda memilih jenis peta daripada menu lungsur.
google.maps.MapTypeControlStyle.DEFAULT, digunakan untuk memaparkan gelagat "lalai", yang bergantung pada saiz skrin dan mungkin berubah dalam versi API akan datang.
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:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
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>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Begitu juga anda boleh menggunakan sifat ControlPosition untuk menentukan kedudukan kawalan:
Google Maps - Custom Control Set
Buat kawalan tersuai untuk kembali ke London, untuk acara klik: (Jika peta diseret):
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:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
},
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>Run Instance»
Klik butang "Run Instance" untuk melihat Contoh Dalam Talian
Peta Google - Manual Rujukan Set Kawalan
Manual Rujukan API Peta Google.
