Rota çoklu çizgilerini özelleştirin

Platform seçin: Android iOS JavaScript

Bu belgede, tüketici kullanıcılar için web tabanlı yolculuk izleme uygulamanızda kullandığınız haritada 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. 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çileri stillendirebildiğiniz gibi, rota çoklu çizgilerini de özelleştirme parametrelerini kullanarak stillendirebilirsiniz. Buradan, aşağıdaki yaklaşımlardan birini kullanarak stil yapılandırması yapabilirsiniz:

  • En basit yöntem: Oluşturulduklarında veya güncellendiklerinde eşleşen tüm Polyline nesnelere uygulamak için PolylineOptions kullanın.
  • Gelişmiş: Bir özelleştirme işlevi belirtin. Özelleştirme işlevleri, Fleet Engine tarafından gönderilen verilere göre nesnelerin bağımsız stillendirilmesine olanak tanır. İşlev, her nesnenin stilini yolculuğun mevcut durumuna göre değiştirebilir. Örneğin, araç daha yavaş hareket ederken Polyline nesnesini daha koyu bir renge boyayabilir veya daha kalın hale getirebilir. Hatta Fleet Engine dışındaki kaynaklardan gelen verileri birleştirebilir ve Polyline nesnesini bu bilgilere göre biçimlendirebilirsiniz.

Özelleştirme parametreleri

Rota çoklu çizgilerini stillendirirken FleetEngineTripLocationProviderOptions içinde sağlanan parametreleri kullanırsınız. Bu parametreler, aracın yolculuğundaki farklı yol durumlarını aşağıdaki gibi sağlar:

PolylineOptions hareketini kullanın

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

JavaScript

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

TypeScript

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

Rota çoklu çizgilerini stillendirmek için özelleştirme işlevlerini kullanma

Aşağıdaki örnekte, etkin bir rota çoklu çizgisinin stilinin 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 çizgisinin 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 özelliğini ayarlayın:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};