JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी की मदद से, फ़्लीट इंजन में ट्रैक की गई वाहनों की जगह और दिलचस्पी की जगहों को विज़ुअलाइज़ किया जा सकता है. लाइब्रेरी में एक JavaScript मैप कॉम्पोनेंट होता है. यह Fleet Engine से कनेक्ट करने के लिए, स्टैंडर्ड google.maps.Map इकाई और डेटा कॉम्पोनेंट का एक ड्रॉप-इन रिप्लेसमेंट है. JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी का इस्तेमाल करके,
आप अपने वेब ऐप्लिकेशन से कस्टमाइज़ किया जा सकने वाला ऐनिमेटेड शिपमेंट ट्रैकिंग अनुभव दे सकते हैं.
घटक
JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी, वाहन और मंज़िल तक पहुंचने के दौरान वाहन और रास्ते के विज़ुअलाइज़ेशन के लिए कॉम्पोनेंट उपलब्ध कराती है. साथ ही, ड्राइवर के ETA या ड्राइव करने के लिए बाकी दूरी के लिए रॉ डेटा फ़ीड उपलब्ध कराती है.
शिपमेंट ट्रैकिंग मैप व्यू
मैप व्यू कॉम्पोनेंट, वाहनों और डेस्टिनेशन की जगह को विज़ुअलाइज़ करता है. अगर किसी वाहन का रास्ता पता है, तो मैप व्यू कॉम्पोनेंट, बताए गए रास्ते पर चलने पर उस वाहन का ऐनिमेशन दिखाता है.
शिपमेंट की जगह की जानकारी देने वाला ऐप्लिकेशन
शिपमेंट की जगह की जानकारी देने वाली कंपनी, ट्रैक की गई चीज़ों की जगह की जानकारी को शिपमेंट ट्रैकिंग मैप में फ़ीड करती है. इस जानकारी का इस्तेमाल शिपिंग के पहले और आखिरी मील की जानकारी को ट्रैक करने के लिए किया जाता है.
इन चीज़ों को ट्रैक करने के लिए, शिपमेंट की जगह की जानकारी देने वाली कंपनी का इस्तेमाल किया जा सकता है:
- किसी शिपमेंट को पिक अप या डिलीवरी की जगह की जानकारी.
- डिलीवरी वाहन की जगह और रास्ता.
ट्रैक की गई जगह की जानकारी से जुड़े ऑब्जेक्ट
जगह की जानकारी देने वाला, वाहनों और डेस्टिनेशन जैसे ऑब्जेक्ट की जगह की जानकारी ट्रैक करता है.
डेस्टिनेशन की जगह
गंतव्य स्थान वह स्थान होता है जहां यात्रा खत्म होती है. शिपमेंट ट्रैकिंग के लिए, यह पहले से तय टास्क की जगह है.
वाहन की जगह की जानकारी
वाहन की जगह की जानकारी, वाहन की ट्रैक की गई जगह है. इसमें विकल्प के तौर पर, वाहन के लिए कोई रूट शामिल हो सकता है.
पुष्टि करने वाले टोकन फ़ेच करने वाला टूल
Fleet Engine में स्टोर की गई जगह की जानकारी के डेटा के ऐक्सेस को कंट्रोल करने के लिए, आपको अपने सर्वर पर Fleet Engine के लिए JSON Web Token (JWT) मिंट करने की सेवा लागू करनी होगी. इसके बाद, जगह की जानकारी के डेटा के ऐक्सेस की पुष्टि करने के लिए, JavaScript जर्नी शेयरिंग लाइब्रेरी का इस्तेमाल करके, अपने वेब ऐप्लिकेशन के हिस्से के तौर पर पुष्टि करने वाले टोकन फ़ेचर को लागू करें.
स्टाइल के विकल्प
मार्कर और पॉलीलाइन स्टाइल, मैप पर ट्रैक की गई जगह की जानकारी के लुक और स्टाइल को तय करते हैं. डिफ़ॉल्ट स्टाइलिंग को बदलकर, वेब ऐप्लिकेशन की स्टाइल से मेल खाने वाला स्टाइल बदला जा सकता है. इसके लिए, कस्टम स्टाइलिंग वाले विकल्पों का इस्तेमाल करें.
ट्रैक की गई जगहों की जानकारी दिखाने को कंट्रोल करें
यह सेक्शन, मैप पर ट्रैक किए गए ऑब्जेक्ट के दिखने की सेटिंग के बारे में बताता है. ये नियम, ऑब्जेक्ट की दो कैटगरी पर लागू होते हैं:
- जगह का मार्कर
- टास्क का डेटा
जगह के मार्कर की विज़िबिलिटी
मूल और गंतव्य के लिए सभी स्थान मार्कर हमेशा मैप पर दिखाए जाते हैं. उदाहरण के लिए, मैप पर शिपमेंट की डिलीवरी की जगह हमेशा दिखाई जाती है, चाहे डिलीवरी की जगह कुछ भी हो.
टास्क का डेटा किसको दिखे
इस सेक्शन में, टास्क से जुड़े डेटा पर लागू होने वाले, 'किसको दिखे' के डिफ़ॉल्ट नियमों के बारे में बताया गया है. जैसे, वाहन की जगह और बाकी रास्ता. आपके पास कई टास्क को अपनी पसंद के मुताबिक बनाने का विकल्प होता है. हालांकि, सभी नहीं:
- अनुपलब्ध कार्य -- आप इन कार्यों के लिए दृश्यता कस्टमाइज़ नहीं कर सकते.
- गाड़ी के चालू टास्क -- आपके पास इस तरह के टास्क को अपनी पसंद के मुताबिक बनाने का विकल्प है.
- वाहन बंद करने से जुड़े टास्क -- इन टास्क के लिए, 'किसको दिखे' सेटिंग को पसंद के मुताबिक नहीं बनाया जा सकता.
टास्क उपलब्ध न होने से जुड़े टास्क
ट्रैक किए जा रहे टास्क के रास्ते में, अगर कोई एक टास्क उपलब्ध नहीं है (उदाहरण के लिए, अगर ड्राइवर ब्रेक ले रहा है या वाहन में ईंधन भर रहा है), तो वाहन नहीं दिखेगा. टास्क पूरा होने में लगने वाला अनुमानित समय और टास्क पूरा करने में लगने वाला अनुमानित समय अब भी उपलब्ध है.
गाड़ी से जुड़े टास्क, जो चालू हैं
TaskTrackingInfo ऑब्जेक्ट, ऐसे कई डेटा एलिमेंट उपलब्ध कराता है जिन्हें शिपमेंट ट्रैकिंग लाइब्रेरी में देखा जा सकता है. डिफ़ॉल्ट रूप से, ये फ़ील्ड तब दिखते हैं, जब वाहन को टास्क असाइन किया गया हो और वाहन पांच स्टॉप के अंदर हो. टास्क पूरा होने या रद्द होने पर, प्रॉडक्ट दिखना बंद हो जाता है. फ़ील्ड इस तरह हैं:
- रूट पॉलीलाइन
- पहुंचने का अनुमानित समय
- टास्क को पूरा करने में लगने वाला अनुमानित समय
- टास्क तक गाड़ी से जाने की बची हुई दूरी
- शेष स्टॉप की संख्या
- वाहन की जगह की जानकारी
Fleet Engine में टास्क बनाते या अपडेट करते समय, टास्क पर TaskTrackingViewConfig को सेट करके, हर टास्क के हिसाब से विज़िबिलिटी कॉन्फ़िगरेशन को कस्टमाइज़ किया जा सकता है. इससे ऐसे नियम बनती हैं जिनसे यह पता चलता है कि अलग-अलग डेटा एलिमेंट कब उपलब्ध होंगे. इन शर्तों को नीचे दी गई शर्तों (इन्हें दिखने के विकल्प के तौर पर बताया गया है) पर आधारित हो सकता है:
- शेष स्टॉप की संख्या
- पहुंचने का अनुमानित समय तक का कुल समय
- ड्राइविंग के लिए बची हुई दूरी
- हमेशा दिखेगा
- कभी नहीं दिखेगा
ध्यान दें कि हर डेटा एलिमेंट को 'किसको दिखे' सेटिंग में सिर्फ़ एक विकल्प से जोड़ा जा सकता है. OR या AND का इस्तेमाल करके मापदंड को जोड़ना संभव नहीं है.
कस्टमाइज़ेशन का एक उदाहरण यहां दिया गया है. इस कस्टमाइज़ेशन के नियम ये हैं:
- अगर वाहन तीन स्टॉप में है, तो रास्ते की पॉलीलाइन दिखाएं.
- अगर ड्राइविंग के लिए बची हुई दूरी 5,000 मीटर से कम है, तो ETA दिखाएं.
- बची हुई स्टॉप की संख्या कभी न दिखाएं.
- टास्क के पांच स्टॉप के अंदर होने पर, हर दूसरे फ़ील्ड में डिफ़ॉल्ट तौर पर प्रॉडक्ट दिखेगा.
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
प्रोजेक्ट के दिखने की डिफ़ॉल्ट सेटिंग को पसंद के मुताबिक भी बनाया जा सकता है. इसके लिए, सहायता टीम से संपर्क करें.
रास्ते की पॉलीलाइन और वाहन की जगह की जानकारी दिखाने से जुड़े नियम:
अगर रास्ते की पॉलीलाइन दिख रही हैं, तो वाहन की जगह की जानकारी भी दिखनी चाहिए. ऐसा नहीं होने पर, पोलीलाइन के आखिर में वाहन की जगह बताई जा सकती है. इसका मतलब है कि रूट पॉलीलाइन में कम पाबंदियों वाला विज़िबिलिटी विकल्प नहीं हो सकता.
रास्ते की पॉलीलाइन / वाहन की जगह की जानकारी का मान्य कॉम्बिनेशन देने के लिए, इन नियमों का पालन करना ज़रूरी है:
जब रास्ते की पॉलीलाइन और वाहन की जगह के दिखने का विकल्प एक जैसा होता है, तो:
- अगर 'किसको दिखे' सेटिंग में, स्टॉप की संख्या और ETA तक का समय या ड्राइविंग की दूरी ही रहने का विकल्प है, तो रूट पॉलीलाइन की वैल्यू, वाहन की जगह के लिए, विज़िबिलिटी के इस विकल्प के सेट की गई वैल्यू से कम या उसके बराबर होनी चाहिए. इसका एक उदाहरण यहां दिया गया है:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }- अगर रास्ते की पॉलीलाइन में 'किसको दिखे' सेटिंग हमेशा दिखेगी, तो वाहन की जगह की जानकारी में भी 'किसको दिखे' सेटिंग का विकल्प हमेशा दिखना चाहिए.
- अगर वाहन की जगह की जानकारी कभी नहीं दिखती है, तो रूट पॉलीलाइन में यह विकल्प भी होना चाहिए कि वह किसे न दिखे.
जब रास्ते की पॉलीलाइन और वाहन की जगह के विज़िबिलिटी के अलग-अलग विकल्प होते हैं, तो वाहन की जगह की जानकारी सिर्फ़ तब दिखती है, जब इनके दिखने के दोनों विकल्प संतुष्ट हों.
इसका एक उदाहरण यहां दिया गया है:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, }इस उदाहरण में, वाहन की जगह सिर्फ़ तब दिखती है, जब स्टॉप की बची हुई संख्या कम से कम तीन और ड्राइविंग के लिए बाकी दूरी कम से कम 3,000 मीटर हो.
JavaScript जर्नी शेयरिंग लाइब्रेरी का इस्तेमाल शुरू करना
'JavaScript जर्नी शेयरिंग लाइब्रेरी' का इस्तेमाल करने से पहले पक्का करें कि आप Fleet Engine के बारे में जानते हैं और एपीआई पासकोड पाने के बारे में जानते हैं.
किसी डिलीवरी को ट्रैक करने के लिए, पहले ट्रैकिंग आईडी वाला दावा करें.
ट्रैकिंग आईडी का दावा करें
शिपमेंट की जगह की जानकारी देने वाली कंपनी का इस्तेमाल करके, शिपमेंट को ट्रैक करने के लिए, ट्रैकिंग आईडी वाले दावे के साथ JSON वेब टोकन (JWT) बनाएं.
JWT पेलोड बनाने के लिए, अनुमति देने वाले सेक्शन में trackingid बटन के साथ अतिरिक्त दावा जोड़ें. इसकी वैल्यू को शिपमेंट ट्रैकिंग आईडी पर सेट करें.
नीचे दिए गए उदाहरण में ट्रैकिंग आईडी के हिसाब से ट्रैकिंग के लिए टोकन बनाने का तरीका बताया गया है:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
"sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"trackingid": "tid_54321",
}
}
पुष्टि करने वाला टोकन फ़ेच करने वाला टूल बनाएं
अपने प्रोजेक्ट के सेवा खाते के सर्टिफ़िकेट का इस्तेमाल करके, सर्वर पर सही दावों के साथ मिठा हुआ टोकन पाने के लिए, पुष्टि करने वाला टोकन फ़ेचर बनाया जा सकता है. यह ज़रूरी है कि आप अपने सर्वर पर सिर्फ़ टोकन को मिंट करें और अपने सर्टिफ़िकेट को किसी भी क्लाइंट के साथ शेयर न करें. ऐसा न करने पर, आपके सिस्टम की सुरक्षा को खतरा होगा.
फ़ेचर को प्रॉमिस में रैप करके, दो फ़ील्ड के साथ डेटा स्ट्रक्चर दिखाना चाहिए:
tokenस्ट्रिंग.- संख्या
expiresInSeconds. फ़ेच करने के बाद, टोकन की समयसीमा इतने समय में खत्म हो जाती है.
इनमें से कोई भी बात सही होने पर, JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी, ऑथेंटिकेशन टोकन फ़ेचर के ज़रिए टोकन का अनुरोध करती है:
- इसका कोई मान्य टोकन नहीं होता. जैसे, नए पेज लोड होने पर फ़ेचर को कॉल न किया गया हो या फ़ेच करने वाला, टोकन के साथ वापस न आया हो.
- पिछली बार फ़ेच किए गए टोकन की समयसीमा खत्म हो चुकी है.
- पहले फ़ेच किए गए टोकन की समयसीमा खत्म होने के एक मिनट के अंदर है.
इस विकल्प को न चुनने पर, लाइब्रेरी पहले जारी किए गए और मान्य टोकन का इस्तेमाल करती है. साथ ही, फ़ेचर को कॉल नहीं करती.
नीचे दिए गए उदाहरण में, पुष्टि करने वाला टोकन फ़ेचर बनाने का तरीका बताया गया है:
JavaScript
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
TypeScript
function authTokenFetcher(options: {
serviceType: google.maps.journeySharing.FleetEngineServiceType,
context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
// The developer should generate the correct
// SERVER_TOKEN_URL based on options.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.token,
expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
};
}
टोकन को मिंट करने के लिए, सर्वर साइड एंडपॉइंट को लागू करते समय, इन बातों का ध्यान रखें:
- एंडपॉइंट को टोकन के लिए, खत्म होने का समय दिखाना चाहिए. ऊपर दिए गए उदाहरण में, इसे
data.ExpiresInSecondsके तौर पर दिया गया है. - पुष्टि करने वाले टोकन को फ़ेच करने वाले टूल को, लाइब्रेरी में समय-सीमा खत्म होने का समय (सेकंड में, फ़ेच करने के समय से) पास करना होगा, जैसा कि उदाहरण में दिखाया गया है.
- SERVER_TOKEN_URL, आपके बैकएंड को लागू करने के तरीके पर निर्भर करता है. ये ऐप्लिकेशन के बैकएंड के सैंपल के यूआरएल हैं:
- https://
SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID - https://
SERVER_URL/token/delivery_consumer/TRACKING_ID - https://
SERVER_URL/token/fleet_reader
- https://
एचटीएमएल से मैप लोड करें
नीचे दिए गए उदाहरण में, बताए गए यूआरएल से JavaScript शिपमेंट ट्रैकिंग
लाइब्रेरी को लोड करने का तरीका बताया गया है. एपीआई लोड होने के बाद, callback पैरामीटर initMap फ़ंक्शन को एक्ज़ीक्यूट करता है. defer एट्रिब्यूट से, एपीआई लोड होने के दौरान ब्राउज़र आपके पेज के बाकी हिस्सों को रेंडर करना जारी रखता है.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
शिपमेंट को फ़ॉलो करें
इस सेक्शन में, शिपमेंट को पिक अप करने या उसकी डिलीवरी का तरीका जानने के लिए JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी का इस्तेमाल करने का तरीका बताया गया है. अपना कोड चलाने से पहले, स्क्रिप्ट टैग में दिए गए कॉलबैक फ़ंक्शन से लाइब्रेरी को लोड करना न भूलें.
शिपमेंट की जगह की जानकारी देने वाली कंपनी को इंस्टैंशिएट करें
JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी, Fleet Engine डिलीवरी एपीआई के लिए, जगह की जानकारी देने वाली कंपनी को पहले से तय करती है. इसे इंस्टैंशिएट करने के लिए, अपने प्रोजेक्ट आईडी और टोकन फ़ैक्ट्री के रेफ़रंस का इस्तेमाल करें.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
मैप व्यू शुरू करें
JavaScript यात्रा शेयरिंग लाइब्रेरी लोड होने के बाद, मैप व्यू को शुरू करें और उसे एचटीएमएल पेज में जोड़ें. आपके पेज में एक <div> एलिमेंट होना चाहिए जिसमें मैप व्यू शामिल हो. नीचे दिए गए उदाहरण में, <div> एलिमेंट को map_canvas नाम दिया गया है.
रेस की स्थितियों से बचने के लिए, मैप शुरू होने के बाद शुरू होने वाले कॉलबैक में, लोकेशन प्रोवाइडर का ट्रैकिंग आईडी सेट करें.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
ट्रैकिंग आईडी
जगह की जानकारी देने वाली कंपनी को दिया गया ट्रैकिंग आईडी, कई टास्क से जुड़ा हो सकता है; उदाहरण के लिए, एक ही पैकेज के लिए पिकअप और डिलीवरी टास्क या डिलीवरी के कई बार असफल. शिपमेंट ट्रैकिंग मैप पर दिखाने के लिए एक टास्क चुना गया है. यह टास्क इस तरह से तय होता है:
- अगर पिकअप के लिए सिर्फ़ एक टास्क मौजूद है, तो उसे दिखाया जाता है. पिकअप के लिए एक से ज़्यादा टास्क होने पर एक गड़बड़ी जनरेट होती है.
- अगर डिलीवरी के लिए सिर्फ़ एक टास्क उपलब्ध है, तो उसे दिखाया जाता है. अगर एक से ज़्यादा ऐसे टास्क हैं जिन्हें अभी तक पूरा नहीं किया गया है, तो एक गड़बड़ी जनरेट होती है.
- अगर डिलीवरी टास्क बंद किए गए हैं, तो:
- अगर डिलीवरी का सिर्फ़ एक टास्क दिया गया है, तो उसे दिखाया जाएगा.
- अगर डिलीवरी वाले कई क्लोज़्ड टास्क हैं, तो वही टास्क दिखाया जाता है जिसमें डिलीवरी का सबसे हाल का समय होता है.
- अगर एक से ज़्यादा क्लोज़्ड डिलीवरी टास्क हैं, जिनमें से किसी भी समय के लिए कोई नतीजा नहीं मिलता है, तो एक गड़बड़ी जनरेट होती है.
- अगर पिकअप के लिए कुछ बंद टास्क हैं, तो:
- अगर पिकअप का सिर्फ़ एक टास्क मौजूद है, तो उसकी जानकारी दिखाई जाएगी.
- अगर पिक अप के लिए एक से ज़्यादा टास्क बंद हैं, तो सबसे हाल ही का समय दिखाया जाता है.
- अगर पिकअप के लिए कई ऐसे टास्क हैं जो बंद हो चुके हैं और उनमें से किसी भी टास्क के लिए कोई नतीजा नहीं मिलता, तो एक गड़बड़ी जनरेट होती है.
- अगर ऐसा नहीं है, तो कोई टास्क नहीं दिखाया जाता.
बदलाव से जुड़े इवेंट सुनना
जगह की जानकारी देने वाले ऐप्लिकेशन का इस्तेमाल करके, टास्क को ट्रैक करने वाली जानकारी से जुड़े ऑब्जेक्ट से, किसी टास्क के बारे में मेटा जानकारी हासिल की जा सकती है. मेटा जानकारी में ETA, बचे हुए स्टॉप की संख्या, और पिकअप या डिलीवरी से पहले की दूरी शामिल होती है. मेटा जानकारी में होने वाले बदलाव, update इवेंट ट्रिगर करते हैं. नीचे दिए गए उदाहरण में, बदलाव के इन इवेंट को सुनने का तरीका बताया गया है.
JavaScript
locationProvider.addListener('update', e => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
गड़बड़ियां ठीक करना
शिपमेंट की जानकारी का अनुरोध करने पर गड़बड़ी वाले इवेंट ट्रिगर करने पर एसिंक्रोनस रूप से पैदा होने वाली गड़बड़ियां. नीचे दिए गए उदाहरण में, गड़बड़ियों को हैंडल करने के लिए इन इवेंट को सुनने का तरीका बताया गया है.
JavaScript
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
ध्यान दें: उम्मीद के मुताबिक न होने वाली गड़बड़ियों को ठीक करने के लिए, लाइब्रेरी कॉल को try...catch ब्लॉक में रैप करना न भूलें.
ट्रैकिंग रोकें
जगह की जानकारी देने वाली कंपनी को शिपमेंट ट्रैक करने से रोकने के लिए, जगह देने वाली कंपनी से ट्रैकिंग आईडी हटा दें.
JavaScript
locationProvider.trackingId = '';
TypeScript
locationProvider.trackingId = '';
मैप व्यू से, जगह की जानकारी देने वाली कंपनी को हटाएं
नीचे दिए गए उदाहरण में, मैप व्यू से जगह की जानकारी देने वाली कंपनी को हटाने का तरीका बताया गया है.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
बुनियादी मैप के लुक और स्टाइल को पसंद के मुताबिक बनाएं
मैप कॉम्पोनेंट के लुक और स्टाइल को पसंद के मुताबिक बनाने के लिए, क्लाउड-आधारित टूल का इस्तेमाल करके या सीधे कोड में विकल्प सेट करके, अपने मैप को स्टाइल दें.
क्लाउड-आधारित मैप स्टाइलिंग का इस्तेमाल करें
क्लाउड-आधारित मैप स्टाइलिंग, आपको Google Cloud Console से Google Maps का इस्तेमाल करने वाले किसी भी ऐप्लिकेशन के लिए मैप स्टाइल बनाने और उनमें बदलाव करने की सुविधा देती है. इसके लिए, आपको अपने कोड में कोई बदलाव करने की ज़रूरत नहीं होती.
मैप के स्टाइल, आपके Cloud प्रोजेक्ट में मैप आईडी के तौर पर सेव किए जाते हैं. अपने JavaScript शिपमेंट ट्रैकिंग मैप पर स्टाइल लागू करने के लिए, JourneySharingMapView बनाते समय mapId तय करें. JourneySharingMapView इंस्टैंशिएट होने के बाद, mapId फ़ील्ड को बदला या जोड़ा नहीं जा सकता. यहां दिए गए उदाहरण में, पहले से बनाई गई मैप स्टाइल को मैप आईडी की मदद से चालू करने का तरीका बताया गया है.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
कोड पर आधारित मैप स्टाइलिंग का इस्तेमाल करें
मैप स्टाइल को पसंद के मुताबिक बनाने का एक और तरीका है, JourneySharingMapView बनाते समय mapOptions सेट करना.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
मार्कर की पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल करना
JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी की मदद से, मैप में जोड़े गए मार्कर के लुक और स्टाइल को पसंद के मुताबिक बनाया जा सकता है. ऐसा करने के लिए, मार्कर कस्टमाइज़ेशन को मैप पर और हर मार्कर अपडेट के साथ जोड़ने से पहले, शिपमेंट ट्रैकिंग लाइब्रेरी लागू करती है.
पसंद के मुताबिक बनाने का सबसे आसान तरीका MarkerOptions ऑब्जेक्ट के बारे में बताना है, जिसे एक ही तरह के सभी मार्कर पर लागू किया जाएगा. ऑब्जेक्ट में बताए गए बदलाव, हर मार्कर के बनने के बाद लागू होते हैं. ये बदलाव सभी डिफ़ॉल्ट विकल्पों को ओवरराइट कर देते हैं.
कस्टमाइज़ेशन फ़ंक्शन तय करना ज़्यादा बेहतर विकल्प है. कस्टमाइज़ेशन फ़ंक्शन से डेटा के आधार पर मार्कर की स्टाइल बनाई जा सकती है. साथ ही, मार्कर में क्लिक मैनेज करने जैसे इंटरैक्शन शामिल किए जा सकते हैं. खास तौर पर, शिपमेंट ट्रैकिंग मार्कर से दिखने वाले ऑब्जेक्ट के टाइप के बारे में, कस्टमाइज़ेशन फ़ंक्शन को डेटा भेजता है: वाहन या डेस्टिनेशन. इसके बाद, इससे मार्कर की स्टाइलिंग को खुद मार्कर एलिमेंट की मौजूदा स्थिति के हिसाब से बदलने की अनुमति मिलती है. उदाहरण के लिए, डेस्टिनेशन तक पहुंचने के लिए, प्लान किए गए स्टॉप की संख्या. यहां तक कि Fleet Engine के बाहर के सोर्स के डेटा को जोड़कर, उससे मिली जानकारी के आधार पर मार्कर की स्टाइल भी तय की जा सकती है.
शिपमेंट ट्रैकिंग लाइब्रेरी, FleetEngineShipmentLocationProviderOptions में ये कस्टमाइज़ेशन पैरामीटर उपलब्ध कराती है:
MarkerOptions का इस्तेमाल करके मार्कर की स्टाइल बदलें
इस उदाहरण में, MarkerOptions ऑब्जेक्ट के साथ वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. किसी भी मार्कर की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को फ़ॉलो करें. इसके लिए, ऊपर दी गई सूची में मौजूद मार्कर को पसंद के मुताबिक बनाएं.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
पसंद के मुताबिक बनाने वाले फ़ंक्शन का इस्तेमाल करके मार्कर की स्टाइल बदलें
इस उदाहरण में, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. किसी भी मार्कर की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को अपनाएं. ऐसा करने के लिए, ऊपर दिए गए किसी भी मार्कर को पसंद के मुताबिक बनाने के पैरामीटर का इस्तेमाल करें.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
मार्कर में क्लिक हैंडलिंग जोड़ें
इस उदाहरण में, वाहन के मार्कर में क्लिक हैंडलिंग की सुविधा जोड़ने का तरीका बताया गया है. ऊपर दिए गए किसी भी मार्कर कस्टमाइज़ेशन पैरामीटर का इस्तेमाल करके, किसी भी मार्कर में क्लिक हैंडलिंग जोड़ने के लिए, इस पैटर्न को अपनाएं.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
पॉलीलाइन कस्टमाइज़ेशन का इस्तेमाल करना
शिपमेंट ट्रैकिंग लाइब्रेरी की मदद से, मैप पर शिपमेंट के रूट का लुक और स्टाइल कस्टमाइज़ किया जा सकता है. लाइब्रेरी, शिपमेंट के चालू या बचे हुए पाथ में, कोऑर्डिनेट के हर जोड़े के लिए एक google.maps.Polyline ऑब्जेक्ट बनाती है.
आपके पास पॉलीलाइन कस्टमाइज़ेशन की जानकारी देकर, Polyline ऑब्जेक्ट को स्टाइल करने का विकल्प है. इसके बाद, लाइब्रेरी इन कस्टमाइज़ेशन को दो स्थितियों में लागू करती है: ऑब्जेक्ट को मैप पर जोड़ने से पहले और जब ऑब्जेक्ट के लिए इस्तेमाल किया गया डेटा बदल जाता है.
मार्कर को पसंद के मुताबिक बनाने की सुविधा की तरह ही, मेल खाने वाले सभी Polyline ऑब्जेक्ट पर लागू करने के लिए, PolylineOptions का एक सेट तय किया जा सकता है. ऐसा तब किया जाता है, जब उन्हें बनाया या अपडेट किया जाता है.
इसी तरह, आपके पास कस्टमाइज़ेशन फ़ंक्शन के बारे में बताने का विकल्प भी होता है. कस्टमाइज़ेशन फ़ंक्शन से, Fleet Engine से भेजे गए डेटा के आधार पर, ऑब्जेक्ट की अलग-अलग स्टाइलिंग की जा सकती है.
फ़ंक्शन, शिपमेंट की मौजूदा स्थिति के हिसाब से हर ऑब्जेक्ट की स्टाइल बदल सकता है. उदाहरण के लिए, Polyline ऑब्जेक्ट को ज़्यादा गहरा रंग देना या वाहन की रफ़्तार धीमी होने पर उसे मोटा बनाना. साथ ही, Fleet Engine के बाहर के सोर्स से भी
शामिल हो सकते हैं और उस जानकारी के आधार पर Polyline ऑब्जेक्ट को स्टाइल कर सकते हैं.
FleetEngineShipmentLocationProviderOptions में दिए गए पैरामीटर का इस्तेमाल करके, कस्टमाइज़ेशन के बारे में बताया जा सकता है.
आप वाहन की यात्रा में अलग-अलग रास्ते की स्थितियों के लिए पसंद के मुताबिक सेट कर सकते हैं--पहले यात्रा कर चुके हैं, सक्रिय रूप से यात्रा कर रहे हैं या अभी तक यात्रा नहीं की है. पैरामीटर यहां दिए गए हैं:
takenPolylineCustomization, पहले से तय किए गए रास्ते के लिए;activePolylineCustomization, यात्रा के दौरान चुने गए रास्ते के लिए;remainingPolylineCustomization, उस रास्ते के लिए जिस पर अब तक यात्रा नहीं की गई है.
PolylineOptions का इस्तेमाल करके Polyline ऑब्जेक्ट की स्टाइल बदलें
नीचे दिए गए उदाहरण में, PolylineOptions के साथ Polyline ऑब्जेक्ट के लिए स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है.
किसी भी Polyline ऑब्जेक्ट की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को अपनाएं. ऐसा करने के लिए, पहले से सूची में दिए गए किसी भी पॉलीलाइन कस्टमाइज़ेशन का इस्तेमाल करें.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
पसंद के मुताबिक बनाने वाले फ़ंक्शन का इस्तेमाल करके, Polyline ऑब्जेक्ट की स्टाइल बदलें
इस उदाहरण में, चालू Polyline ऑब्जेक्ट की स्टाइलिंग को कॉन्फ़िगर करने का तरीका बताया गया है. किसी भी Polyline ऑब्जेक्ट की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को अपनाएं. ऐसा करने के लिए, पहले से दिए गए पॉलीलाइन कस्टमाइज़ेशन पैरामीटर में से किसी का भी इस्तेमाल करें.
JavaScript
// Color the 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 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'});
}
}
};
कंट्रोल करें कि Polyline ऑब्जेक्ट किसको दिखें
डिफ़ॉल्ट रूप से, सभी Polyline ऑब्जेक्ट दिखते हैं. Polyline ऑब्जेक्ट को
न दिखने लायक बनाने के लिए, उसकी
visible
प्रॉपर्टी सेट करें:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
वाहन या जगह के मार्कर के लिए InfoWindow दिखाएं
किसी वाहन या जगह के मार्कर के बारे में ज़्यादा जानकारी दिखाने के लिए, InfoWindow का इस्तेमाल किया जा सकता है.
इस उदाहरण में, InfoWindow बनाने और उसे वाहन के मार्कर से जोड़ने का तरीका बताया गया है:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 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});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 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
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 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 शिपमेंट ट्रैकिंग लाइब्रेरी का इस्तेमाल कर सकते हैं जिसमें मार्कर या दूसरे कस्टमाइज़ेशन मौजूद हैं वह भी उन कस्टमाइज़ेशन में.
उदाहरण के लिए, मान लें कि आपके पास स्टैंडर्ड google.maps.Map इकाई वाला कोई वेब पेज है, जिस पर मार्कर दिखाया गया है:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
JavaScript जर्नी शेयरिंग लाइब्रेरी जोड़ने के लिए:
- पुष्टि करने वाले टोकन की फ़ैक्ट्री के लिए कोड जोड़ें.
initMap()फ़ंक्शन में जगह की जानकारी देने वाली सेवा शुरू करें.initMap()फ़ंक्शन में मैप व्यू शुरू करें. व्यू में मैप शामिल होता है.- मैप व्यू शुरू करने के लिए, कस्टमाइज़ेशन को कॉलबैक फ़ंक्शन में ले जाएं.
- एपीआई लोडर में लोकेशन लाइब्रेरी जोड़ें.
यहां दिए गए उदाहरण में, किए जाने वाले बदलावों को दिखाया गया है:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider.
locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
locationProvider.trackingId = TRACKING_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
अगर आपके पास Uluru के पास तय किया गया आईडी से ट्रैक किया गया पैकेज है, तो अब वह मैप पर रेंडर होगा.