Haritanın stilini ayarlama

Bu dokümanda, bir haritanın ve denetimin görünüm ve tarzının nasıl özelleştirileceği ele alınmaktadır veri görünürlüğü ve görüntü alanı seçenekleri sağlar. Bunu aşağıdaki yollarla 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ı 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 stillerini kullanmak için seçili harita oluşturma aracının LATEST olduğundan emin olun. Aşağıdaki bölümler, 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) veya getTüketiciGoogleharitasıAsync(TüketiciHaritaHazır Çağrısı, 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

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

JavaScript tüketici yolculuğu paylaşımı haritanıza harita stili uygulamak için bir mapId ve diğer mapOptions JourneySharingMapView öğesini oluşturduğunuzda.

Aşağıdaki örneklerde, harita kimliğiyle bir 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

Ayrıca, yeni bir harita oluştururken harita seçenekleri ayarlayarak harita stilini özelleştirebilirsiniz. JourneySharingMapView Aşağıdaki örneklerde, harita seçenekleri. Ayarlayabileceğiniz harita seçenekleri hakkında daha fazla bilgi için mapOptions referans değeri ekleyin.

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'ya görünürlüğünü kontrol etme

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

Görev verilerinin varsayılan görünürlüğü

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. Şunları yapabilirsiniz: tüm görevler 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örevi için tahmini varış zamanı ve tahmini görev tamamlama zamanı gösterilmeye devam eder.
Araç görevlerini açma 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. Görüntüleyin Açık ve ekranın görünürlüğünü özelleştir araç görevleri.
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ü, Tüketici SDK'sı ile görünür hale getirilebilecek çeşitli görev verisi öğeleri sağlar.

Özelleştirilebilir görev verisi öğeleri

Rota çoklu çizgileri

Tahmini varış zamanı

Görevin tahmini 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. Aşağıdaki görünürlük seçeneklerini kullanarak ölçüt oluşturmak için bir görev öğesinin görünürlüğünü belirler:

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 olarak, 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ına uyar.

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 çoklu çizgileri ve araç konumu görünürlük kuralları

Araç konumu da görünmediği sürece rota çoklu çizgileri görünmez. Aksi takdirde, araç konumu bir çoklu çizginin sonuna göre tahmin edilebilir.

Bu kurallar, rota çoklu çizgisi ve araç konumu görünürlük 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 çizgileri seçenekleri her zaman görünür olarak ayarlanır. Aracın konumunu her zaman görünür olacak şekilde ayarlayın.
Araç konumu hiçbir zaman görünmez olarak ayarlanmış. Rota poli çizgilerini hiçbir zaman görünmeyecek şekilde ayarlayın.
Görünürlük seçeneği aşağıdakilerden biri olmalıdır:
  • kalan şarj noktası sayısı
  • ETA'ya kadar geçen süre
  • kalan sürüş mesafesi

Rota çoklu çizgi seçeneklerini, ayarlanan değerden küçük veya bu değere eşit bir değere ayarlayın görebilirsiniz. Ö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örünür

Bu yalnızca aracın konumu ve Çoklu çizgi görünürlük seçenekleri uygun. Ö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 uyumluluğu devre dışı bırakma

Haritanın görüntü alanını otomatik olarak araca sığdırmasını durdurabilirsiniz ve öngörülen rotayı otomatik olarak sığdırmayı devre dışı bırakır. 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?