अब जब आपने शेड्यूल किए गए टास्क के लिए, JavaScript Consumer SDK सेट अप कर लिया है, तो उपभोक्ता ऐप्लिकेशन की मदद से शिपमेंट को फ़ॉलो करने के लिए तैयार हैं. इस दस्तावेज़ में इस प्रक्रिया में ये मुख्य चरण शामिल हैं:
- मैप शुरू करना और शेयर की गई यात्रा दिखाना
- अपडेट करें और यात्रा की प्रोग्रेस को फ़ॉलो करें
- यात्रा की जानकारी शेयर करने की सुविधा बंद करना
- गड़बड़ियां ठीक करना
मैप सेट अप करें
अपने वेब ऐप्लिकेशन में शिपिंग के पिकअप या डिलीवरी को फ़ॉलो करने के लिए, आपको एक मैप लोड करना होगा शिपिंग को ट्रैक करने के लिए, उपभोक्ता SDK टूल को इंस्टैंशिएट करें. लोड करें या तो नए मैप का इस्तेमाल करें या मौजूदा मैप का इस्तेमाल करें. इसके बाद, इनिशलाइज़ेशन का इस्तेमाल करें उपभोक्ता SDK को इंस्टैंशिएट करने के लिए फ़ंक्शन का इस्तेमाल करता है, ताकि मैप व्यू ट्रैक किए जा रहे आइटम की जगह की जानकारी.
Google Maps JavaScript API का इस्तेमाल करके नया मैप लोड करना
नया मैप बनाने के लिए, अपने वेब ऐप्लिकेशन में Google Maps JavaScript API लोड करें. कॉन्टेंट बनाने नीचे दिए गए उदाहरण में, Google Maps JavaScript API को लोड करने का तरीका बताया गया है. साथ ही, साथ ही, इन निर्देशों का पालन करें.
- एपीआई लोड होने के बाद,
callback
पैरामीटरinitMap
फ़ंक्शन चलाता है. defer
एट्रिब्यूट की मदद से ब्राउज़र, बाकी के कॉन्टेंट को रेंडर करना जारी रखता है पेज पर जाएगा.
उपभोक्ता SDK को इंस्टैंशिएट करने के लिए, initMap
फ़ंक्शन का इस्तेमाल करें. उदाहरण के लिए:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
मौजूदा मैप लोड करें
Google Maps JavaScript API के ज़रिए बनाए गए किसी मौजूदा मैप को भी लोड किया जा सकता है, जैसे कि वह जिसे आपने पहले ही इस्तेमाल किया हुआ है.
उदाहरण के लिए, मान लें कि आपके पास स्टैंडर्ड google.maps.Map
वाला वेब पेज है
वह इकाई जिस पर मार्कर को इस एचटीएमएल कोड में बताए गए तरीके से दिखाया गया है. यह
आखिर में कॉलबैक में, उसी 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>
// Initialize and add the map
function initMap() {
// The location of Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* 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>
शिपमेंट की जगह की जानकारी देने वाली कंपनी को इंस्टैंशिएट करें
अनुमति वाले टोकन के साथ शिपिंग की जगह की जानकारी देने वाली कंपनी का इस्तेमाल करें Fleet Engine से डेटा पाने के लिए, इस फ़ेचर को पहले से तय किया गया था.
इन उदाहरणों में, जगह की जानकारी देने वाले को इंस्टैंशिएट करने का तरीका बताया गया है.
JavaScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
TypeScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
शेयर की गई यात्रा को दिखाएं
मैप में शेयर की गई यात्रा की जानकारी देखने के लिए, आपको व्यू, जो मैप के फ़्रेम को जगह के मुताबिक सेट करता है जानकारी मिलने के बाद, उपभोक्ता SDK टूल की ओर से ट्रैक की गई यात्रा की जानकारी फ़्लीट इंजन.
सलाह:
पक्का करें कि आपके पेज में <div> एलिमेंट शामिल हो, जिसमें मैप व्यू शामिल हो. यहां दिए गए उदाहरण में, <div> एलिमेंट का नाम
map_canvas
है.ध्यान रखें कि ट्रैक किए गए विज्ञापनों पर, फ़्लीट इंजन के दिखने के डिफ़ॉल्ट नियम लागू होते हैं यात्राएं. आपके पास, ऐक्टिव वाहन के लिए, 'किसको दिखे' सेटिंग चुनने के नियम भी कॉन्फ़िगर करने का विकल्प है शिपमेंट और शेड्यूल किए गए स्टॉप टास्क. टास्क किसको दिखे सेक्शन में, टास्क कॉन्फ़िगर करने की गाइड.
इन उदाहरणों में, मैप व्यू को शुरू करने का तरीका बताया गया है.
JavaScript
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// Any undefined styling options use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// 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 starts 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);
}
शिपमेंट की प्रोग्रेस को अपडेट करें
इवेंट के बारे में सुना जा सकता है और शिपिंग की प्रोग्रेस को यात्रा के तौर पर अपडेट किया जा सकता है
प्रगति करता है.
taskTrackingInfo
ऑब्जेक्ट. मेटा में बदलाव
जानकारी update इवेंट को ट्रिगर करती है. taskTrackingInfo
ऑब्जेक्ट उपलब्ध कराता है
निम्न:
- ETA
- बचे हुए स्टॉप की संख्या
- पिकअप या डिलीवरी से पहले बाकी बची दूरी
नीचे दिए गए उदाहरण में, बदलाव के इन इवेंट को सुनने का तरीका बताया गया है.
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);
});
एक से ज़्यादा टास्क के लिए शर्तें दिखाना
शेड्यूल किए गए टास्क के लिए, उपभोक्ता SDK टूल हर ट्रैकिंग आईडी के लिए सिर्फ़ एक टास्क दिखाता है मैप. हालांकि, आम तौर पर आप किसी विशिष्ट शिपमेंट गुड, जो अपनी पूरी यात्रा के दौरान हमेशा सामान के साथ जुड़ा रहता है आपके सिस्टम में. इसका मतलब है कि एक ही ट्रैकिंग आईडी को Merchant Center से लिंक किया जा सकता है कई टास्क, जैसे कि पिकअप टास्क के बाद डिलीवरी टास्क किसी पैकेज या किसी पैकेज के लिए पूरे न हो पाने वाले कई शिपिंग टास्क.
इस स्थिति से निपटने के लिए, फ़्लीट इंजन, टास्क दिखाने की शर्तें लागू करता है, नीचे दी गई टेबल में मौजूद है.
टास्क के लिए शर्तें | नतीजा |
---|---|
पिकअप के टास्क खोलें | |
सिर्फ़ एक मौजूद है | टास्क दिखाएं |
एक से ज़्यादा हैं | गड़बड़ी जनरेट करें |
पिकअप के बंद टास्क | |
सिर्फ़ एक मौजूद है | टास्क दिखाएं |
एक से ज़्यादा ऐसेट मौजूद हैं (इनमें से कुछ नतीजे समय पर उपलब्ध हैं) | वह टास्क दिखाएं जिसके लिए हाल ही में काम करने का समय तय किया गया है |
एक से ज़्यादा वैल्यू मौजूद हैं (इनमें से कोई भी नतीजा नहीं चुना जा सकता) | गड़बड़ी जनरेट करें |
डिलीवरी के टास्क पूरे करना | |
सिर्फ़ एक मौजूद है | टास्क दिखाएं |
एक से ज़्यादा हैं | गड़बड़ी जनरेट करें |
डिलीवरी के टास्क | |
सिर्फ़ एक मौजूद है | टास्क दिखाएं |
एक से ज़्यादा ऐसेट मौजूद हैं (इनमें से कुछ नतीजे समय पर उपलब्ध हैं) | वह टास्क दिखाएं जिसके लिए हाल ही में काम करने का समय तय किया गया है |
एक से ज़्यादा वैल्यू मौजूद हैं (इनमें से कोई भी नतीजा नहीं चुना जा सकता) | गड़बड़ी जनरेट करें |
किसी शिपमेंट को फ़ॉलो करना बंद करना
शिपिंग का सफ़र पूरा होने या रद्द होने के बाद, आपके उपभोक्ता ऐप्लिकेशन को यात्रा शेयर करने की सुविधा बंद करने के लिए, ट्रैकिंग आईडी और जगह की जानकारी देने वाली कंपनी को हटाएं मैप व्यू.
ट्रैकिंग आईडी हटाएं
जगह की जानकारी देने वाली कंपनी को शिपमेंट ट्रैक करने से रोकने के लिए, ट्रैकिंग आईडी हटाएं से मिलता है. नीचे दिए गए उदाहरणों में बताया गया है कि इसे कैसे किया जाए.
JavaScript
locationProvider.trackingId = '';
TypeScript
locationProvider.trackingId = '';
मैप व्यू से, जगह की जानकारी देने वाली कंपनी को हटाएं
नीचे दिए गए उदाहरण में, मैप व्यू से जगह की जानकारी देने वाली कंपनी को हटाने का तरीका बताया गया है.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
शिपमेंट ट्रैक करने से जुड़ी गड़बड़ियां ठीक करना
ऐसी गड़बड़ियां जो शिपिंग की जानकारी के ट्रिगर का अनुरोध करने पर एसिंक्रोनस रूप से पैदा होती हैं गड़बड़ी वाले इवेंट की जानकारी देता है. नीचे दिए गए उदाहरण में इन इवेंट को सुनने का तरीका बताया गया है का इस्तेमाल किया जा सकता है.
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
ब्लॉक में रैप किया जाए
अचानक होने वाली गड़बड़ियों को ठीक करने में मदद मिलती है.