Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Xarita qatlamlari

ULASHISH

Google Maps - qatlamlar (overlays)

Qatlamlar (overlays) — xaritadagi kenglik/uzunlik koordinatalariga bog‘langan obyektlar.

Google Maps’da qatlamlarning bir nechta turi mavjud:

  • Marker - xaritadagi alohida joylar. Markerlar maxsus ikonka rasmlarini ham ko‘rsatishi mumkin
  • Polyline - xaritadagi to‘g‘ri chiziqlar ketma-ketligi
  • Polygon - xaritadagi to‘g‘ri chiziqlar ketma-ketligi bo‘lib, shakli "yopiq" bo‘ladi
  • Circle (aylana) va Rectangle (to‘rtburchak)
  • Info Windows (axborot oynalari) - xarita ustida qalqib chiquvchi pufakcha ichida kontentni ko‘rsatadi
  • Maxsus qatlamlar (custom overlays)

Google Maps - marker qo‘shish

Marker konstruktori marker yaratadi. E’tibor bering, marker ko‘rinishi uchun position xususiyati o‘rnatilgan bo‘lishi kerak.

setMap() metodi yordamida markerni xaritaga qo‘shing:

Misol

var marker = new google.maps.Marker({position: myCenter}); marker.setMap(map);

Google Maps - markerni animatsiya qilish

Quyidagi misolda animation xususiyati yordamida markerni qanday animatsiya qilish ko‘rsatilgan:

Misol

var marker = new google.maps.Marker({   position:myCenter,   animation:google.maps.Animation.BOUNCE }); marker.setMap(map);

Google Maps - marker o‘rniga ikonka

Quyidagi misolda standart marker o‘rniga ishlatiladigan rasm (ikonka) belgilanadi:

Misol

var marker = new google.maps.Marker({   position:myCenter,   icon:'pinkball.png' }); marker.setMap(map);

Google Maps - Polyline (siniq chiziq)

Polyline — tartiblangan ketma-ketlikdagi bir qator koordinatalar orqali chiziladigan chiziq.

Polyline quyidagi xususiyatlarni qo‘llab-quvvatlaydi:

  • path - chiziq uchun bir nechta kenglik/uzunlik koordinatalarini belgilaydi
  • strokeColor - chiziq uchun o‘n oltilik (hexadecimal) rangni belgilaydi (format: "#FFFFFF")
  • strokeOpacity - chiziqning shaffoflik darajasini belgilaydi (0.0 va 1.0 oralig‘idagi qiymat)
  • strokeWeight - chiziq qalinligini piksellarda belgilaydi
  • editable - chiziqni foydalanuvchilar tahrirlay olishini belgilaydi (true/false)

Misol

var myTrip = [stavanger,amsterdam,london]; var flightPath = new google.maps.Polyline({   path:myTrip,   strokeColor:"#0000FF",   strokeOpacity:0.8,   strokeWeight:2 });

Google Maps - Polygon (ko‘pburchak)

Polygon ham Polyline kabi tartiblangan ketma-ketlikdagi bir qator koordinatalardan iborat. Biroq polygonlar yopiq kontur ichidagi hududlarni belgilash uchun mo‘ljallangan.

Polygonlar to‘g‘ri chiziqlardan tashkil topadi va ularning shakli "yopiq" bo‘ladi (barcha chiziqlar o‘zaro tutashadi).

Polygon quyidagi xususiyatlarni qo‘llab-quvvatlaydi:

  • path - chiziq uchun bir nechta LatLng koordinatalarini belgilaydi (birinchi va oxirgi koordinata bir xil bo‘ladi)
  • strokeColor - chiziq uchun o‘n oltilik (hexadecimal) rangni belgilaydi (format: "#FFFFFF")
  • strokeOpacity - chiziqning shaffoflik darajasini belgilaydi (0.0 va 1.0 oralig‘idagi qiymat)
  • strokeWeight - chiziq qalinligini piksellarda belgilaydi
  • fillColor - yopiq hudud ichidagi maydon uchun o‘n oltilik rangni belgilaydi (format: "#FFFFFF")
  • fillOpacity - to‘ldirish rangining shaffoflik darajasini belgilaydi (0.0 va 1.0 oralig‘idagi qiymat)
  • editable - chiziqni foydalanuvchilar tahrirlay olishini belgilaydi (true/false)

Misol

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 });

Google Maps - Circle (aylana)

Circle quyidagi xususiyatlarni qo‘llab-quvvatlaydi:

  • center - aylana markazining google.maps.LatLng qiymatini belgilaydi
  • radius - aylana radiusini metrlarda belgilaydi
  • strokeColor - aylana atrofidagi chiziq uchun o‘n oltilik rangni belgilaydi (format: "#FFFFFF")
  • strokeOpacity - chiziq rangining shaffoflik darajasini belgilaydi (0.0 va 1.0 oralig‘idagi qiymat)
  • strokeWeight - chiziq qalinligini piksellarda belgilaydi
  • fillColor - aylana ichidagi maydon uchun o‘n oltilik rangni belgilaydi (format: "#FFFFFF")
  • fillOpacity - to‘ldirish rangining shaffoflik darajasini belgilaydi (0.0 va 1.0 oralig‘idagi qiymat)
  • editable - aylanani foydalanuvchilar tahrirlay olishini belgilaydi (true/false)

Misol

var myCity = new google.maps.Circle({   center:amsterdam,   radius:20000,   strokeColor:"#0000FF",   strokeOpacity:0.8,   strokeWeight:2,   fillColor:"#0000FF",   fillOpacity:0.4 });

Google Maps - InfoWindow (axborot oynasi)

Marker uchun matnli kontentga ega InfoWindow ko‘rsating:

Misol

var infowindow = new google.maps.InfoWindow({   content:"Hello World!" }); infowindow.open(map,marker);

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish