Haritanın stilini ayarlama

Platform seçin: Android iOS JavaScript

Bu kılavuzda, bir geziyi takip ederken iOS uygulamanızda gösterilen haritaya nasıl stil uygulayabileceğiniz açıklanmaktadır.

Başlamadan önce

Bir haritaya stil uygulamadan önce, aşağıdakilerin uygulandığı bir tüketici uygulamanız olmalıdır:

Ayrıca, Tüketici SDK'sının ihtiyaç duyduğu arka uç hizmetlerini ve Tüketici SDK'sını da ayarlamanız gerekir. Ayrıntılar için Consumer SDK'sını ayarlama ve Fleet Engine nedir? başlıklı makaleleri inceleyin.

Harita özelleştirmeleri

Kullanılabilen özelleştirmeler şunlardır:

  • Haritada stil oluşturma: Bulut tabanlı harita stillerini kullanarak harita renkleri, çoklu çizgiler ve diğer harita özelliklerinin stilini ayarlayabilirsiniz. Haritayı biçimlendirme bölümüne bakın.

  • Kamera yakınlaştırmasını ayarlama: Yerleşik özelliği kullanabilir veya bir yolculuğa odaklanmak için kendi kamera seçeneklerinizi ayarlayabilirsiniz. Bir geziye odaklanmak için kamera yakınlaştırmasını ayarlama başlıklı makaleyi inceleyin.

  • İşaretçileri ve çoklu çizgileri özelleştirme: Uygulama tasarımınıza özel işaretçiler ve rota çoklu çizgileri ekleyebilirsiniz. Bu tasarım öğeleri, tüketici uygulamanızın aracın rotasının dinamik bir önizlemesini göstermesini sağlar. İşaretleri özelleştirme ve Çoklu çizgileri özelleştirme başlıklı makaleleri inceleyin.

    SDK, bu seçenekleri consumerMapStyleCoordinator mülkü aracılığıyla sağlar. Bu mülk, GMTCMapView sınıfı aracılığıyla kullanılabilir.

Bulut tabanlı harita stilleri ile haritaya stil uygulama

Bulut tabanlı harita stillerini kullanarak haritalar bileşeninin görünümünü ve tarzını özelleştirin. Google Cloud Console'da, Google Haritalar'ı kullanan tüm uygulamalarınız için harita stilleri oluşturup düzenleyebilirsiniz. Bu işlem için kodunuzda herhangi bir değişiklik yapmanız gerekmez. Daha fazla bilgi için Bulut tabanlı harita stilleri başlıklı makaleyi inceleyin.

Hem ConsumerMapView hem de ConsumerMapFragment sınıfları bulut tabanlı harita stillerini destekler. Bulut tabanlı harita stillerini kullanmak için seçili harita oluşturma aracının LATEST olduğundan emin olun. Aşağıdaki bölümlerde, bulut tabanlı harita stilinin projenizle nasıl kullanılacağına dair örnekler gösterilmektedir.

ConsumerMapView

ConsumerMapView içinde bulut tabanlı harita stilini kullanmak için GoogleMapOptions üzerinde mapId alanını ayarlayın ve GoogleMapOptions'yi getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) veya getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions) işlevine iletin.

Ö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

ConsumerMapFragments'te bulut tabanlı harita stillerini kullanmanın iki yolu vardır:

  • XML ile statik olarak.
  • newInstance ile dinamik olarak.

XML ile statik olarak

ConsumerMapFragment içindeki XML ile bulut tabanlı harita stilini kullanmak için belirtilen mapId ile map:mapId XML özelliğini ekleyin. 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 stillerini ConsumerMapFragment içinde newInstance ile kullanmak için GoogleMapOptions'ta mapId alanını ayarlayın ve GoogleMapOptions'ı newInstance'e iletin. 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
  }
}

Bir geziye odaklanmak için kamera yakınlaştırmasını ayarlama

Etkin bir yolculuk paylaşımı oturumu sırasında kullanıcının, rotadaki aracın yakın plan görünümü yerine aracın yolculuğu sırasındaki daha büyük bir görünümünü görmesi yararlı olur. Bunu yapmak için yerleşik AutoCamera düğmesini kullanarak veya kamera davranışını aşağıdaki gibi özelleştirerek kamera yakınlaştırma düzeyini ayarlayabilirsiniz:

  • AutoCamera: AutoCamera'u kullanmak istiyorsanız herhangi bir işlem yapmanız gerekmez. Kamera varsayılan olarak geziyi takip eder.

  • Kamera davranışını özelleştirme: Kamera davranışını özelleştirmek için AutoCamera'yi devre dışı bırakıp özelleştirmelerinizi yapmanız gerekir.

AutoCamera kamerayı varsayılan olarak ortalar

Tüketici SDK'sı, Haritalar SDK'sı için yerleşik Konumum düğmesinde varsayılan olarak etkinleştirilen bir AutoCamera özelliği sağlar. Kamera, seyahat rotasına ve bir sonraki seyahat yol noktasına odaklanmak için yakınlaştırır.

AutoCamera uzantısını kullanmak istiyorsanız etkinleştirdiğinizden emin olun. Daha fazla bilgi için allowCameraAutoUpdate başlıklı makaleyi inceleyin.

`AutoCamera`

Haritalar SDK'sındaki Konumum düğmesiyle ilgili ayrıntılar için iOS için Haritalar SDK'sı dokümanlarında Konumum düğmesi bölümüne bakın.

Kamera davranışını özelleştirme

Kamera davranışı üzerinde daha fazla kontrol sahibi olmak için AutoCamera'ü devre dışı bırakabilir ve kamera davranışını özelleştirebilirsiniz.

AllowCameraAutoUpdate mülkü ile AutoCamera özelliğini devre dışı bırakın veya etkinleştirin.

Daha fazla kamera özelleştirmesi için iOS için Haritalar SDK'sı dokümanlarında Kamerayı hareket ettirme bölümüne bakın.

Sırada ne var?

iOS'te bir geziyi takip etme