Tindanan Peta Google
Peta Google<span class="color_h1" Tindanan
Tambahkan penanda dalam Peta Google
Peta Google - Tindanan
Tindanan ialah objek pada peta yang terikat pada koordinat longitud/latitud dan bergerak semasa anda menyeret atau mengezum peta .
API Peta Google mempunyai beberapa tindanan:
Titik pada peta dipaparkan menggunakan penanda, selalunya memaparkan ikon tersuai. Penanda ialah objek jenis GMarker, dan ikon boleh disesuaikan menggunakan objek jenis GIcon.
Garisan pada peta dipaparkan menggunakan polylines (mewakili koleksi mata). Garisan ialah objek jenis GPolyline.
Kawasan pada peta dipaparkan sebagai poligon (jika ia adalah kawasan berbentuk bebas) atau sebagai tindanan tapak (jika ia adalah kawasan segi empat tepat). Poligon adalah serupa dengan poligaris tertutup, jadi ia boleh menjadi sebarang bentuk. Tindanan tanah biasanya digunakan untuk kawasan peta yang dikaitkan secara langsung atau tidak langsung dengan jubin.
Peta itu sendiri dipaparkan menggunakan tindanan jubin. Jika anda mempunyai siri jubin anda sendiri, anda boleh menggunakan kelas GTileLayerOverlay untuk mengubah jubin sedia ada pada peta, atau juga menggunakan GMapType untuk mencipta jenis peta anda sendiri.
Tetingkap maklumat juga merupakan tindanan khas. Walau bagaimanapun, sila ambil perhatian bahawa tetingkap maklumat ditambah secara automatik pada peta dan peta hanya boleh menambah objek jenis GInfoWindow.
Peta Google - Tambahkan penanda
tanda untuk mengenal pasti titik pada peta. Secara lalai, mereka menggunakan G_DEFAULT_ICON (anda juga boleh menentukan ikon tersuai). Pembina GMarker mengambil objek GLatLng dan GMarkerOptions (pilihan) sebagai parameter. Teg
melalui setMap() Kaedah untuk menambah tanda pada peta:
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run Instance»
Klik "Run Instance" butang untuk melihat dalam talian Contoh
Peta Google - Penanda Boleh Seret
Contoh berikut akan memperkenalkan cara menggunakan atribut animasi untuk menyeret penanda:
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var marker;
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
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 - Ikon
penanda boleh dipaparkan dengan ikon baharu tersuai dan bukannya ikon lalai:
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
}
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 "Run Instance" untuk melihat contoh dalam talian
Peta Google - Polyline
Objek GPolyline mencipta tindanan linear pada peta. GPolyline mengambil satu siri mata dan mencipta siri tertib segmen garisan yang menghubungkan titik tersebut.
Polyline menyokong atribut berikut:
laluan - menentukan koordinat latitud/longitud bagi berbilang garis lurus
strokeColor - menentukan nilai warna perenambelasan baris (format: "#FFFFFF")
strokeOpacity - menentukan ketelusan garisan (nilai ialah 0.0 hingga 1.0)
strokeWeight - Mentakrifkan lebar garisan, dalam piksel.
boleh disunting - mentakrifkan sama ada pengguna boleh mengedit garis lurus (benar/salah)
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:x,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london];
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
flightPath.setMap(map);
}
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 "Run Instance" untuk melihat contoh dalam talian
Google Maps - Polygon
Objek GPolygon adalah serupa dengan objek GPolyline kerana ia terdiri daripada siri mata tersusun. Walau bagaimanapun, daripada mempunyai dua titik akhir seperti polyline, poligon direka untuk menentukan kawasan yang membentuk gelung tertutup.
Seperti polylines, anda boleh menyesuaikan warna, ketebalan dan ketelusan tepi poligon (garisan), serta warna dan ketelusan kawasan yang diisi tertutup. Warna hendaklah gaya HTML nombor heksadesimal.
Polygon menyokong sifat berikut:
laluan - tentukan koordinat berbilang latitud lurus (koordinat pertama dan terakhir adalah sama)
strokeColor - menentukan nilai warna heksadesimal bagi garisan (format: "#FFFFFF")
strokeOpacity - menentukan ketelusan garisan (nilainya ialah 0.0 hingga 1.0)
strokeWeight - Mentakrifkan lebar garisan, dalam piksel.
fillColor - menentukan nilai warna heksadesimal bagi kawasan tertutup (format: "#FFFFFF")
fillOpacity - menentukan warna isian Transparency (nilainya ialah 0.0 hingga 1.0)
boleh disunting - mentakrifkan sama ada pengguna boleh mengedit baris (benar/salah)
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:x,
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london,stavanger];
var flightPath=new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
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 "Run Instance" untuk melihat contoh dalam talian
Peta Google - Bulatan
Bulatan menyokong atribut berikut:
pusat - menentukan parameter titik tengah bulatan google.maps .LatLng
jejari - menentukan jejari bulatan dalam meter
strokeColor - menentukan nilai warna heksadesimal arka (format: " #FFFFFF")
strokeOpacity - menentukan ketelusan arka (nilainya ialah 0.0 hingga 1.0)
strokeWeight - Mentakrifkan lebar garisan, dalam piksel.
fillColor - menentukan nilai warna heksadesimal bagi nilai isian bulatan (format: "#FFFFFF")
fillOpacity - menentukan warna isian ketelusan (nilainya ialah 0.0 hingga 1.0)
Tentukan sama ada pengguna boleh mengedit garis lurus (benar/salah)
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initialize()
{
var mapProp = {
center:amsterdam,
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
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 "Run Instance" untuk melihat contoh dalam talian
Google Maps - Tetingkap Maklumat
Paparkan tetingkap mesej teks pada teg:
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
}
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 contoh dalam talian
Manual Rujukan Peta Google - Tindanan
Manual Rujukan API Peta Google.
