Haritanın stilini ayarlama

Platform seçin: Android iOS JavaScript

Bu kılavuzda, 10 veya 25 karakterden oluşan harita üzerinde bir geziyi takip ederken iOS uygulamanızda görüntülenir.

Başlamadan önce

Bir haritanın stilini ayarlamadan önce, haritadaki aşağıdakiler uygulandı:

Ayrıca, Tüketici SDK'sının ihtiyaç duyduğu arka uç hizmetlerini de ayarlamış olmanız gerekir. ve Tüketici SDK'sını ayarlayın. Ayrıntılar için Tüketici SDK'sını ayarlama başlıklı makaleyi inceleyin. ve Fleet Engine nedir? başlıklı makalelere göz atın.

Harita özelleştirmeleri

Kullanılabilir özelleştirmeler aşağıdaki gibidir:

  • Haritanın stilini ayarlama: Harita renklerinin, çoklu çizgilerin ve diğer harita özelliklerinin stilini belirleyebilirsiniz kullanarak başarılı bir performans elde edebilirsiniz. Haritayı biçimlendirme bölümüne bakın.

  • Kamera yakınlaştırma ayarını değiştirme: Yerleşik özelliği kullanabilir veya kendi yolculuğa odaklanmak için kamera seçeneklerini kullanabilirsiniz. Bir seyahate odaklanmak için kamera yakınlaştırmasını ayarlama başlıklı makaleyi inceleyin.

  • İşaretçileri ve çoklu çizgileri özelleştirme: Özel işaretçiler ve rota ekleyebilirsiniz. birden fazla çizgi kullanın. Bu tasarım öğeleri, tüketicilerin uygulamasını kullanarak rotanın dinamik önizlemesini görüntüleyin. Görüntüleyin İşaretleri özelleştir ve Çoklu çizgileri özelleştirin.

    SDK, bu seçenekleri consumerMapStyleCoordinator Bu özellik, GMTCMapView sınıfı aracılığıyla kullanılabilir.

Bulut tabanlı harita stilleriyle haritayı biçimlendirin

Bulut tabanlı haritaları kullanarak harita bileşeninin görünümünü ve tarzını özelleştirin görünüm. Tüm cihazlarınız için Google Cloud Console'da harita stilleri oluşturup düzenleyebilirsiniz kodda herhangi bir değişiklik yapmanıza gerek kalmadan Google Haritalar'ı kullanan uygulamalarınız için geçerlidir. Daha fazla bilgi için bkz. Bulut tabanlı harita stilleri.

Hem ConsumerMapView hem de ConsumerMapFragment sınıfları bulut tabanlı harita stillerini destekler. Bulut tabanlı harita stilleri kullanmak için, seçilen haritaların oluşturucu LATEST. Aşağıdaki bölümler, en iyi uygulamaları paylaştık.

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

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 stillerini ConsumerMapFragment içinde newInstance ile kullanmak için GoogleMapOptions'ta mapId alanını ayarlayın ve GoogleMapOptionsnewInstance'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

Aktif bir yolculuk paylaşımı oturumu sırasında, kullanıcının yakın çekim yerine, yolculuğu boyunca aracın daha geniş bir görünümü bir rota üzerindeki aracın perspektifini gösterir. Bunun için kameranın yakınlaştırma ayarını yerleşik AutoCamera kullanarak veya kamera davranışını özelleştirerek aynı seviyede şu şekilde ekleyebilirsiniz:

  • 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 özelliğini devre dışı bırakıp özelleştirmelerinizi yapmanız gerekiyor.

AutoCamera kamerayı varsayılan olarak ortalar

Tüketici SDK'sı varsayılan olarak etkinleştirilmiş bir AutoCamera özelliği sağlar Haritalar SDK'sındaki yerleşik Konumum düğmesi. Kamera şuna yakınlaştırır: yolculuk paylaşımı rotasına ve bir sonraki seyahat ara noktasına odaklanır.

AutoCamera uzantısını kullanmak istiyorsanız etkinleştirdiğinizden emin olun. Daha fazla bilgi için bkz. allowCameraAutoUpdate.

&quot;AutoKamera&quot;

Haritalar SDK'sındaki Konumum düğmesiyle ilgili ayrıntılar için bkz. Konumum düğmesi bölümünü inceleyin.

Kamera davranışını özelleştirin

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

Şu ayarı kullanarak AutoCamera hizmetini devre dışı bırakın veya etkinleştirin: AllowCameraAutoUpdate

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