JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी की सहायता से आप स्थान को विज़ुअलाइज़ कर सकते हैं
को ट्रैक किया गया. लाइब्रेरी
में एक JavaScript मैप घटक है जो ड्रॉप-इन प्रतिस्थापन है
कनेक्ट करने के लिए, स्टैंडर्ड google.maps.Map इकाई और डेटा कॉम्पोनेंट के लिए
फ़्लीट इंजन के साथ. JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी का इस्तेमाल करके,
आप अपने वेब ऐप्लिकेशन से कस्टमाइज़ किया जा सकने वाला ऐनिमेटेड शिपमेंट ट्रैकिंग अनुभव दे सकते हैं.
घटक
JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी, विज़ुअलाइज़ेशन के लिए कॉम्पोनेंट उपलब्ध कराती है मंज़िल तक पहुंचने में लगने वाले वाहन और रास्ते के साथ-साथ, रॉ डेटा ड्राइवर के ETA या ड्राइव करने के लिए बची हुई दूरी के लिए फ़ीड.
शिपमेंट ट्रैकिंग मैप व्यू
मैप व्यू कॉम्पोनेंट, वाहनों और डेस्टिनेशन की जगह को विज़ुअलाइज़ करता है. अगर किसी वाहन का रास्ता पता है, तो मैप व्यू कॉम्पोनेंट ऐनिमेट होता है उस वाहन को जब वह अपने अनुमानित रास्ते पर आगे बढ़ता है.
शिपमेंट की जगह की जानकारी देने वाला ऐप्लिकेशन
शिपमेंट की जगह की जानकारी देने वाली कंपनी, ट्रैक किए गए ऑब्जेक्ट के लिए जगह की जानकारी फ़ीड करती है के लिए शिपिंग ट्रैकिंग मैप में पहले और अंतिम मील तक की शिपिंग ट्रैकिंग में.
इन चीज़ों को ट्रैक करने के लिए, शिपमेंट की जगह की जानकारी देने वाली कंपनी का इस्तेमाल किया जा सकता है:
- किसी शिपमेंट को पिक अप या डिलीवरी की जगह की जानकारी.
- डिलीवरी वाहन की जगह और रास्ता.
ट्रैक की गई जगह की जानकारी से जुड़े ऑब्जेक्ट
जगह की जानकारी देने वाला, वाहनों और अन्य चीज़ों की लोकेशन ट्रैक करता है गंतव्य.
डेस्टिनेशन की जगह
गंतव्य स्थान वह स्थान होता है जहां यात्रा खत्म होती है. शिपमेंट के लिए है, तो यह पहले से तय टास्क की जगह है.
वाहन की जगह की जानकारी
वाहन की जगह की जानकारी, वाहन की ट्रैक की गई जगह है. यह विकल्प के तौर पर वाहन के लिए रास्ता शामिल करें.
पुष्टि करने वाले टोकन फ़ेच करने वाला टूल
Fleet Engine में सेव किए गए जगह की जानकारी के डेटा के ऐक्सेस को कंट्रोल करने के लिए, आपको ये काम करने होंगे फ़्लीट इंजन के लिए, JSON Web Token (JWT) की मिंटिंग सेवा लागू करें आपके सर्वर पर. इसके बाद, पुष्टि करने वाले टोकन फ़ेचर का इस्तेमाल करें आपके वेब ऐप्लिकेशन के लिए बनाया गया है. जगह की जानकारी के डेटा के ऐक्सेस की पुष्टि करने के लिए.
स्टाइल के विकल्प
मार्कर और पॉलीलाइन स्टाइल, ऐसेट के लुक और स्टाइल को तय करते हैं ट्रैक की गई जगह की जानकारी को ट्रैक करने की सुविधा देता है. Google Analytics 4 पर माइग्रेट करने के लिए, स्टाइल से मेल खाने वाली डिफ़ॉल्ट स्टाइल बदलने के लिए कस्टम स्टाइलिंग के विकल्प आपके वेब ऐप्लिकेशन की सूची में शामिल हैं.
ट्रैक की गई जगहों की जानकारी दिखाने को कंट्रोल करें
यह सेक्शन, मैप पर ट्रैक किए गए ऑब्जेक्ट के दिखने की सेटिंग के बारे में बताता है. ये नियम, ऑब्जेक्ट की दो कैटगरी पर लागू होते हैं:
- जगह का मार्कर
- टास्क का डेटा
जगह के मार्कर की विज़िबिलिटी
मूल और गंतव्य के लिए सभी स्थान मार्कर हमेशा मैप पर दिखाए जाते हैं. उदाहरण के लिए, मैप पर शिपमेंट की डिलीवरी की जगह हमेशा दिखाई जाती है, फिर चाहे डिलीवरी की स्थिति कुछ भी हो.
टास्क का डेटा किसको दिखे
इस सेक्शन में टास्क के डेटा पर लागू होने वाले, 'किसको दिखे' के डिफ़ॉल्ट नियमों के बारे में बताया गया है. जैसे, वाहन की जगह और बाकी रास्ता. आपके पास कई टास्क को अपनी पसंद के मुताबिक बनाने का विकल्प होता है. हालांकि, सभी नहीं:
- अनुपलब्ध कार्य -- आप इन कार्यों के लिए दृश्यता कस्टमाइज़ नहीं कर सकते.
- गाड़ी के चालू टास्क -- आपके पास इस तरह के टास्क को अपनी पसंद के मुताबिक बनाने का विकल्प है.
- वाहन बंद करने से जुड़े टास्क -- इन टास्क के लिए, 'किसको दिखे' सेटिंग को पसंद के मुताबिक नहीं बनाया जा सकता.
टास्क उपलब्ध न होने से जुड़े टास्क
अगर कम से कम एक टास्क उपलब्ध नहीं है, तो अगर ड्राइवर ब्रेक ले रहा है या वाहन में ईंधन भरा जा रहा है) अगर टास्क ट्रैक किया जा रहा है, तो गाड़ी नहीं दिखेगी. पहुंचने का अनुमानित समय समय और टास्क पूरा होने में लगने वाला अनुमानित समय अब भी उपलब्ध है.
गाड़ी से जुड़े टास्क, जो चालू हैं
कॉन्टेंट बनाने
TaskTrackingInfo
ऑब्जेक्ट कई डेटा एलिमेंट देता है, जिन्हें
शिपमेंट ट्रैकिंग लाइब्रेरी. डिफ़ॉल्ट रूप से, ये फ़ील्ड तब दिखते हैं, जब टास्क
वाहन को असाइन किया गया हो और जब वाहन, टास्क के पांच स्टॉप के अंदर हो. कॉन्टेंट बनाने
टास्क पूरा होने या रद्द होने पर यह दिखता है. फ़ील्ड इस तरह हैं
अनुसरण करता है:
- रूट पॉलीलाइन
- पहुंचने का अनुमानित समय
- टास्क को पूरा करने में लगने वाला अनुमानित समय
- टास्क तक गाड़ी से जाने की बची हुई दूरी
- शेष स्टॉप की संख्या
- वाहन की जगह की जानकारी
हर टास्क के हिसाब से, 'किसको दिखे' कॉन्फ़िगरेशन को अपनी पसंद के मुताबिक बनाया जा सकता है. इसके लिए,
यह
TaskTrackingViewConfig
Fleet Engine में टास्क बनाते या अपडेट करते समय, टास्क पर. इससे कॉन्टेंट बनाने में
अलग-अलग डेटा एलिमेंट उपलब्ध होने के बारे में नियम तय करेंगे. ये नियम इन पर आधारित हो सकते हैं
(नीचे दृश्यता विकल्प के रूप में बताया गया है):
- शेष स्टॉप की संख्या
- पहुंचने का अनुमानित समय तक का कुल समय
- ड्राइविंग के लिए बची हुई दूरी
- मैसेज हमेशा दिखता है
- कभी नहीं दिखेगा
ध्यान दें कि हर डेटा एलिमेंट को 'किसको दिखे' सेटिंग में सिर्फ़ एक विकल्प से जोड़ा जा सकता है. 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 और ड्राइविंग के लिए बाकी दूरी कम से कम 3,000 है मीटर.
JavaScript जर्नी शेयरिंग लाइब्रेरी का इस्तेमाल शुरू करना
JavaScript की गतिविधि शेयर करने की लाइब्रेरी का इस्तेमाल करने से पहले, पक्का करें कि फ़्लीट इंजन के बारे में जानकारी और एपीआई पासकोड हासिल करने से बचें.
किसी डिलीवरी को ट्रैक करने के लिए, पहले ट्रैकिंग आईडी वाला दावा करें.
ट्रैकिंग आईडी का दावा करें
शिपमेंट की जगह की जानकारी देने वाली कंपनी का इस्तेमाल करके, शिपमेंट को ट्रैक करने के लिए, ट्रैकिंग आईडी वाले दावे के साथ JSON Web Token (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> एलिमेंट को <div> नाम दिया जाता है.
रेस स्थितियों से बचने के लिए, जगह की जानकारी देने वाले के लिए ट्रैकिंग आईडी सेट करें कॉलबैक में, जिसे मैप शुरू होने के बाद शुरू किया जाता है.
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 Maps का इस्तेमाल करने वाले किसी भी ऐप्लिकेशन के लिए मैप स्टाइल बनाने और उनमें बदलाव करने की सुविधा मिलती है
और अपने कोड में कोई बदलाव किए बिना.
मैप के स्टाइल, आपके Cloud प्रोजेक्ट में मैप आईडी के तौर पर सेव किए जाते हैं. कोई स्टाइल लागू करने के लिए
अपने JavaScript शिपमेंट ट्रैकिंग मैप में,
mapId
जब आप JourneySharingMapView बनाते हैं. mapId फ़ील्ड को बदला नहीं जा सकता
या JourneySharingMapView इंस्टैंशिएट किए जाने के बाद जोड़ा जाएगा. नीचे दिए गए
उदाहरण में, पहले से बनाई गई मैप स्टाइल को मैप आईडी की मदद से चालू करने का तरीका बताया गया है.
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.
});
कोड पर आधारित मैप स्टाइलिंग का इस्तेमाल करें
मैप शैली को पसंद के मुताबिक बनाने का एक और तरीका है, सेट करना
mapOptions, जब
JourneySharingMapView बनाएं.
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
ऑब्जेक्ट है जिसे एक ही टाइप के सभी मार्कर पर लागू किया जाएगा. बदलाव
ऑब्जेक्ट में तय किए गए मार्कर, हर मार्कर के बनने के बाद लागू किए जाते हैं,
सभी डिफ़ॉल्ट विकल्पों को ओवरराइट करना.
कस्टमाइज़ेशन फ़ंक्शन तय करना ज़्यादा बेहतर विकल्प है. पसंद के मुताबिक बनाएं फ़ंक्शन डेटा के आधार पर मार्कर की स्टाइल करने में मदद करते हैं. साथ ही, मार्कर के लिए इंटरैक्टिविटी, जैसे कि क्लिक मैनेज करना. खास तौर पर, शिपमेंट ट्रैकिंग, ऑब्जेक्ट के टाइप के बारे में कस्टमाइज़ेशन फ़ंक्शन को डेटा भेजती है मार्कर यह दर्शाता है: वाहन या मंज़िल. इसके बाद, इससे मार्कर स्टाइलिंग को खुद मार्कर एलिमेंट की मौजूदा स्थिति के आधार पर बदलें; उदाहरण के लिए, मंज़िल तक पहुंचने के लिए बचे हुए स्टॉप की संख्या. यहाँ तक कि आपको सीएमएस की मदद से फ़्लीट इंजन के बाहर के सोर्स से मिले डेटा की तुलना करना और मार्कर की स्टाइल इस आधार पर करना वह जानकारी.
शिपमेंट ट्रैकिंग लाइब्रेरी,
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 ऑब्जेक्ट को स्टाइल करने का विकल्प है. कॉन्टेंट बनाने
फिर लाइब्रेरी में ये कस्टमाइज़ेशन दो परिस्थितियों में लागू होते हैं:
ऑब्जेक्ट को मैप में जोड़ देता है और जब ऑब्जेक्ट के लिए इस्तेमाल किया गया डेटा बदल जाता है.
मार्कर कस्टमाइज़ेशन की तरह, आप एक सेट तय कर सकते हैं
PolylineOptions
बनाए जाने के बाद, मिलान किए गए सभी Polyline ऑब्जेक्ट पर लागू होती है
या अपडेट किया गया.
इसी तरह, आपके पास कस्टमाइज़ेशन फ़ंक्शन के बारे में बताने का विकल्प भी होता है. कस्टमाइज़ेशन फ़ंक्शन
फ़्लीट इंजन से भेजे गए डेटा के आधार पर, ऑब्जेक्ट की अलग-अलग स्टाइलिंग की अनुमति देते हैं.
फ़ंक्शन हर ऑब्जेक्ट की स्टाइल को, इसकी मौजूदा स्थिति के हिसाब से बदल सकता है
शिपमेंट; उदाहरण के लिए, Polyline ऑब्जेक्ट को गहरा रंग देना या
इससे वाहनों की रफ़्तार को और भी बढ़ाया जा सकता है. दुनिया भर में
Fleet Engine के बाहर के सोर्स से लिया जाता है और उसके आधार पर Polyline ऑब्जेक्ट को स्टाइल किया जाता है
जानकारी.
इसमें दिए पैरामीटर का इस्तेमाल करके, कस्टमाइज़ेशन के बारे में बताया जा सकता है
FleetEngineShipmentLocationProviderOptions.
आपके पास अपनी गाड़ी में पाथ की अलग-अलग स्थितियों के लिए पसंद के मुताबिक सेट करने का विकल्प होता है
यात्रा--पहले यात्रा कर ली है, सक्रिय रूप से यात्रा कर रही है या अभी तक यात्रा नहीं की है. कॉन्टेंट बनाने
पैरामीटर की जानकारी यहां दी गई है:
takenPolylineCustomizationपहले से यात्रा किए जा चुके रास्ते के लिए;activePolylineCustomizationसक्रिय रूप से यात्रा के पाथ के लिए;remainingPolylineCustomizationजिस रास्ते पर अब तक यात्रा नहीं हुई है उसके लिए.
PolylineOptions का इस्तेमाल करके Polyline ऑब्जेक्ट की स्टाइल बदलें
इस उदाहरण में, Polyline ऑब्जेक्ट के लिए स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है
के साथ
PolylineOptions.
किसी भी 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 के पास बताया गया है, तो अब इसे मैप पर रेंडर किया जाएगा.