Menata gaya peta

Dokumen ini membahas cara menyesuaikan tampilan peta dan mengontrol visibilitas data serta opsi area pandang. Anda dapat melakukannya dengan beberapa cara berikut:

  • Menggunakan gaya visual peta berbasis cloud
  • Menetapkan opsi gaya peta langsung dalam kode Anda sendiri

Menata gaya visual peta dengan gaya visual peta berbasis cloud

Untuk menerapkan gaya visual peta ke peta berbagi perjalanan konsumen JavaScript Anda, tentukan mapId dan lainnya mapOptions saat Anda membuat JourneySharingMapView.

Contoh berikut menunjukkan cara menerapkan gaya peta dengan ID Peta.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Menata gaya visual peta langsung dalam kode Anda sendiri

Anda juga dapat menyesuaikan gaya visual peta dengan menetapkan opsi peta saat membuat JourneySharingMapView. Contoh berikut menunjukkan cara menata gaya visual peta menggunakan opsi peta. Untuk mengetahui informasi selengkapnya tentang opsi peta yang dapat Anda tetapkan, lihat mapOptions di referensi Google Maps JavaScript API.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Mengontrol visibilitas data tugas ke SDK

Anda dapat mengontrol visibilitas objek tugas tertentu di peta menggunakan aturan visibilitas.

Visibilitas default data tugas

Secara default, data untuk tugas yang ditetapkan ke kendaraan akan terlihat saat kendaraan berada dalam jarak 5 perhentian dari tugas. Visibilitas berakhir saat tugas selesai atau dibatalkan.

Tabel ini menunjukkan visibilitas default untuk setiap jenis tugas. Anda dapat menyesuaikan visibilitas untuk banyak tugas, tetapi tidak semuanya. Untuk mengetahui detail selengkapnya tentang jenis tugas, lihat Jenis tugas di panduan Tugas terjadwal.

Jenis tugas Visibilitas default Dapat disesuaikan? Deskripsi
Tugas ketidaktersediaan Tidak terlihat Tidak Digunakan untuk istirahat dan pengisian bahan bakar pengemudi. Jika rute ke tugas pengiriman juga berisi perhentian kendaraan lain, perhentian tersebut tidak akan ditampilkan jika hanya berisi tugas ketidaktersediaan. Perkiraan waktu tiba dan perkiraan waktu penyelesaian tugas masih ditampilkan untuk tugas pengiriman itu sendiri.
Tugas kendaraan terbuka Terlihat Ya Visibilitas berakhir saat tugas selesai atau dibatalkan. Anda dapat menyesuaikan visibilitas tugas kendaraan terbuka. Lihat Menyesuaikan visibilitas tugas kendaraan terbuka.
Tugas kendaraan tertutup Tidak terlihat Tidak Anda tidak dapat menyesuaikan visibilitas tugas kendaraan tertutup.

Menyesuaikan visibilitas tugas kendaraan terbuka

Antarmuka TaskTrackingInfo menyediakan sejumlah elemen data tugas yang dapat dibuat terlihat dengan Consumer SDK.

Elemen data tugas yang dapat disesuaikan

Polyline rute

Perkiraan waktu tiba

Perkiraan waktu penyelesaian tugas

Sisa jarak tempuh ke tugas

Sisa jumlah perhentian

Lokasi kendaraan

Opsi visibilitas per tugas

Anda dapat menyesuaikan konfigurasi visibilitas per tugas dengan menetapkan TaskTrackingViewConfig saat membuat atau memperbarui tugas dalam Fleet Engine. Gunakan opsi visibilitas berikut untuk membuat kriteria guna menentukan visibilitas elemen tugas:

Opsi visibilitas

Sisa jumlah perhentian

Durasi hingga perkiraan waktu tiba

Sisa jarak tempuh

Selalu terlihat

Tidak pernah terlihat

Untuk mengilustrasikan, misalkan penyesuaian contoh menyesuaikan visibilitas untuk tiga elemen data menggunakan kriteria yang ditampilkan dalam tabel berikut. Semua elemen lainnya mengikuti aturan visibilitas default.

Elemen data yang akan disesuaikan Visibilitas Kriteria
Polyline rute Tampilkan Kendaraan berada dalam jarak 3 perhentian.
PWT Tampilkan Sisa jarak tempuh lebih pendek dari 5.000 meter.
Sisa jumlah perhentian Jangan tampilkan Kendaraan berada dalam jarak 3 perhentian.

Contoh berikut menunjukkan konfigurasi ini:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Aturan visibilitas lokasi kendaraan dan polyline rute

Polyline rute tidak dapat terlihat kecuali jika lokasi kendaraan juga terlihat; jika tidak, lokasi kendaraan dapat disimpulkan dari akhir polyline.

Panduan ini membantu Anda memberikan kombinasi yang valid untuk opsi visibilitas lokasi kendaraan dan polyline rute.

Opsi visibilitas yang sama Kriteria visibilitas Panduan
Opsi polyline rute ditetapkan ke selalu terlihat. Tetapkan lokasi kendaraan ke selalu terlihat.
Lokasi kendaraan ditetapkan ke tidak pernah terlihat. Tetapkan polyline rute ke tidak pernah terlihat.
Opsi visibilitas adalah salah satu dari:
  • sisa jumlah perhentian
  • durasi hingga PWT
  • sisa jarak tempuh

Tetapkan opsi polyline rute ke nilai yang kurang dari atau sama dengan nilai yang ditetapkan untuk lokasi kendaraan. Contoh:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
Opsi visibilitas yang berbeda Kriteria visibilitas Panduan
Lokasi kendaraan terlihat

Hal ini hanya terjadi jika kedua opsi visibilitas lokasi kendaraan dan polyline terpenuhi. Contoh:

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

Dalam contoh ini, lokasi kendaraan hanya terlihat jika sisa jumlah perhentian minimal 3 DAN sisa jarak tempuh minimal 3.000 meter.

Menonaktifkan penyesuaian otomatis

Anda dapat menghentikan peta agar tidak otomatis menyesuaikan area pandang ke kendaraan dan rute yang diperkirakan dengan menonaktifkan penyesuaian otomatis. Contoh berikut menunjukkan cara menonaktifkan penyesuaian otomatis saat Anda mengonfigurasi tampilan peta berbagi perjalanan.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Langkah berikutnya