Haritanın stilini ayarlama

Platform seçin: Android iOS JavaScript

Bu kılavuzda, bir geziyi takip ederken iOS uygulamanızda görüntülenen haritanın stilini ayarlama yöntemleri açıklanmaktadır.

Başlamadan önce

Bir haritanın stilini ayarlamadan ö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 ayarlamış ve Tüketici SDK'sını da kurmuş olmanı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:

  • Haritanın stilini ayarlama: Bulut tabanlı harita stillerini kullanarak harita renklerini, çoklu çizgileri ve diğer harita özelliklerini biçimlendirebilirsiniz. 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ı makaleye göz atın.

  • İş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 konularına bakın.

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

Bulut tabanlı harita stilleri ile haritaya stil uygulama

Bulut tabanlı harita stilleri kullanarak harita bileşeninin görünümünü ve tarzını özelleştirin. Google Haritalar'ı kullanan tüm uygulamalarınız için Google Cloud Console'da 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 stilini destekler. Bulut tabanlı harita stilini kullanmak için seçilen harita oluşturucunun LATEST olduğundan emin olun. Aşağıdaki bölümlerde, bulut tabanlı harita stilinin projenizle nasıl kullanılacağına dair örnekler verilmiştir.

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'ta bulut tabanlı harita stilini 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 kameranın yakınlaştırma ayarını değiştirin

Etkin bir gezi paylaşımı oturumu sırasında, kullanıcının rota üzerindeki aracı yakın bir bakış açısına göre değil, yolculuk boyunca aracı daha geniş bir açıdan görmesi daha faydalı olur. Bunu yapmak için yerleşik AutoCamera öğesini kullanarak veya kamera davranışını aşağıdaki şekilde özelleştirerek kamera yakınlaştırma düzeyini ayarlarsınız:

  • 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, varsayılan olarak kamerayı ortalar

Tüketici SDK'sı, Haritalar SDK'sının yerleşik Konumum düğmesinde varsayılan olarak etkinleştirilen bir AutoCamera özelliği sağlar. Kamera, gezi rotasına ve sonraki seyahat ara 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 sayfasını 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ştirin

Kamera davranışı üzerinde daha fazla kontrol sahibi olmak için AutoCamera özelliğini 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