Android Kullanıcı Arayüzü Özelleştirmesi

ConsumerMapStyle class, size dinamik özelleştirme sağlayan ayarlayıcı ve alıcı yöntemlerine sahiptir çoklu çizgiler için de geçerlidir. Bu sınıf, ConsumerController.getConsumerMapStyle() yöntemidir.

Kullanıcı arayüzü özelleştirmesi, cihaz rotasyonları arasında da devam eder ve ConsumerController çıkarıldı.

Özel işaretçiler

İşaretçi türünü ve özelliklerini ayarlama yöntemi ConsumerMapStyle.setMarkerStyleOptions() şeklindedir. Özel İşaretçi seçenekleri, Tüketici SDK'sı tarafından sağlanan varsayılan değerleri geçersiz kılar. Varsayılan değerleri geri yüklemek için null kullanarak setMarkerStyleOptions() çağrısı yapın (MarkerOptions parametresi için) Etkin MarkerOptions öğesini al kullanarak getMarkerStyleOptions()

İşaretçi türleri

Aşağıdaki işaretçiler özelleştirme için kullanılabilir:

• TRIP_PICKUP_POINT
• TRIP_DROPOFF_POINT
• TRIP_INTERMEDIATE_DESTINATION
• TRIP_VEHICLE

Yolculuk izleme sırasında TRIP_PICKUP_POINT ve TRIP_DROPOFF_POINT görüntülenir.

Gezi izleme sırasında TRIP_VEHICLE görüntülenir. İşaretçi simgesi değişmiyor seyahat için gerçek araç türüne göre. Tüketici SDK'sı güncellemeleri taklit etmek için gezi izleme sırasında TRIP_VEHICLE simgesinin döndürülmesini hareket eden bir model olacaktır.

Not: En gerçekçi animasyon sonuçları için TRIP_VEHICLE en üstte olmalıdır. perspektifi görmek için aracın ön tarafı yukarıya bakın.

İşaretçi seçenekleri

Her işaretçi için kullanılabilecek özelleştirilebilir özellikler, Google Haritalar tarafından sağlanan tesisler MarkerOptions.

MarkerOptions, kurucusu kullanılarak oluşturulur ve özelleştirilmiş özellikler "Setter" ile belirtilir stil yöntemleri. Her mülk için varsayılan değerler sağlandığından yalnızca özel değerler belirtmeniz gerekir.

visible öğesini false olarak ayarlayarak bir işaretçiyi kapatabilirsiniz. Bunun yerine kendi kullanıcı arayüzü öğenizi kullanabilmeniz için yeterli miktarda veri sağlanmalıdır.

Örnek

Java

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

Özel çoklu çizgiler

Çoklu çizgi özelleştirmesi, ConsumerMapStyle.setPolylineStyleOptions yöntemi kullanılarak ayarlanır. Özel çoklu çizgi seçeneklerini ayarlama Tüketici SDK'sı tarafından sağlanan varsayılan değerleri geçersiz kılar. Varsayılan değerler setPolylineStyleOptions numaralı telefon aranarak geri yüklenebilir PolylineOptions parametresi için null değerini içerir. Etkin PolylineOptions, getPolylineStyleOptions yöntemini kullanabilirsiniz.

Çoklu çizgi türleri

Aşağıdaki çoklu çizgi türleri özelleştirilebilir:

• ACTIVE_ROUTE
• REMAINING_ROUTE

Gezi izleme sırasında ACTIVE_ROUTE ve REMAINING_ROUTE gösterilir ve aracın rotasını temsil eder.

Çoklu Çizgi Özellikleri

Her bir çoklu çizgi için kullanılabilen özelleştirilebilir özellikler Google Haritalar PolylineOptions tarafından sağlanmıştır. PolylineOptions, kurucusu kullanılarak oluşturulur ve özelleştirilmiş özellikler "Setter" ile belirtilir stil yöntemleri. Varsayılan değerler her mülk için belirtildiğinden yalnızca özel değerler belirtmeniz gerekir. visible öğesini false olarak ayarlayarak çoklu çizgiyi kapatabilirsiniz.

Örnek

Java

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

Etkin ve Kalan Rota

Yolculuk ve Sipariş İlerlemesi etkinleştirildiğinde uygulamanız, Araçlarınızın etkin ve kalan durumunu gösteren, çoklu çizgi kullanımıyla ilgili kullanıcı deneyimi yol gösterir.

Etkin rota, aracın ulaşmak için gitmekte olduğu yoldur tüketicinin aktif yolculuğundaki bir sonraki ara noktadır. Kalan rota aracın etkin rotadan sonra gideceği yol. Etkin rota ara noktası, son seyahat ara noktasıysa, kalan rota mevcut değil.

Etkin ve kalan çoklu çizgiler özelleştirilebilir ve görünürlük kontrol edilebilir elde edebilirsiniz. Varsayılan olarak, etkin rota ve kalan rota görünür görünür değil.

Örnek

Java

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

Trafiğe duyarlı çoklu çizgiler

Çoklu çizginin trafik katmanı varsayılan olarak devre dışıdır. Etkinleştirildiğinde, segmentler normal olmayan trafik uzatmalarını temsil eden rota çoklu çizgisinin üzerine çizilir z-endeksi PolylineOptions.getZIndex() ve trafik koşuluna bağlı olarak bir ofset değeri.

Trafik koşulları, dört hız türü. Her hız türü için rengi özelleştirebilirsiniz.

"Trafiğe duyarlı çoklu çizgiler" özelliğini etkinleştirmek için bir TrafficStyle nesnesi oluşturmanız gerekir. Bu nesne, daha sonra setPolylineTrafficStyle() çağrısı yaparak ConsumerMapStyle öğesine aktarılır.

Örnek

Java

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

Bir yolculuğa odaklanmak için kameranın yakınlaştırmasını ayarlama

Varsayılan Konumum düğmesi yerleşik olarak bulunan kamera, cihazın konumunu merkeze alır. Varsa aktif bir Seyahat ve Sipariş İlerlemesi oturumunun olması durumunda, kameranın, cihazın konumu yerine yolculuğa odaklanmasını sağlar.

Yerleşik Android çözümü için Tüketici SDK'sı: AutoKamera

Cihaz konumu yerine yolculuğa odaklanmanızı sağlamak için Tüketici SDK'sı varsayılan olarak etkinleştirilmiş bir Otomatik Kamera özelliği sağlar. Kamera yakınlaştırır kullanarak Seyahat ve Sipariş İlerlemesi rotasına ve sonraki seyahat ara noktasına odaklanın.

Kamera davranışını özelleştirme

Kamera davranışı üzerinde daha fazla kontrole ihtiyacınız varsa devre dışı bırakabilir veya etkinleştirebilirsiniz ConsumerController.setAutoCameraEnabled() ile Otomatik Kamera.

ConsumerController.getCameraUpdate(), önerilen kamera sınırlarını o anda döndürür. Şunları yapabilirsiniz: ardından CameraUpdate öğesini bağımsız değişken olarak sağlayın GoogleMap.moveCamera() veya GoogleMap.animateCamera().

Bulut tabanlı harita stilleri

Hem ConsumerMapView ve ConsumerMapFragment Sınıflar bulut tabanlı harita stilini destekler. Bulut tabanlı harita stilleri kullanmak için, seçilen haritaların oluşturucu LATEST. Aşağıdaki örnekler, en iyi uygulamaları paylaşacağız.

ConsumerMapView

ConsumerMapView özelliğinde bulut tabanlı harita stilini kullanmak için GoogleMapOptions üzerindeki mapId alanını dâhil edin ve GoogleMapOptions ayarını getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Örnek

Java

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

Kotlin

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

Google Cloud'da bulut tabanlı harita stilini kullanmanın iki yolu vardır: ConsumerMapFragments:

1. XML ile statik olarak.
2. newInstance ile dinamik olarak.

XML ile statik olarak

Bulut tabanlı harita stilini XML ile kullanmak için ConsumerMapFragment, map:mapId XML özelliğini belirtilen mapId. Aşağıdaki örneğe bakın:

<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"/>

newInstance ile dinamik olarak

Bulut tabanlı harita stilini newInstance ile kullanmak için ConsumerMapFragment, GoogleMapOptions üzerinde mapId alanını ayarlayıp GoogleMapOptions - newInstance. Aşağıdaki örneğe bakın:

Java

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

Kotlin

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