Haritanın stilini ayarlama

Bu dokümanda, haritaların görünümünü ve tarzını özelleştirmenin yanı sıra veri görünürlüğünü ve görüntü alanı seçeneklerini kontrol etme hakkında bilgiler verilmektedir. 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

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 bir 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 biçimlendirme

JourneySharingMapView'yi oluştururken harita seçeneklerini ayarlayarak da 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ında 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 haritada belirli görev nesnelerinin görünürlüğünü kontrol edebilirsiniz.

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

Bir araca atanan görevlerle ilgili veriler varsayılan olarak 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. Görevlerin görünürlüğünü özelleştirebilirsiniz ancak tümünü değil. 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.

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.

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ü 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 poli ç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.

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

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

Otomatik uyumluluğu 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.

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?

• İşaretleri özelleştirme
• Çoklu çizgileri özelleştirme