Haritanın stilini ayarlama

Bu belgede, haritanın görünümünü ve tarzını özelleştirme, veri görünürlüğünü ve görüntü alanı seçeneklerini kontrol etme konuları 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 stilleriyle haritayı stillendirme

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

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

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

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 stilize etme

JourneySharingMapView oluştururken harita seçeneklerini ayarlayarak harita stilini de özelleştirebilirsiniz. Aşağıdaki örneklerde, harita seçenekleri kullanılarak bir haritanın nasıl stillendirileceğ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.

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

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 haritadaki 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öreve 5 durak mesafedeyken görünür. Görünürlük, görev tamamlandığında veya iptal edildiğinde sona erer.

Bu tabloda, her görev türü için varsayılan görünürlük gösterilir. Birçok görevin görünürlüğünü özelleştirebilirsiniz ancak tüm görevler için bu mümkün değildir. Görev türleri hakkında daha fazla bilgi için Programlanmış görevler kılavuzundaki Görev türleri bölümüne bakın.

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 bir dizi görev veri öğesi sağlar.

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

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

Ö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.

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 görünür değilse rota çoklu çizgileri de görünür olamaz. Aksi takdirde, araç konumu çoklu çizginin sonundan 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.

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    

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

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

Otomatik sığdırmayı 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.

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

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

Sırada ne var?

• İşaretçileri özelleştirme
• Çoklu çizgileri özelleştirme