JavaScript के साथ उपभोक्ता SDK का इस्तेमाल शुरू करना

JavaScript SDK टूल की मदद से, को ट्रैक किया गया. लाइब्रेरी में एक JavaScript मैप घटक है जो ड्रॉप-इन प्रतिस्थापन है कनेक्ट करने के लिए, स्टैंडर्ड google.maps.Map इकाई और डेटा कॉम्पोनेंट के लिए फ़्लीट इंजन के साथ. JavaScript SDK का इस्तेमाल करके, आपके पास अपने वेब ऐप्लिकेशन से, यात्रा और ऑर्डर की प्रोग्रेस को पसंद के मुताबिक बनाने का विकल्प उपलब्ध है.

घटक

JavaScript SDK टूल, विज़ुअलाइज़ेशन के लिए कॉम्पोनेंट उपलब्ध कराता है रॉ डेटा फ़ीड होता है. या ड्राइव करने के लिए बची हुई दूरी.

यात्रा और ऑर्डर की स्थिति का मैप व्यू

मैप व्यू कॉम्पोनेंट, वाहनों और वेपॉइंट की जगह को विज़ुअलाइज़ करता है. अगर किसी वाहन का रास्ता पता है, तो मैप व्यू कॉम्पोनेंट ऐनिमेट होता है उस वाहन को जब वह अपने अनुमानित रास्ते पर आगे बढ़ता है.

यात्रा की जगह की जानकारी देने वाली कंपनी

JavaScript SDK टूल में यात्रा की जगह की जानकारी शामिल है वह कंपनी जो ट्रैक किए गए ऑब्जेक्ट के लिए जगह की जानकारी फ़ीड करती है यात्रा और ऑर्डर की जानकारी दिखाने वाला मैप.

इन चीज़ों को ट्रैक करने के लिए, यात्रा की जगह की जानकारी देने वाली कंपनी का इस्तेमाल किया जा सकता है:

  • यात्रा के लिए पिक अप या ड्रॉप करने की जगह.
  • यात्रा के लिए असाइन किए गए वाहन की जगह और रास्ता.

ट्रैक की गई जगह की जानकारी से जुड़े ऑब्जेक्ट

जगह की जानकारी देने वाला, वेपॉइंट और गाड़ियों जैसे ऑब्जेक्ट की जगह की जानकारी ट्रैक करता है.

यात्रा शुरू करने की जगह

शुरुआत की जगह वह जगह होती है जहां से यात्रा शुरू होती है. यह पिकअप करने की जगह.

डेस्टिनेशन की जगह

गंतव्य स्थान वह स्थान होता है जहां यात्रा खत्म होती है. यह ड्रॉप वाली जगह का निशान लगाता है.

वेपॉइंट लोकेशन

वेपॉइंट लोकेशन, ट्रैक की गई यात्रा के रास्ते में आने वाली कोई जगह है. उदाहरण के लिए, बस के रास्ते का हर स्टॉप एक वेपॉइंट लोकेशन होता है.

वाहन की जगह की जानकारी

वाहन की जगह की जानकारी, वाहन की ट्रैक की गई जगह है. यह विकल्प के तौर पर वाहन के लिए रास्ता शामिल करें.

पुष्टि करने वाले टोकन फ़ेच करने वाला टूल

Fleet Engine में सेव किए गए जगह की जानकारी के डेटा के ऐक्सेस को कंट्रोल करने के लिए, आपको ये काम करने होंगे फ़्लीट इंजन के लिए, JSON Web Token (JWT) की मिंटिंग सेवा लागू करें आपके सर्वर पर. इसके बाद, पुष्टि करने वाले टोकन फ़ेचर का इस्तेमाल करें आपके वेब ऐप्लिकेशन की, जगह की जानकारी के डेटा के ऐक्सेस की पुष्टि करने के लिए.

स्टाइल के विकल्प

मार्कर और पॉलीलाइन स्टाइल, ऐसेट के लुक और स्टाइल को तय करते हैं ट्रैक की गई जगह की जानकारी को ट्रैक करने की सुविधा देता है. Google Analytics 4 पर माइग्रेट करने के लिए, स्टाइल से मेल खाने वाली डिफ़ॉल्ट स्टाइल बदलने के लिए कस्टम स्टाइलिंग के विकल्प आपके वेब ऐप्लिकेशन की सूची में शामिल हैं.

ट्रैक की गई जगहों की जानकारी दिखने को कंट्रोल करना

इस सेक्शन में, जगह की जानकारी के ट्रैक किए गए ऑब्जेक्ट के दिखने के नियमों के बारे में बताया गया है पहले से तय जगह उपलब्ध कराने वाली कंपनियों के लिए, मैप पर Fleet Engine की मदद से बनाई गई जगह की जानकारी. कस्टम या डिराइव्ड जगह की जानकारी देने वाली कंपनियां, 'किसको दिखे' सेटिंग के नियमों को बदल सकती हैं.

वाहन

राइड शेयरिंग वाहन, यात्रा के लिए असाइन किए जाने के समय से ही दिखता है ड्रॉप करने के समय तक. अगर यात्रा रद्द हो जाती है, तो वाहन का नाम दिखने लगेगा.

अन्य सभी स्थान मार्कर

मूल, गंतव्य, और वेपॉइंट के लिए अन्य सभी स्थान मार्कर हमेशा मैप पर दिखाई देते हैं. उदाहरण के लिए, बस, मेट्रो वगैरह के लिए राइडशेयर करने की जगह इसके अलावा, मैप पर शिपमेंट की डिलीवरी की जगह हमेशा दिखती है यात्रा या डिलीवरी की स्थिति की जानकारी.

JavaScript SDK का इस्तेमाल शुरू करना

JavaScript SDK का इस्तेमाल करने से पहले, पक्का करें कि आप Fleet Engine के बारे में जानकारी और एपीआई पासकोड बनाने की ज़रूरत नहीं होती.

राइडशेयरिंग से जुड़ी यात्रा को ट्रैक करने के लिए, पहले यात्रा के आईडी पर दावा करें.

यात्रा के आईडी के लिए दावा करें

यात्रा की जगह की जानकारी देने वाले का इस्तेमाल करके यात्रा ट्रैक करने के लिए, ट्रिप आईडी दावे के साथ JSON Web Token (JWT) बनाएं.

JWT पेलोड बनाने के लिए, अनुमति देने वाले सेक्शन में अतिरिक्त दावा जोड़ें tripid कुंजी के साथ सेट करें और इसका मान यात्रा आईडी पर सेट करें.

नीचे दिए गए उदाहरण में, यात्रा आईडी के हिसाब से ट्रैकिंग के लिए टोकन बनाने का तरीका बताया गया है:

{
  "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": {
     "tripid": "tid_12345",
   }
}

पुष्टि करने वाला टोकन फ़ेच करने वाला टूल बनाएं

टोकन की मदद से बनाए गए टोकन वापस पाने के लिए, पुष्टि करने वाला टोकन फ़ेचर बनाया जा सकता है सही दावों के साथ अपने सर्वर पर आपके प्रोजेक्ट के लिए खाता प्रमाणपत्र की तरह ही काम करता है. सिर्फ़ मिंट टोकन अपने सर्वर पर और अपने सर्टिफ़िकेट को कभी भी किसी क्लाइंट के साथ शेयर न करें. या फिर, तो आपके सिस्टम की सुरक्षा को खतरा हो सकता है.

फ़ेचर को डेटा स्ट्रक्चर दिखाना चाहिए प्रॉमिस में रैप किया हुआ दो फ़ील्ड:

  • token स्ट्रिंग.
  • संख्या expiresInSeconds. इस अवधि के बाद टोकन की समयसीमा खत्म हो जाती है फ़ेच करना.

JavaScript उपभोक्ता SDK, पुष्टि करने वाले टोकन के ज़रिए टोकन का अनुरोध करता है फ़ेचर जब इनमें से कोई भी एक शर्त पूरी होती हो:

  • इसका कोई मान्य टोकन मौजूद नहीं होता. जैसे, जब फ़ेचर को कॉल न किया गया हो नया पेज लोड होता है या जब फ़ेचर टोकन के साथ वापस नहीं आता है.
  • पिछली बार फ़ेच किए गए टोकन की समयसीमा खत्म हो चुकी है.
  • पहले फ़ेच किए गए टोकन की समयसीमा खत्म होने के एक मिनट के अंदर है.

हालांकि, SDK टूल अब भी मान्य टोकन का इस्तेमाल करता है. फ़ेचर को कॉल करें.

नीचे दिए गए उदाहरण में, पुष्टि करने वाला टोकन फ़ेचर बनाने का तरीका बताया गया है:

JavaScript

async 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.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

टोकन को मिंट करने के लिए, सर्वर-साइड एंडपॉइंट लागू करते समय, इन बातों का ध्यान रखें:

  • एंडपॉइंट को टोकन के खत्म होने का समय दिखाना चाहिए; उदाहरण में ऊपर, इसे data.ExpiresInSeconds के रूप में दिया गया है.
  • प्रमाणीकरण टोकन फ़ेचर को समय-सीमा समाप्ति समय (सेकंड में, लाने के समय से लाइब्रेरी में) जोड़ा जा सकता है, जैसा कि उदाहरण में दिखाया गया है.
  • SERVER_TOKEN_URL, आपकी कंपनी लागू करने पर निर्भर करता है. ये उदाहरण देने वाली कंपनी के यूआरएल हैं:
    • https://SERVER_URL/token/driver/VEHICLEID
    • https://SERVER_URL/token/consumer/TRIPID

एचटीएमएल से मैप लोड करें

नीचे दिए गए उदाहरण में, JavaScript SDK टूल को लोड करने का तरीका बताया गया है डाले गए लिंक पर क्लिक करें. callback पैरामीटर, initMap को एक्ज़ीक्यूट करता है एपीआई लोड होने के बाद काम करता है. defer विशेषता ब्राउज़र को एपीआई के लोड होने तक, अपने बाकी पेज को रेंडर करते रहें.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

यात्रा को फ़ॉलो करना

इस सेक्शन में, JavaScript SDK टूल को इस्तेमाल करने का तरीका बताया गया है राइडशेयरिंग या डिलीवरी ट्रिप को फ़ॉलो करने के लिए. पक्का करें कि स्क्रिप्ट टैग में दिए गए कॉलबैक फ़ंक्शन से लाइब्रेरी लोड करें चलाने से पहले.

यात्रा की जगह की जानकारी देने वाली कंपनी को इंस्टैंशिएट करें

JavaScript SDK, लोकेशन प्रोवाइडर को पहले से तय करता है के लिए, फ़्लीट इंजन राइडशेयरिंग एपीआई का इस्तेमाल किया जा सकता है. अपना प्रोजेक्ट आईडी इस्तेमाल करें और टोकन फ़ैक्ट्री का रेफ़रंस देगा, ताकि उसे इंस्टैंशिएट किया जा सके.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

मैप व्यू शुरू करें

JavaScript SDK टूल लोड करने के बाद, शुरू करें मैप व्यू में जोड़ सकते हैं और उसे एचटीएमएल पेज में जोड़ सकते हैं. आपके पेज में यह होना चाहिए एक &lt;div&gt; एलिमेंट जिसमें मैप व्यू शामिल होता है. &lt;div&gt; एलिमेंट नीचे दिए गए उदाहरण में इसका नाम map_canvas है.

रेस की स्थितियों से बचने के लिए, जगह की जानकारी देने वाले का ट्रिप आईडी सेट करें कॉलबैक में, जिसे मैप शुरू होने के बाद शुरू किया जाता है.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

TypeScript

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

गड़बड़ियां ठीक करना

यात्रा की जानकारी के ट्रिगर का अनुरोध करने पर एसिंक्रोनस रूप से होने वाली गड़बड़ियां गड़बड़ी वाले इवेंट. नीचे दिए गए उदाहरण में इन इवेंट को सुनने का तरीका बताया गया है ताकि गड़बड़ियों को हैंडल किया जा सके.

JavaScript

locationProvider.addListener('error', e => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

ध्यान दें: पक्का करें कि लाइब्रेरी कॉल को try...catch ब्लॉक में रैप किया जाए अचानक होने वाली गड़बड़ियों को ठीक करने में मदद मिलती है.

ट्रैकिंग रोकें

जगह की जानकारी देने वाली कंपनी को यात्रा ट्रैक करने से रोकने के लिए, यात्रा आईडी को यहां से हटाएं किसी दूसरे व्यक्ति को टैग करते हैं.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

मैप व्यू से, जगह की जानकारी देने वाली कंपनी को हटाएं

नीचे दिए गए उदाहरण में, मैप व्यू से जगह की जानकारी देने वाली कंपनी को हटाने का तरीका बताया गया है.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

बुनियादी मैप का लुक और स्टाइल पसंद के मुताबिक बनाना

मैप कॉम्पोनेंट के लुक और स्टाइल को पसंद के मुताबिक बनाने के लिए, अपने मैप को स्टाइल दें क्लाउड-आधारित टूल का इस्तेमाल करके या विकल्पों को सीधे कोड में सेट करके ऐसा किया जा सकता है.

क्लाउड-आधारित मैप स्टाइलिंग का इस्तेमाल करना

क्लाउड-आधारित मैप स्टाइलिंग आपको Google Maps का इस्तेमाल करने वाले किसी भी ऐप्लिकेशन के लिए मैप स्टाइल बनाने और उनमें बदलाव करने की सुविधा मिलती है और अपने कोड में कोई बदलाव किए बिना. मैप के स्टाइल, आपके Cloud प्रोजेक्ट में मैप आईडी के तौर पर सेव किए जाते हैं. यहां की यात्रा पर हूं अपने JavaScript SDK मैप पर कोई स्टाइल लागू करें, ताकि mapId और कोई अन्य mapOptions जब आप JourneySharingMapView बनाएँ. mapId फ़ील्ड को बदला नहीं जा सकता या JourneySharingMapView इंस्टैंशिएट किए जाने के बाद जोड़ा जाएगा. नीचे दिए गए उदाहरण में, पहले से बनी मैप स्टाइल को चालू करने का तरीका बताया गया है मैप आईडी.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and 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 SDK टूल की मदद से, जोड़े गए मार्कर के लुक और स्टाइल को पसंद के मुताबिक बनाया जा सकता है मैप. ऐसा करने के लिए आप मार्कर कस्टमाइज़ेशन निर्दिष्ट करते हैं, जो इसके बाद, मैप पर मार्कर जोड़ने से पहले और हर मार्कर अपडेट.

सबसे आसान कस्टमाइज़ेशन यह है कि MarkerOptions ऑब्जेक्ट है जिसे एक ही टाइप के सभी मार्कर पर लागू किया जाएगा. बदलाव ऑब्जेक्ट में तय किए गए मार्कर, हर मार्कर के बनने के बाद लागू किए जाते हैं, सभी डिफ़ॉल्ट विकल्पों को ओवरराइट करना.

कस्टमाइज़ेशन फ़ंक्शन तय करना ज़्यादा बेहतर विकल्प है. पसंद के मुताबिक बनाएं फ़ंक्शन डेटा के आधार पर मार्कर की स्टाइल करने में मदद करते हैं. साथ ही, मार्कर के लिए इंटरैक्टिविटी, जैसे कि क्लिक मैनेज करना. खास तौर पर, यात्रा और ऑर्डर के लिए प्रोग्रेस, कस्टमाइज़ेशन फ़ंक्शन को ऑब्जेक्ट के टाइप के बारे में डेटा भेजती है मार्कर दिखाता है: वाहन, मूल, वेपॉइंट या गंतव्य. इसके बाद, मार्कर एलिमेंट की मौजूदा स्थिति के आधार पर बदलने के लिए मार्कर स्टाइल खुद; उदाहरण के लिए, वाहन के खत्म होने तक वेपॉइंट की संख्या ट्रिप. Fleet Engine के बाहर के सोर्स से भी डेटा इकट्ठा किया जा सकता है और उस जानकारी के आधार पर मार्कर को शैलीबद्ध कर सकता है.

JavaScript SDK टूल की मदद से, FleetEngineTripLocationProviderOptions में ये कस्टमाइज़ेशन पैरामीटर उपलब्ध होते हैं:

MarkerOptions का इस्तेमाल करके मार्कर की स्टाइल बदलें

इस उदाहरण में, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है MarkerOptions ऑब्जेक्ट. किसी भी स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को अपनाएं पहले सूचीबद्ध किसी भी मार्कर कस्टमाइज़ेशन का उपयोग करके मार्कर मिलेगा.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

पसंद के मुताबिक बनाने वाले फ़ंक्शन का इस्तेमाल करके मार्कर की स्टाइल बदलें

इस उदाहरण में, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. फ़ॉलो करें यह पैटर्न, किसी भी मार्कर का इस्तेमाल करके किसी भी मार्कर की स्टाइल को पसंद के मुताबिक बनाने के लिए है कस्टमाइज़ेशन पैरामीटर के बारे में भी बताएंगे, जो पहले बताए गए थे.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

मार्कर में क्लिक हैंडलिंग जोड़ें

इस उदाहरण में, वाहन के मार्कर में क्लिक हैंडलिंग की सुविधा जोड़ने का तरीका बताया गया है. किसी भी मार्कर का इस्तेमाल करके किसी भी मार्कर में क्लिक हैंडलिंग जोड़ने के लिए, इस पैटर्न को अपनाएं कस्टमाइज़ेशन पैरामीटर के बारे में भी बताएंगे, जो पहले बताए गए थे.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

पॉलीलाइन कस्टमाइज़ेशन का इस्तेमाल करना

JavaScript SDK टूल की मदद से, यात्रा के लुक और स्टाइल को पसंद के मुताबिक बनाया जा सकता है मैप पर रास्ता देखें. लाइब्रेरी google.maps.Polyline वाहन के चालू या बचे हुए निर्देशांक में, हर जोड़े के लिए ऑब्जेक्ट पाथ. आपके पास पॉलीलाइन कस्टमाइज़ेशन की जानकारी देकर, Polyline ऑब्जेक्ट को स्टाइल करने का विकल्प है. कॉन्टेंट बनाने फिर लाइब्रेरी में ये कस्टमाइज़ेशन दो परिस्थितियों में लागू होते हैं: ऑब्जेक्ट को मैप में जोड़ देता है और जब ऑब्जेक्ट के लिए इस्तेमाल किया गया डेटा बदल जाता है.

मार्कर कस्टमाइज़ेशन की तरह, आप एक सेट तय कर सकते हैं PolylineOptions मिलान किए गए सभी Polyline ऑब्जेक्ट पर लागू होती है, जब वे बनाया या अपडेट किया गया.

इसी तरह, आपके पास कस्टमाइज़ेशन फ़ंक्शन के बारे में बताने का विकल्प भी होता है. कस्टमाइज़ेशन फ़ंक्शन फ़्लीट इंजन से भेजे गए डेटा के आधार पर, ऑब्जेक्ट की अलग-अलग स्टाइलिंग की अनुमति देते हैं. फ़ंक्शन हर ऑब्जेक्ट की स्टाइल को, इसकी मौजूदा स्थिति के हिसाब से बदल सकता है वाहन; उदाहरण के लिए, Polyline ऑब्जेक्ट को गहरा रंग देना या इससे वाहनों की रफ़्तार को और भी बढ़ाया जा सकता है. दुनिया भर में Fleet Engine के बाहर के सोर्स से लिया जाता है और उसके आधार पर Polyline ऑब्जेक्ट को स्टाइल किया जाता है जानकारी.

इसमें दिए पैरामीटर का इस्तेमाल करके, कस्टमाइज़ेशन के बारे में बताया जा सकता है FleetEngineTripLocationProviderOptions. आपके पास अपनी गाड़ी में पाथ की अलग-अलग स्थितियों के लिए पसंद के मुताबिक सेट करने का विकल्प होता है यात्रा--पहले यात्रा कर ली है, सक्रिय रूप से यात्रा कर रही है या अभी तक यात्रा नहीं की है. कॉन्टेंट बनाने पैरामीटर की जानकारी यहां दी गई है:

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.trip.remainingWaypoints[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: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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'});
      });
    }
  };

कंट्रोल करें कि Polyline ऑब्जेक्ट किसको दिखें

डिफ़ॉल्ट रूप से, सभी Polyline ऑब्जेक्ट दिखते हैं. Polyline ऑब्जेक्ट बनाने के लिए दिखाई नहीं दे रहा है, तो उसका visible प्रॉपर्टी:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

ट्रैफ़िक की जानकारी देने वाले Polyline ऑब्जेक्ट रेंडर करें

फ़्लीट इंजन, इसके चालू और बचे हुए पाथ के लिए ट्रैफ़िक की स्पीड का डेटा दिखाता है फ़ॉलो किया जा रहा वाहन. 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 =
  FleetEngineTripLocationProvider.
      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) => {
    FleetEngineTripLocationProvider.
        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 =
  FleetEngineTripLocationProvider.
      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: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

वाहन या जगह के मार्कर के लिए InfoWindow दिखाएं

InfoWindow का इस्तेमाल किया जा सकता है का इस्तेमाल करें.

नीचे दिए गए उदाहरण में, InfoWindow बनाने और उसे अटैच करने का तरीका बताया गया है वाहन के मार्कर तक पहुंचने के लिए:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  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.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  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

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

कोई मौजूदा मैप बदलें

JavaScript SDK टूल का इस्तेमाल करके, कोई मौजूदा मैप जिसमें मार्कर या अन्य कस्टमाइज़ेशन शामिल हों वह भी कस्टमाइज़ किया जा सकता है.

उदाहरण के लिए, मान लें कि आपके पास स्टैंडर्ड 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, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, 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 SDK टूल जोड़ने के लिए:

  1. पुष्टि करने वाले टोकन की फ़ैक्ट्री के लिए कोड जोड़ें.
  2. initMap() फ़ंक्शन में जगह की जानकारी देने वाली कंपनी शुरू करें.
  3. initMap() फ़ंक्शन में मैप व्यू शुरू करें. व्यू में मैप शामिल होता है.
  4. मैप व्यू शुरू करने के लिए, कस्टमाइज़ेशन को कॉलबैक फ़ंक्शन में ले जाएं.
  5. एपीआई लोडर में लोकेशन लाइब्रेरी जोड़ें.

यहां दिए गए उदाहरण में, किए जाने वाले बदलावों को दिखाया गया है:

<!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
async 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.FleetEngineTripLocationProvider({
    projectId: "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.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, 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 SDK 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 के पास बताया गया है, तो अब इसे मैप पर रेंडर किया जाएगा.