این سند نحوه سفارشی کردن ظاهر و احساس مسیرها را برای وسایل نقلیه ردیابی شده بر روی نقشه پوشش می دهد. مسیرها بر روی نقشه در چند خط ترسیم می شوند. برای هر جفت مختصات در مسیر فعال یا باقی مانده یک وسیله نقلیه، کتابخانه یک شی google.maps.Polyline
ایجاد می کند. میتوانید با تعیین سفارشیسازیهای چند خطی که کتابخانه در دو موقعیت اعمال میکند، به اشیاء Polyline
استایل دهید:
- قبل از اضافه کردن اشیا به نقشه
- هنگامی که داده های مورد استفاده برای اشیاء تغییر کرده است
چند خط استایل
مشابه روشی که می توانید نشانگرها را سفارشی کنید، می توانید چند خط مسیر را به روش های مختلف استایل دهید:
چند خطوط مسیر سبک بر اساس نوع : از
PolylineOptions
استفاده کنید تا به همه اشیاءPolyline
مطابقت داده شده در هنگام ایجاد یا بهروزرسانی اعمال شوند. برای مثال، به Style polylines بر اساس نوع نگاه کنید.چند خط مسیر سبک بر اساس داده ها : یک تابع سفارشی سازی را بر اساس داده های ردیابی ناوگان یا منابع خارجی مشخص کنید:
دادههای ردیابی ناوگان : ردیابی ناوگان دادههای چند خطی را به تابع سفارشیسازی، از جمله دادههای وضعیت فعلی خودرو ارسال میکند. میتوانید بر اساس این دادهها، چند خطها را سبک کنید، از جمله رنگ کردن شی
Polyline
با سایه عمیقتر، یا ضخیمتر کردن آن وقتی که خودرو کندتر حرکت میکند.منابع خارجی : میتوانید دادههای ردیابی ناوگان را با دادههای منابع خارج از Fleet Engine ترکیب کنید و شی
Polyline
را بر اساس آن اطلاعات استایل دهید.
برای مثال، به Style polylines بر اساس داده ها مراجعه کنید.
کنترل نمایان بودن چند خطوط مسیر : می توانید چند خطوط را با استفاده از ویژگی
visible
پنهان یا نمایش دهید. برای جزئیات، به کنترل دید چند خطی در این راهنما مراجعه کنید.نمایش اطلاعات اضافی برای یک وسیله نقلیه یا نشانگر مکان : می توانید اطلاعات اضافی را با استفاده از ویژگی
infowindow
نشان دهید. برای جزئیات، به نمایش اطلاعات اضافی برای یک وسیله نقلیه یا نشانگر مکان در این راهنما مراجعه کنید.
گزینه های سفارشی سازی Polyline
گزینه های سفارشی سازی زیر در FleetEngineVehicleLocationProviderOptions
و FleetEngineDeliveryVehicleLocationProviderOptions
موجود هستند. شما می توانید سفارشی سازی هایی را برای حالت های مسیر مختلف در سفر خودرو تنظیم کنید:
مسیر قبلاً طی شده : از
takenPolylineCustomization
استفاده کنید - سفرهای درخواستی ، مرجع وظایف برنامه ریزی شده .مسیر حرکت فعال : از
activePolylineCustomization
- سفرهای درخواستی ، مرجع وظایف برنامه ریزی شده استفاده کنید.مسیر هنوز طی نشده است :
remainingPolylineCustomization
- سفرهای درخواستی ، مرجع وظایف برنامه ریزی شده استفاده کنید.
چند خط مسیر را بر اساس نوع سبک کنید
برای استایل دادن به چند خطوط مسیر بر اساس نوع، استایل اشیاء Polyline
را با استفاده از PolylineOptions
تغییر دهید.
مثال زیر نحوه پیکربندی یک ظاهر طراحی شده برای یک شی Polyline
را با PolylineOptions
نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از سفارشیسازیهای چند خط مسیر فهرست شده در گزینههای سفارشیسازی Polyline در این راهنما، استایل هر شی Polyline
را سفارشی کنید.
مثال برای سفرهای درخواستی یا کارهای برنامه ریزی شده
جاوا اسکریپت
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
چند خطوط مسیر را با استفاده از داده ها سبک کنید
برای استایل دادن به چند خطوط مسیر با استفاده از داده، استایل اشیاء Polyline
را با استفاده از توابع سفارشیسازی تغییر دهید.
مثال زیر نحوه پیکربندی یک ظاهر طراحی شده برای یک مسیر فعال با استفاده از یک تابع سفارشی سازی را نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از پارامترهای سفارشی سازی چند خطی فهرست شده در گزینه های سفارشی سازی Polyline در این راهنما، استایل هر شی Polyline
را سفارشی کنید.
نمونه سفرهای درخواستی
جاوا اسکریپت
// 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'});
}
}
};
نمونه کارهای برنامه ریزی شده
جاوا اسکریپت
// 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'});
}
}
};
نمونه سبک آگاه از ترافیک (فقط سفرهای درخواستی)
Fleet Engine داده های سرعت ترافیک را برای مسیرهای فعال و باقی مانده برای وسیله نقلیه دنبال شده برمی گرداند. می توانید از این اطلاعات برای استایل دادن به اشیاء Polyline
با توجه به سرعت ترافیک آنها استفاده کنید:
جاوا اسکریپت
// 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'});
}
}
};
دید چند خطی را کنترل کنید
به طور پیش فرض، تمام اشیاء Polyline
قابل مشاهده هستند. برای نامرئی کردن یک شی Polyline
، ویژگی visible
آن را روی false
قرار دهید.
مثال برای سفرهای درخواستی یا کارهای برنامه ریزی شده
جاوا اسکریپت
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
نمایش یک پنجره اطلاعاتی برای یک وسیله نقلیه یا نشانگر مکان
می توانید از InfoWindow
برای نمایش اطلاعات اضافی در مورد یک وسیله نقلیه یا نشانگر موقعیت استفاده کنید.
مثال زیر نحوه ایجاد InfoWindow
و اتصال آن به نشانگر خودرو را نشان می دهد.
نمونه سفرهای درخواستی
جاوا اسکریپت
// 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();
نمونه کارهای برنامه ریزی شده
جاوا اسکریپت
// 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();