इस दस्तावेज़ में, मैप पर ट्रैक किए गए वाहनों के रास्तों के लुक और बनावट को पसंद के मुताबिक बनाने का तरीका बताया गया है. रास्तों को मैप पर पॉलीलाइन के तौर पर दिखाया जाता है. किसी वाहन के चालू या बचे हुए पाथ में मौजूद हर कोऑर्डिनेट के लिए, लाइब्रेरी एक google.maps.Polyline
ऑब्जेक्ट बनाती है.
Polyline
ऑब्जेक्ट को स्टाइल किया जा सकता है. इसके लिए, पॉलीलाइन में किए गए बदलावों के बारे में बताएं. इसके बाद, लाइब्रेरी इन बदलावों को दो स्थितियों में लागू करती है:
- मैप में ऑब्जेक्ट जोड़ने से पहले
- जब ऑब्जेक्ट के लिए इस्तेमाल किए गए डेटा में बदलाव हुआ हो
पॉलीलाइन की स्टाइल बदलना
मार्कर को पसंद के मुताबिक बनाने की तरह ही, रूट की पॉलीलाइन को अलग-अलग तरीकों से स्टाइल किया जा सकता है:
टाइप के हिसाब से स्टाइल रूट पॉलीलाइन:
PolylineOptions
का इस्तेमाल करके, मैच किए गए सभीPolyline
ऑब्जेक्ट पर स्टाइल लागू करें. ऐसा तब करें, जब उन्हें बनाया या अपडेट किया गया हो. उदाहरण के लिए, टाइप के हिसाब से पॉलीलाइन को स्टाइल करना देखें.डेटा के आधार पर, रास्ते की पॉलीलाइन को स्टाइल करना: फ़्लीट ट्रैकिंग या बाहरी सोर्स से मिले डेटा के आधार पर, पसंद के मुताबिक बनाने का फ़ंक्शन तय करें:
फ़्लीट ट्रैकिंग से मिला डेटा: फ़्लीट ट्रैकिंग, पॉलीलाइन डेटा को पसंद के मुताबिक बनाने वाले फ़ंक्शन को पास करती है. इसमें वाहन की मौजूदा स्थिति का डेटा भी शामिल होता है. इस डेटा के आधार पर, पॉलीलाइन को स्टाइल किया जा सकता है. जैसे,
Polyline
ऑब्जेक्ट को गहरे रंग का करना या वाहन के धीरे चलने पर उसे मोटा करना.बाहरी सोर्स: फ़्लीट ट्रैकिंग के डेटा को Fleet Engine के बाहर के सोर्स से मिले डेटा के साथ जोड़ा जा सकता है. साथ ही, उस जानकारी के आधार पर
Polyline
ऑब्जेक्ट को स्टाइल किया जा सकता है.
उदाहरण के लिए, डेटा के आधार पर पॉलीलाइन को स्टाइल करना लेख पढ़ें.
रास्ते की पॉलीलाइन की विज़िबिलिटी कंट्रोल करना:
visible
प्रॉपर्टी का इस्तेमाल करके, पॉलीलाइन को दिखाया या छिपाया जा सकता है. ज़्यादा जानकारी के लिए, इस गाइड में पॉलीलाइन की दृश्यता को कंट्रोल करना लेख पढ़ें.किसी वाहन या जगह के मार्कर के लिए अतिरिक्त जानकारी दिखाएं:
infowindow
प्रॉपर्टी का इस्तेमाल करके, अतिरिक्त जानकारी दिखाई जा सकती है. ज़्यादा जानकारी के लिए, इस गाइड में किसी वाहन या जगह के मार्कर के लिए अतिरिक्त जानकारी दिखाना लेख पढ़ें.
पॉलीलाइन को पसंद के मुताबिक बनाने के विकल्प
FleetEngineVehicleLocationProviderOptions
और FleetEngineDeliveryVehicleLocationProviderOptions
, दोनों में ये कस्टमाइज़ेशन विकल्प उपलब्ध हैं.
वाहन की यात्रा के दौरान, अलग-अलग पाथ स्टेट के लिए पसंद के मुताबिक बदलाव किए जा सकते हैं:
पहले से तय किया गया रास्ता:
takenPolylineCustomization
- मांग के हिसाब से यात्राएं, शेड्यूल किए गए टास्क का रेफ़रंस इस्तेमाल करें.यात्रा का मौजूदा पाथ:
activePolylineCustomization
- मांग पर की जाने वाली यात्राएं, शेड्यूल किए गए टास्क रेफ़रंस का इस्तेमाल करें.अब तक यात्रा नहीं की गई:
remainingPolylineCustomization
- मांग पर की जाने वाली यात्राएं, शेड्यूल किए गए टास्क का रेफ़रंस इस्तेमाल करें.
टाइप के हिसाब से रास्ते की पॉलीलाइन को स्टाइल करना
रास्ते की पॉलीलाइन को टाइप के हिसाब से स्टाइल करने के लिए, PolylineOptions
का इस्तेमाल करके Polyline
ऑब्जेक्ट की स्टाइल बदलें.
यहां दिए गए उदाहरण में, PolylineOptions
की मदद से Polyline
ऑब्जेक्ट की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. इस पैटर्न का इस्तेमाल करके, इस गाइड में पॉलीलाइन को पसंद के मुताबिक बनाने के विकल्प में दिए गए किसी भी विकल्प का इस्तेमाल करके, किसी भी Polyline
ऑब्जेक्ट की स्टाइल को पसंद के मुताबिक बनाएं.
मांग पर की जाने वाली यात्राओं या शेड्यूल किए गए टास्क का उदाहरण
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
डेटा का इस्तेमाल करके, रास्ते की पॉलीलाइन को स्टाइल करना
डेटा का इस्तेमाल करके, रास्ते की पॉलीलाइन को स्टाइल करने के लिए, कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल करके Polyline
ऑब्जेक्ट की स्टाइल बदलें.
इस उदाहरण में, कस्टम फ़ंक्शन का इस्तेमाल करके, चालू रूट के लिए स्टाइलिंग को कॉन्फ़िगर करने का तरीका बताया गया है. इस पैटर्न का इस्तेमाल करके, इस गाइड में पॉलीलाइन को पसंद के मुताबिक बनाने के विकल्प में दिए गए पॉलीलाइन को पसंद के मुताबिक बनाने के किसी भी पैरामीटर का इस्तेमाल करके, किसी भी Polyline
ऑब्जेक्ट की स्टाइल को पसंद के मुताबिक बनाएं.
मांग के हिसाब से यात्राओं का उदाहरण
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'});
}
}
};
शेड्यूल किए गए टास्क का उदाहरण
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'});
}
}
};
ट्रैफ़िक के हिसाब से स्टाइलिंग का उदाहरण (सिर्फ़ मांग पर की जाने वाली यात्राओं के लिए)
Fleet Engine, फ़ॉलो किए जा रहे वाहन के लिए, ऐक्टिव और बचे हुए रास्तों के लिए ट्रैफ़िक की स्पीड का डेटा दिखाता है. इस जानकारी का इस्तेमाल करके, Polyline
ट्रैफ़िक की स्पीड के हिसाब से ऑब्जेक्ट को स्टाइल किया जा सकता है:
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'});
}
}
};
पॉलीलाइन के दिखने की स्थिति को कंट्रोल करना
डिफ़ॉल्ट रूप से, सभी Polyline
ऑब्जेक्ट दिखते हैं. किसी Polyline
ऑब्जेक्ट को
अदृश्य बनाने के लिए, उसकी visible
प्रॉपर्टी को false
पर सेट करें.
मांग पर की जाने वाली यात्राओं या शेड्यूल किए गए टास्क का उदाहरण
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
किसी वाहन या जगह के मार्कर के लिए जानकारी वाली विंडो दिखाना
किसी वाहन या जगह के मार्कर के बारे में ज़्यादा जानकारी दिखाने के लिए, InfoWindow
का इस्तेमाल किया जा सकता है.
यहां दिए गए उदाहरण में, InfoWindow
बनाने और उसे वाहन के मार्कर से जोड़ने का तरीका बताया गया है.
मांग के हिसाब से यात्राओं का उदाहरण
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();
शेड्यूल किए गए टास्क का उदाहरण
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();