Rota çoklu çizgilerini özelleştirin

Bu dokümanda, Google Haritalar'da kullandığınız haritanın çoklu çizgilerinin nasıl özelleştirileceği açıklanmaktadır. web tabanlı yolculuk izleme uygulamanız.

Tüketici SDK'sı ile rota çoklu çizgi görünürlüğünü kontrol edebilir veya yolculuğun rotası için çoklu çizgi kullanılır. SDK, Yolculuğun her bir koordinat çifti için google.maps.Polyline nesnesi veya kalan yolu seçin. Ardından kitaplık, bu özelleştirmeleri iki durum vardır:

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

Rota çoklu çizgilerinin stilini ayarlama

İşaretçilerin stil özelliklerini ayarlamaya benzer şekilde, özelleştirme parametrelerini içerebilir. Ardından, aşağıdaki yaklaşımlardan birini kullanarak stili yapılandırın:

• En basit: Aşağıdakilerin tümüne uygulamak için PolylineOptions kullanın: oluşturulduğunda veya güncellendiğinde Polyline nesneyle eşleşti.
• Gelişmiş: Özelleştirme işlevi belirtin. Özelleştirme işlevleri, nesnelerin verileri Fleet Engine tarafından gönderilir. İşlev, her öğenin stilini değiştirebilir yolculuğun mevcut durumuna göre nesne; Örneğin, Yeşil Ofis’teki Polyline daha derin bir gölgeye veya araç yanarken daha kalın hale getirmeye çalışın yavaş hareket ediyor. Fleet Engine dışındaki kaynaklardan da katılabilirsiniz ve Polyline nesnesinin stilini bu bilgilere göre şekillendirin.

Özelleştirme parametreleri

Rota çoklu çizgilerinin stilini belirlerken FleetEngineTripLocationProviderOptions. Bu parametreler, aracın yolculuğunda aşağıdaki gibi farklı yol durumları sağlar:

• Önceden seyahat edilmiş yollar: takenPolylineCustomization öğesini kullanın.
• Aktif olarak kat edilen yol: activePolylineCustomization simgesini kullanın.
• Henüz seyahat edilmemiş yol: remainingPolylineCustomization değerini kullanın.

PolylineOptions hareketini kullanın

Aşağıdaki örnekte, bir Polyline nesnesi için stilin nasıl yapılandırılacağı gösterilmektedir PolylineOptions ile. Stilini özelleştirmek için bu kalıbı izleyin daha önce listelenen çoklu çizgi özelleştirmelerinden herhangi birini kullanan herhangi bir Polyline nesnesi.

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

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

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

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

// 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'});
      }
    }
  };

// 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ürdür. Polyline nesnesi oluşturmak için görünmezse visible özelliğini ayarlayın:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};