Rota çoklu çizgilerini özelleştirin

Platform seçin: Android iOS JavaScript

Bu dokümanda, tüketici kullanıcılar için web tabanlı yolculuk izleme uygulamanızda kullandığınız harita için rota çoklu çizgilerini nasıl özelleştireceğiniz açıklanmaktadır.

Tüketici SDK'sı ile rota çoklu çizgisinin görünürlüğünü kontrol edebilir veya haritadaki bir yolculuğun rotası için rota çoklu çizgisini biçimlendirebilirsiniz. SDK, yolculuğun etkin veya kalan yolundaki her koordinat çifti için bir google.maps.Polyline nesnesi oluşturur. Daha sonra kitaplık, bu özelleştirmeleri iki durumda uygular:

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

Rota çoklu çizgilerinin stilini belirleme

İşaretçilere stil verirken yaptığınız gibi, rota çoklu çizgilerine de özelleştirme parametrelerini kullanarak stil verebilirsiniz. Ardından, aşağıdaki yaklaşımlardan birini kullanarak stili yapılandırın:

  • En basit: Oluşturulduklarında veya güncellendiğinde eşleşen tüm Polyline nesnelerine uygulamak için PolylineOptions kullanın.
  • Gelişmiş: Özelleştirme işlevi belirtin. Özelleştirme işlevleri, Fleet Engine tarafından gönderilen verilere göre nesnelerin ayrı ayrı stillandırılmasına olanak tanır. Bu işlev, yolculuğun mevcut durumuna göre her nesnenin stilini değiştirebilir. Örneğin, Polyline nesnesini daha koyu bir gölgeyle renklendirme veya araç yavaş giderken daha kalın hale getirme. Fleet Engine dışındaki kaynaklardan veri birleştirebilir ve Polyline nesnesini bu bilgilere göre biçimlendirebilirsiniz.

Özelleştirme parametreleri

Rota poli çizgilerine stil uygularken FleetEngineTripLocationProviderOptions içinde sağlanan parametreleri kullanırsınız. Bu parametreler, aracın yolculuğunda aşağıdaki gibi farklı yol durumları sağlar:

PolylineOptions hareketini kullanın

Aşağıdaki örnekte, PolylineOptions ile Polyline nesnesi için stilin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen çoklu çizgi özelleştirmelerinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

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

TypeScript

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

Güzergah çoklu çizgilerini biçimlendirmek için özelleştirme işlevlerini kullanın

Aşağıdaki örnekte, etkin rota çoklu çizgisi için stilin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen rota çoklu çizgisi özelleştirme parametrelerinden herhangi birini kullanarak Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[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 route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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'});
      }
    }
  };

Rota çoklu çizgi görünürlüğünü kontrol etme

Varsayılan olarak tüm Polyline nesneleri görünür. Bir Polyline nesnesini görünmez yapmak için visible mülkünü ayarlayın:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};