Bu dokümanda, Google Haritalar'da kullandığınız haritanın çoklu çizgilerinin nasıl özelleştirileceği açıklanmaktadır. Tüketici kullanıcıları ve filo operatörleri için 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, şu yaklaşımlardan yararlanabilirsiniz:
- En basit: Aşağıdakilerin tümüne uygulamak için
PolylineOptions
kullanın: oluşturulduğunda veya güncellendiğindePolyline
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 vePolyline
nesnesinin stilini bu bilgilere göre şekillendirin.
Özelleştirme parametreleri
Rota çoklu çizgilerinin stilini belirlerken
FleetEngineShipmentLocationProviderOptions
. Bu parametreler,
aracın yolculuğundaki farklı yol durumlarını şöyle sıralayabilir:
- Önceden seyahat edilmiş yollar:
takenPolylineCustomization
öğesini kullanın. - Aktif olarak seyahat edilen yol:
activePolylineCustomization
değerini 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.
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 bir rota için stilin nasıl yapılandırılacağı gösterilmektedir
çoklu çizgi. 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.
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. Polyline
nesnesi oluşturmak için
görünmezse visible
özelliğini ayarlayın:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};