Bu dokümanda, tüketici kullanıcılar ve filo operatörleri için web tabanlı yolculuk izleme uygulamanızda kullandığınız harita için rota çoklu çizgilerinin nasıl özelleştirileceği açıklanmaktadır.
Consumer SDK ile rota çoklu çizgi görünürlüğünü kontrol edebilir veya haritada 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çilerin stil özelliklerini nasıl ayarlayacağınıza benzer şekilde, özelleştirme parametrelerini kullanarak rota çoklu çizgilerinin stilini belirleyebilirsiniz. Ardından, aşağıdaki yaklaşımlardan birini kullanarak stili yapılandırın:
- En basit: Eşleşen tüm
Polyline
nesneleri oluşturulduğunda veya güncellendiğinde bunlara uygulamak içinPolylineOptions
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. İşlev, her bir öğenin stilini yolculuğun mevcut durumuna göre değiştirebilir. Örneğin,
Polyline
öğesini daha koyu bir tonda renklendirebilir veya araç daha yavaş hareket ettiğinde daha kalın hale getirebilir. Hatta Fleet Engine dışındaki kaynaklardan da birleştirebilir vePolyline
nesnesinin stilini bu bilgilere göre belirleyebilirsiniz.
Özelleştirme parametreleri
Rota poli çizgilerine stil uygularken FleetEngineShipmentLocationProviderOptions
içinde sağlanan parametreleri kullanırsınız. 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 seyahat edilen yol:
activePolylineCustomization
değerini kullanın. - Henüz kullanılmamış yol:
remainingPolylineCustomization
simgesini kullanın.
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.taskTrackingInfo.remainingDrivingDistanceMeters;
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: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
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};