Rota çoklu çizgilerini özelleştirin

Bu belgede, takip edilen araçlar için harita üzerinde rotaların görünüm ve özelliklerinin 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 bölümüne göz atın.

  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. Bu verilere dayanarak çoklu çizgileri biçimlendirebilirsiniz. Örneğin, Polyline nesnesini daha derin bir gölgeyle renklendirebilir veya araç yavaş hareket ettiğinde 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çisiyle ilgili ek bilgiler görüntüleme: infowindow özelliğini kullanarak ek bilgiler gösterebilirsiniz. Ayrıntılar için bu kılavuzdaki Bir araç veya konum işaretçisiyle ilgili ek bilgiler 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 çizgilerini türe göre biçimlendirmek için PolylineOptions kullanarak Polyline nesnelerin stilini 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 çizgilerinin stilini belirleme

Verileri kullanarak çoklu çizgileri biçimlendirmek 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'});
      }
    }
  };

Trafiğe duyarlı stil örneği (yalnızca isteğe bağlı geziler)

Fleet Engine, takip edilen aracın etkin ve kalan yolları için trafik hızı verilerini döndürür. Bu bilgileri Polyline nesnelerini trafik hızlarına göre biçimlendirmek için 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.

İsteğe bağlı geziler ö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?