Menata gaya peta

Dokumen ini membahas cara menyesuaikan tampilan dan nuansa peta dan kontrol opsi visibilitas data dan 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 peta dengan gaya visual peta berbasis Cloud

Menyesuaikan tampilan dan nuansa komponen peta menggunakan peta berbasis cloud gaya visual. Anda dapat membuat dan mengedit gaya peta di Konsol Google Cloud untuk aplikasi Anda yang menggunakan Google Maps, tanpa memerlukan perubahan pada kode. Untuk informasi selengkapnya, lihat Gaya visual peta berbasis Cloud.

Baik ConsumerMapView dan ConsumerMapFragment mendukung Gaya visual peta berbasis Cloud. Untuk menggunakan gaya visual peta berbasis cloud, pastikan peta yang dipilih perender adalah LATEST. Bagian berikut menunjukkan contoh cara menggunakan gaya visual peta berbasis cloud dengan project Anda.

ConsumerMapView

Untuk menggunakan gaya visual peta berbasis Cloud di ConsumerMapView, tetapkan Kolom mapId di GoogleMapOptions dan teruskan GoogleMapOptions ke getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Contoh

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Ada dua cara untuk menggunakan gaya visual peta berbasis Cloud di ConsumerMapFragments:

• Secara statis dengan XML.
• Secara dinamis dengan newInstance.

Secara statis dengan XML

Untuk menggunakan gaya visual peta berbasis Cloud dengan XML di ConsumerMapFragment, tambahkan atribut XML map:mapId dengan atribut yang ditentukan mapId. Lihat contoh berikut:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Secara dinamis dengan newInstance

Untuk menggunakan gaya visual peta berbasis Cloud dengan newInstance di ConsumerMapFragment, setel kolom mapId pada GoogleMapOptions, lalu teruskan GoogleMapOptions ke newInstance. Lihat contoh berikut:

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

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

Contoh berikut menunjukkan cara menerapkan gaya peta dengan ID peta.

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

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 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 peta menggunakan opsi peta. Untuk informasi selengkapnya mengenai opsi peta yang dapat Anda tetapkan, lihat mapOptions dalam referensi Google Maps JavaScript API.

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

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 diberikan ke kendaraan terlihat saat kendaraan berada dalam jarak 5 perhentian dari tugas. Visibilitas berakhir saat tugas diselesaikan atau dibatalkan.

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

Sesuaikan visibilitas tugas kendaraan terbuka

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

Opsi visibilitas per tugas

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

Sebagai ilustrasi, misalkan sebuah contoh penyesuaian menyesuaikan visibilitas selama tiga elemen data menggunakan kriteria yang ditampilkan dalam tabel berikut. Lainnya elemen mengikuti aturan visibilitas {i>default<i}.

Contoh berikut menunjukkan konfigurasi ini:

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

Polyline rute dan aturan visibilitas lokasi kendaraan

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

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

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    

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

Nonaktifkan penyesuaian otomatis

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

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

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

Langkah berikutnya

• Menyesuaikan penanda
• Menyesuaikan polyline