Haritanın stilini ayarlama

Bu dokümanda, bir haritanın görünümünün ve tarzının nasıl özelleştirileceği, veri görünürlüğü ve görüntü alanı seçeneklerinin nasıl kontrol edileceği ele alınmaktadır. Bunu aşağıdaki yöntemlerle yapabilirsiniz:

  • Bulut tabanlı harita stillerini kullanma
  • Harita stili seçeneklerini doğrudan kendi kodunuzda ayarlama

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 stillerini destekler. Bulut tabanlı harita stilini kullanmak için seçilen harita oluşturucunun LATEST olduğundan emin olun. Aşağıdaki bölümlerde, projenizde bulut tabanlı harita stilini nasıl kullanacağınızla ilgili ö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

Bulut tabanlı harita stilini ConsumerMapFragment içinde XML ile kullanmak için map:mapId XML özelliğini belirtilen mapId ile 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

ConsumerMapFragment içinde newInstance ile bulut tabanlı harita stilleri kullanmak için GoogleMapOptions üzerinde mapId alanını ayarlayın ve GoogleMapOptions öğesini newInstance olarak 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
  }
}

JavaScript tüketici gezi paylaşımı haritanıza bir harita stili uygulamak için JourneySharingMapView'yi oluştururken bir mapId ve diğer tüm mapOptions öğelerini belirtin.

Aşağıdaki örneklerde, harita kimliğiyle harita stilinin nasıl uygulanacağı gösterilmektedir.

JavaScript

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

TypeScript

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

Haritaları doğrudan kendi kodunuzda biçimlendirin

JourneySharingMapView öğesini oluştururken harita seçeneklerini ayarlayarak harita stilini özelleştirebilirsiniz. Aşağıdaki örneklerde, harita seçenekleri kullanılarak bir haritaya nasıl stil verileceği gösterilmektedir. Ayarlayabileceğiniz harita seçenekleri hakkında daha fazla bilgi için Google Maps JavaScript API referansındaki mapOptions bölümüne bakın.

JavaScript

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

TypeScript

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

Görev verilerinin SDK'daki görünürlüğünü kontrol et

Görünürlük kurallarını kullanarak belirli görev nesnelerinin haritadaki görünürlüğünü kontrol edebilirsiniz.

Görev verileri için varsayılan görünürlük

Varsayılan olarak, bir araca atanan görevlerle ilgili veriler araç, görevden 5 durak uzaklıktayken görünür. Görev tamamlandığında veya iptal edildiğinde görünürlük sona erer.

Bu tabloda, her görev türünün varsayılan görünürlüğü gösterilmektedir. Hepsi için olmasa da birçok görev için görünürlüğü özelleştirebilirsiniz. Görev türleri hakkında daha fazla bilgi için Planlanmış görevler kılavuzundaki Görev türleri bölümüne bakın.

Görev türü Varsayılan görünürlük Özelleştirilebilir mi? Açıklama
Kullanılamazlık görevleri Görünmez Hayır Sürücü molaları ve yakıt doldurma için kullanılır. Bir teslimat görevine giden rota başka bir araç durağı da içeriyorsa bu durak, yalnızca "Kullanılamıyor" görevleri içeriyorsa gösterilmez. Teslimat görevinin kendisi için tahmini varış süresi ve tahmini görev tamamlanma süresi gösterilmeye devam ediyor.
Araç görevlerini aç Gösteriliyor Evet Görev tamamlandığında veya iptal edildiğinde görünürlük sona erer. Açık araç görevlerinin görünürlüğünü özelleştirebilirsiniz. Açık araç görevlerinin görünürlüğünü özelleştirme başlıklı makaleyi inceleyin.
Kapalı araç görevleri Görünmez Hayır Kapalı araç görevlerinin görünürlüğünü özelleştiremezsiniz.

Açık araç görevlerinin görünürlüğünü özelleştirme

TaskTrackingInfo arayüzü, Consumer SDK ile görünür hale getirilebilecek bir dizi görev verisi öğesi sağlar.

Özelleştirilebilir görev veri öğeleri

Rota çoklu çizgileri

Tahmini varış zamanı

Tahmini görev tamamlanma süresi

Göreve kalan sürüş mesafesi

Kalan durak sayısı

Araç konumu

Görev başına görünürlük seçenekleri

Fleet Engine'da görev oluştururken veya güncellerken TaskTrackingViewConfig ayarını yaparak görünürlük yapılandırmasını görev bazında özelleştirebilirsiniz. Bir görev öğesinin görünürlüğünü belirleyecek ölçütler oluşturmak için aşağıdaki görünürlük seçeneklerini kullanın:

Görünürlük seçenekleri

Kalan durak sayısı

Tahmini varış saatine kadar geçen süre

Kalan sürüş mesafesi

Her zaman görünür

Hiçbir zaman görünür değil

Örnek bir özelleştirmenin, aşağıdaki tabloda gösterilen ölçütleri kullanarak üç veri öğesinin görünürlüğünü ayarladığını varsayalım. Diğer tüm öğeler varsayılan görünürlük kurallarını uygular.

Ayarlanacak veri öğesi Görünürlük Ölçüt
Rota çoklu çizgisi Göster Araç 3 durak uzaklıktadır.
TVS Göster Kalan sürüş mesafesi 5.000 metreden kısaysa
Kalan durak sayısı Hiçbir zaman gösterme Araç 3 durak uzaklıktadır.

Aşağıdaki örnekte bu yapılandırma gösterilmektedir:

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

Rota poli çizgileri ve araç konumu görünürlüğü kuralları

Araç konumu da görünür olmadığı sürece rota çoklu çizgileri görülemez. Aksi takdirde, bir çoklu çizginin sonunda araç konumu tahmin edilebilir.

Bu yönergeler, rota çoklu çizgisi ve araç konumu görünürlüğü seçenekleri için geçerli bir kombinasyon sağlamanıza yardımcı olur.

Aynı görünürlük seçenekleri Görünürlük ölçütü Yönerge
Rota çoklu çizgi seçenekleri her zaman görünür olarak ayarlandı. Araç konumunu her zaman görünür olarak ayarlayın.
Araç konumu, asla görünür olmayacak şekilde ayarlandı. Rota poli çizgilerini hiçbir zaman görünmeyecek şekilde ayarlayın.
Görünürlük seçeneği aşağıdakilerden herhangi biridir:
  • kalan durak sayısı
  • TVS'ye kalan süre
  • kalan sürüş mesafesi

Rota çoklu çizgi seçeneklerini, aracın konumu için ayarlanan değerden küçük veya bu değere eşit bir değere ayarlayın. Örneğin:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
Farklı görünürlük seçenekleri Görünürlük ölçütleri Yönerge
Araç konumu gösteriliyor

Bu durum yalnızca araç konumu ve poli çizgisi görünürlüğü seçeneklerinin ikisi de karşılandığında gerçekleşir. Örneğin:

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

Bu örnekte, araç konumu yalnızca kalan durak sayısı en az 3 VE kalan sürüş mesafesi en az 3.000 metre ise görünür.

Otomatik uyumu devre dışı bırakma

Otomatik uyumu devre dışı bırakarak haritanın görüntü alanını araca ve beklenen rotaya otomatik olarak sığdırmasını durdurabilirsiniz. Aşağıdaki örnekte, yolculuk paylaşımı harita görünümünü yapılandırırken otomatik sığdırmanın nasıl devre dışı bırakılacağı gösterilmektedir.

JavaScript

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

TypeScript

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

Sırada ne var?