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 haritanın rota çoklu çizgilerini nasıl özelleştireceğiniz açıklanmaktadır.

Consumer SDK ile rota poliline görünürlüğünü kontrol edebilir veya haritada bir yolculuğun rotası için rota poliline stil verebilirsiniz. SDK, yolculuğun etkin veya kalan yolundaki her koordinat çifti için bir google.maps.Polyline nesnesi oluşturur. Kitaplık daha sonra 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 şekillendirebildiğiniz gibi, rota çoklu çizgilerini de özelleştirme parametrelerini kullanarak şekillendirirsiniz. Buradan sonra, aşağıdaki yaklaşımlardan birini kullanarak stil yapılandırması yaparsınız:

  • 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ş: Özelleştirme işlevi belirtin. Özelleştirme işlevleri, Fleet Engine tarafından gönderilen verilere göre nesnelerin ayrı ayrı stilize edilmesine olanak tanır. Bu işlev, her nesnenin stilini yolculuğun mevcut durumuna göre değiştirebilir. Örneğin, araç daha yavaş hareket ettiğinde Polyline nesnesini daha koyu bir renge boyayabilir veya daha kalın hale getirebilir. Hatta Fleet Engine dışındaki kaynaklardan gelen bilgilere göre de birleştirme yapabilir ve Polyline nesnesini bu bilgilere göre şekillendirebilirsiniz.

Özelleştirme parametreleri

Rota çoklu çizgilerini stilize ederken 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 Polyline nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen çoklu çizgi özelleştirmelerinden herhangi birini kullanarak Polyline nesnelerin stilini özelleştirmek için bu kalıbı izleyin.

JavaScript

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

TypeScript

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

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

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

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. Polyline nesnesini görünmez yapmak için visible özelliğini ayarlayın:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};