Bu dokümanda, izlenen rotalar için rotaların görünüm ve tarzının nasıl özelleştirileceği ele alınmaktadır.
görebilirsiniz. Rotalar, harita üzerinde çoklu çizgilerle çizilir. Her bir
bir aracın etkin veya kalan yolunda bulunan koordinatlar,
google.maps.Polyline
nesnesini tıklayın.
Çoklu çizgi özelleştirmeleri belirterek Polyline
nesnelerini biçimlendirebilirsiniz:
daha sonra kitaplık iki durumda uygulanır:
- Nesneleri haritaya eklemeden önce
- Nesneler için kullanılan veriler değiştiğinde
Çoklu çizgilerin stilini ayarlama
İşaretçileri özelleştirirken yaptığınız gibi rota çoklu çizgilerini de farklı şekillerde kullanabilirsiniz:
Rota çoklu çizgilerini türe göre biçimlendirme:
PolylineOptions
öğesini, eşleşen tümPolyline
nesnelere oluşturabilir veya güncelleyebilir. Örnek için Çoklu çizgileri türe göre biçimlendirme bölümüne göz atın.Verilere dayalı olarak rota çoklu çizgilerinin stilini belirleme: Bir özelleştirme işlevi belirtin filo izleme veya dış kaynaklardan gelen verilere göre:
Filo izleme verileri: Filo izleme, çoklu çizgi verilerini özelleştirme işlevi (mevcut araçtaki veriler dahil) durumu. Bu verilere dayanarak çoklu çizgileri, renklendirme de dahil olmak üzere biçimlendirebilirsiniz
Polyline
nesneye daha koyu bir renk uygulanır veya Araç daha yavaş hareket ediyor.Dış kaynaklar: Filo izleme verilerini ve
Polyline
nesnesini buna göre biçimlendirin ekleyebilirsiniz.
Örnek için Verilere dayalı çoklu çizgileri biçimlendirme bölümüne bakın.
Rota çoklu çizgilerinin görünürlüğünü kontrol etme: Çoklu çizgileri gizleyebilir veya gösterebilirsiniz. çoklu çizgiler için
visible
özelliğini kullanabilirsiniz. Ayrıntılar için bkz. Bu kılavuzdaki çoklu çizgilerin görünürlüğünü kontrol edin.Bir araç veya konum işaretçisiyle ilgili ek bilgileri görüntüleme:
infowindow
özelliğini kullanarak daha fazla bilgi gösterebilirsiniz. Örneğin, için bkz. Bir araç veya konum işaretçisiyle ilgili ek bilgileri göster: inceleyebilirsiniz.
Çoklu çizgi özelleştirme seçenekleri
Aşağıdaki özelleştirme seçenekleri her iki sürümde de kullanılabilir:
FleetEngineVehicleLocationProviderOptions
ve
FleetEngineDeliveryVehicleLocationProviderOptions
.
Aracın farklı yol durumları için özelleştirmeler ayarlayabilirsiniz.
yolculuk:
Gitmiş olduğunuz yol:
takenPolylineCustomization
- kullanın İsteğe bağlı geziler, Planlanmış görevler referansları.Etkin gidilen yol:
activePolylineCustomization
- kullanın İsteğe bağlı geziler, Planlanmış görevler referansları.Henüz gidilmemiş yol:
remainingPolylineCustomization
- kullanın İsteğe bağlı geziler, Planlanmış görevler referansları.
Rota çoklu çizgilerinin stilini türe göre belirleyin
Rota çoklu çizgilerini türe göre biçimlendirmek için Polyline
nesnelerin stilini değiştirin
PolylineOptions
kullanılıyor.
Aşağıdaki örnekte, bir Polyline
nesnesi için stilin nasıl yapılandırılacağı gösterilmektedir
PolylineOptions
ile. Herhangi bir dosyanın stilini özelleştirmek için bu kalıbı
Şu konumlarda listelenen rota çoklu çizgi özelleştirmelerinden herhangi birini kullanan Polyline
nesnesi:
Bu kılavuzdaki Çoklu çizgi özelleştirme seçenekleri.
İsteğe bağlı geziler veya planlanmış görevler için örnek
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Verileri kullanarak rota çoklu çizgilerinin stilini belirleme
Verileri kullanarak rota çoklu çizgilerini biçimlendirmek için Polyline
nesnelerin stilini değiştirin
nasıl kullanacağınızı göstereceğim.
Aşağıdaki örnekte, etkin bir rota için stilin nasıl yapılandırılacağı gösterilmektedir
kullanarak RACI matrisi gibi görünebilir. Stilini özelleştirmek için bu kalıbı izleyin
Listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanan herhangi bir Polyline
nesnesi
Çoklu çizgi özelleştirme seçenekleri bölümüne göz atın.
İsteğe bağlı geziler örneği
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[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'});
}
}
};
Planlanmış görevler örneği
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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'});
}
}
};
Trafiğe duyarlı stil örneği (yalnızca isteğe bağlı geziler)
Fleet Engine, Search Ads 360'ın etkin ve kalan yolları için
takip edilen araç. Polyline
stilini biçimlendirmek için bu bilgileri kullanabilirsiniz
nesnelere göre çalışır:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Çoklu çizgilerin görünürlüğünü kontrol edin
Varsayılan olarak tüm Polyline
nesneleri görünür. Polyline
nesnesi oluşturmak için
görünmezse visible
özelliğini false
olarak ayarlayın.
İsteğe bağlı geziler veya planlanmış görevler için örnek
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Bir araç veya konum işaretçisi için bilgi penceresi görüntüleyin
Bir InfoWindow
ile ilgili ek bilgileri görüntüleyebilirsiniz.
araç veya konum işaretçisi.
Aşağıdaki örnekte, InfoWindow
oluşturma ve bunu bir
araç işaretçisi.
İsteğe bağlı geziler örneği
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
Planlanmış görevler örneği
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();