Rota çoklu çizgilerini özelleştirin

Bu dokümanda, harita üzerinde izlenen araçların rotalarının görünümü ve tarzının nasıl özelleştirileceği ele alınmaktadır. Rotalar, haritada poli çizgiler olarak çizilir. Kitaplık, bir aracın etkin veya kalan yolunda bulunan her koordinat çifti için bir google.maps.Polyline nesnesi oluşturur. Kitaplığın iki durumda uygulayacağı poli çizgi özelleştirmelerini belirterek Polyline nesnelerine stil uygulayabilirsiniz:

  • Nesneleri haritaya eklemeden önce
  • Nesneler için kullanılan veriler değiştiğinde

Çoklu çizgileri biçimlendirme

İşaretçileri özelleştirebildiğiniz gibi rota poli çizgilerini de farklı şekillerde biçimlendirebilirsiniz:

  1. Rota çoklu çizgilerini türe göre biçimlendirme: Eşleşen tüm Polyline nesneleri oluşturulurken veya güncellenirken PolylineOptions seçeneğini kullanın. Örnek için Çoklu çizgileri türe göre biçimlendirme başlıklı makaleyi inceleyin.

  2. Rota poli çizgilerini verilere göre biçimlendirme: Filo takibi veya harici kaynaklardan gelen verilere dayalı bir özelleştirme işlevi belirtin:

    • Araç takip verilerinden: Araç takip, mevcut araç durumuyla ilgili veriler de dahil olmak üzere çoklu çizgi verilerini özelleştirme işlevine iletir. Poli çizgilere bu verilere göre stil verebilirsiniz. Örneğin, Polyline nesnesini daha koyu bir gölgede renklendirebilir veya araç daha yavaş hareket ederken daha kalın hale getirebilirsiniz.

    • Dış kaynaklar: Filo takibi verilerini Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir ve Polyline nesnesini bu bilgilere göre biçimlendirebilirsiniz.

    Örnek için Poli çizgileri verilere göre biçimlendirme bölümüne bakın.

  3. Rota çoklu çizgilerinin görünürlüğünü kontrol etme: visible mülkünü kullanarak çoklu çizgileri gizleyebilir veya gösterebilirsiniz. Ayrıntılar için bu kılavuzun Çoklu çizgilerin görünürlüğünü kontrol etme bölümüne bakın.

  4. Bir araç veya konum işaretçisi için ek bilgi görüntüleme: infowindow mülkünü kullanarak ek bilgiler gösterebilirsiniz. Ayrıntılar için bu kılavuzun Araç veya konum işaretçisi için ek bilgi görüntüleme bölümüne bakın.

Çoklu çizgi özelleştirme seçenekleri

Aşağıdaki özelleştirme seçenekleri hem FleetEngineVehicleLocationProviderOptions hem de FleetEngineDeliveryVehicleLocationProviderOptions'te kullanılabilir. Aracın yolculuğunda farklı yol durumları için özelleştirmeler ayarlayabilirsiniz:

Rota poli çizgilerini türe göre biçimlendirme

Rota çoklu çizgilerine türe göre stil uygulamak için PolylineOptions öğelerinin stilini PolylineOptions kullanarak değiştirin.

Aşağıdaki örnekte, PolylineOptions ile bir Polyline nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir. Bu kılavuzun Çoklu çizgi özelleştirme seçenekleri bölümünde listelenen rota çoklu çizgi özelleştirmelerinden birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

İsteğe bağlı geziler veya planlanmış görevler için örnek

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Verileri kullanarak rota çoklu çizgilerine stil uygulama

Verileri kullanarak rota çoklu çizgilerine stil uygulamak için özelleştirme işlevlerini kullanarak Polyline nesnelerinin stilini değiştirin.

Aşağıdaki örnekte, bir özelleştirme işlevi kullanılarak etkin bir rotanın stilinin nasıl yapılandırılacağı gösterilmektedir. Bu kılavuzun Çoklu çizgi özelleştirme seçenekleri bölümünde listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

Talep üzerine gezi örneği

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Planlanmış görevler örneği

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Trafik durumuna duyarlı stil örneği (yalnızca isteğe bağlı seyahatler)

Fleet Engine, takip edilen aracın etkin ve kalan yolları için trafik hızı verilerini döndürür. PolylineÖğeleri trafik hızlarına göre biçimlendirmek için bu bilgileri kullanabilirsiniz:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Poli çizgilerin görünürlüğünü kontrol etme

Varsayılan olarak tüm Polyline nesneleri görünürdür. Bir Polyline nesnesini görünmez yapmak için visible özelliğini false olarak ayarlayın.

İsteğe bağlı geziler veya planlanmış görevler için örnek

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Bir araç veya konum işaretçisi için bilgi penceresi görüntüleme

Bir araç veya konum işaretçisi hakkında ek bilgi görüntülemek için InfoWindow kullanabilirsiniz.

Aşağıdaki örnekte, InfoWindow öğesinin nasıl oluşturulacağı ve bir araç işaretçisine nasıl ekleneceği gösterilmektedir.

Talep üzerine gezi örneği

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Planlanmış görevler örneği

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Sırada ne var?