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 stilleri kullanın
  • Harita stili seçeneklerini doğrudan kendi kodunuzda ayarlama

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 ve ConsumerMapFragment Sınıflar bulut tabanlı harita stilini 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ş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) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, 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

Google Cloud'da bulut tabanlı harita stilini kullanmanın iki yolu vardır: ConsumerMapFragments:

  • 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 stilini newInstance ile kullanmak için ConsumerMapFragment, GoogleMapOptions üzerinde mapId alanını ayarlayıp GoogleMapOptions - newInstance. 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 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'daki görünürlüğünü kontrol et

Harita üzerindeki belirli görev nesnelerinin görünürlüğünü kontrol etmek için şunları kullanabilirsiniz: görünürlük kuralları.

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

Varsayılan olarak, bir araca atanan görevlere ait veriler araç, göreve en fazla 5 durak mesafede olduğunda. Görünürlük, görev şu olduğunda sona erer: ya da iptal edildiğini görebilirsiniz.

Bu tabloda, her görev türü için varsayılan görünürlük gösterilir. Şunları yapabilirsiniz: tüm görevler için olmasa da birçok görev için görünürlüğü özelleştirebilirsiniz. Görevle ilgili daha fazla bilgi için Planlanmış görevler kılavuzundaki Görev türleri bölümüne göz atın.

Görev türü Varsayılan görünürlük Özelleştirilebilir mi? Açıklama
Kullanılabilir olmayan görevler Görünmez Hayır Sürücü molaları ve yakıt doldurma için kullanılır. Bir teslim görevine giden bir rotaysa başka bir araç durağı da içeriyorsa bu durak gösterilmez görev içeren bir anahtar kelime olabilir. Tahmini varış saati ve tahmini görev tamamlanma süresi, teslimat için görevdir.
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. 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ştirin

TaskTrackingInfo arayüzünde çeşitli görev verileri öğeleri bulunur. tüketici SDK'sı ile görünür hale getirebileceğiniz yeni bir kod snippet'i ekleyin.

Özelleştirilebilir görev veri öğeleri

Rota çoklu çizgileri

Tahmini varış süresi

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çeneği

Görünürlük yapılandırmasını şu ayarları yaparak görev bazında özelleştirebilirsiniz: TaskTrackingViewConfig içinde bir görev oluştururken veya güncellerken Filo Motoru. 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 olan süre

Kalan sürüş mesafesi

Her zaman görünür

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

Açıklamak gerekirse, bir örnek özelleştirmenin üç reklam için görünürlüğü ayarladığını varsayalım veri öğelerinden yararlanabilirsiniz. Diğer tüm öğeleri 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 içinde.
TVS Göster Kalan sürüş mesafesi 5.000'den kısa metre.
Kalan durak sayısı Hiçbir zaman gösterme Araç 3 durak içinde.

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ı

Aracın konumu da aynı şekilde olmadığı sürece rota çoklu çizgileri görülemez visible; Aksi takdirde, aracın bulunduğu konum bir çoklu çizgi.

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

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ı. Aracın konumunu her zaman görünür olacak şekilde ayarlayın.
Araç konumu, hiçbir zaman görülemez olarak ayarlandı. Rota çoklu çizgilerini hiçbir zaman görülemeyecek şekilde ayarlayın.
Görünürlük seçeneği aşağıdakilerden herhangi biridir:
  • kalan şarj noktası sayısı
  • TVS'ye kalan 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österiliyor

Bu durum yalnızca hem aracın konumu hem de araç konumu kullanıldığında geçerlidir Ç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 durma sayısı en az 3 VE kalan sürüş mesafe en az 3000 metre.

Otomatik sığdırmayı devre dışı bırak

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 örnek yolculuk paylaşımını yapılandırdığınızda otomatik sığdırmanın nasıl devre dışı bırakılacağını gösterir harita görünümüne gidin.

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?