JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी की मदद से, करीब-करीब रीयल टाइम में अपने सभी वाहनों की गाड़ियों की जगह की जानकारी देखी जा सकती है. इस लाइब्रेरी में, वाहनों और यात्राओं की जानकारी दिखाने के लिए, मांग पर राइड और डिलीवरी एपीआई का इस्तेमाल किया जाता है. JavaScript Fleet ट्रैकिंग लाइब्रेरी में JavaScript मैप कॉम्पोनेंट होता है. यह स्टैंडर्ड google.maps.Map इकाई और डेटा कॉम्पोनेंट को ड्रॉप-इन में बदलता है, ताकि उन्हें Fleet Engine से कनेक्ट किया जा सके.
घटक
JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी, वाहनों और ट्रिप वेपॉइंट को विज़ुअलाइज़ करने के लिए कॉम्पोनेंट उपलब्ध कराती है. साथ ही, ईटीए या यात्रा की बची हुई दूरी के लिए रॉ डेटा फ़ीड की सुविधा देती है.
फ़्लीट ट्रैकिंग मैप व्यू
फ़्लीट ट्रैकिंग मैप व्यू कॉम्पोनेंट, वाहनों की जगह और ट्रिप वेपॉइंट दिखाता है. अगर किसी वाहन का रास्ता जाना जा चुका है, तो मैप व्यू कॉम्पोनेंट उस वाहन के बताए गए रास्ते पर चलने के साथ-साथ उसे ऐनिमेट करता है.
जगह की जानकारी देने वाली कंपनियां
जगह की जानकारी देने वाली सुविधा, Fleet Engine में सेव की गई जानकारी के साथ काम करती है, ताकि ट्रैक किए गए ऑब्जेक्ट की जगह की जानकारी, जर्नी शेयरिंग मैप में भेजी जा सके.
वाहन की जगह की जानकारी देने वाली कंपनी
वाहन की जगह की जानकारी देने वाली कंपनी, एक वाहन की जगह की जानकारी दिखाती है. इसमें वाहन की जगह और मौजूदा यात्रा के बारे में जानकारी होती है.
फ़्लीट लोकेशन प्रोवाइडर
फ़्लीट की जगह की जानकारी देने वाली कंपनी, एक से ज़्यादा गाड़ियों की जगह की जानकारी दिखाती है. किसी वाहन और उसकी जगह की जानकारी दिखाने के लिए, फ़िल्टर का इस्तेमाल किया जा सकता है. इसके अलावा, सभी डिवाइसों के लिए, वाहन की जगह की जानकारी भी दिखाई जा सकती है.
ट्रैक की गई जगहों की जानकारी कंट्रोल करना
'किसको दिखे' नियमों से यह तय होता है कि फ़्लीट इंजन की, जगह की जानकारी देने वाली कंपनी के लिए, Maps पर जगह की जानकारी से जुड़ा कोई ऑब्जेक्ट कब दिखेगा. नोट - कस्टम या व्युत्पन्न स्थान कंपनी का उपयोग करने से दृश्यता नियम बदल सकते हैं.
वाहन
Fleet Engine में वाहन बनाते ही, वाहन दिखने लगता है. साथ ही, वाहन की स्थिति Online होने पर यह दिखने लगता है. इसका मतलब है कि वाहन तब भी दिख सकता है,
जब उसके लिए मौजूदा यात्रा असाइन न की गई हो.
वेपॉइंट लोकेशन मार्कर
वेपॉइंट जगह का मार्कर, वाहन की यात्रा के दौरान पॉइंट दिखाता है. यह सफ़र शुरुआत की जगह से शुरू होकर आखिरी मंज़िल पर खत्म होता है. वेपॉइंट लोकेशन मार्कर को इस तरह परिभाषित किया जा सकता है:
- शुरुआत की जगह - वाहन की यात्रा की शुरुआती जगह की जानकारी देता है
- मध्यवर्ती - वाहन यात्रा के लिए स्टॉपओवर का संकेत देता है
- गंतव्य - वाहन यात्रा के लिए अंतिम स्थान का संकेत देता है
वाहनों के वेपॉइंट, मैप पर शुरुआत की जगह, बीच के रास्ते, और मंज़िल के मार्कर के तौर पर दिखाए जाते हैं.
JavaScript Fleet ट्रैकिंग लाइब्रेरी का इस्तेमाल शुरू करना
JavaScript Fleet Tracking Library का इस्तेमाल करने से पहले, पक्का कर लें कि आपको Fleet Engine के बारे में जानकारी हो. साथ ही, आपको एपीआई पासकोड पाने के बारे में भी जानकारी हो. इसके बाद, ट्रिप आईडी और वाहन के आईडी का दावा करें.
ट्रिप आईडी और वाहन के आईडी का दावा करना
वाहन की जगह की जानकारी देने वाली कंपनी का इस्तेमाल करके वाहनों को ट्रैक करने के लिए, ट्रिप आईडी और वाहन के आईडी के दावे के साथ JSON वेब टोकन (JWT) बनाएं.
JWT पेलोड बनाने के लिए, tripid और vehicleid कुंजियों के साथ ऑथराइज़ेशन सेक्शन में एक अतिरिक्त दावा जोड़ें. साथ ही, हर कुंजी के value को * पर सेट करें.
टोकन, Fleet Engine सर्विस सुपर यूज़र क्लाउड
IAM रोल का इस्तेमाल करके बनाया जाना चाहिए. ध्यान दें कि इससे, फ़्लीट इंजन वाली इकाइयों को बनाने, पढ़ने, और उनमें बदलाव करने का काफ़ी ऐक्सेस मिलता है. साथ ही, इसे सिर्फ़ भरोसेमंद उपयोगकर्ताओं के साथ ही शेयर किया जाना चाहिए.
यहां दिए गए उदाहरण में, वाहन और टास्क से ट्रैक करने के लिए टोकन बनाने का तरीका बताया गया है:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"tripid": "*",
"vehicleid": "*",
}
}
पुष्टि करने वाला टोकन फ़ेचर बनाएं
इनमें से किसी भी बात के सही होने पर, JavaScript Fleet ट्रैकिंग लाइब्रेरी, ऑथेंटिकेशन टोकन फ़ेचर का इस्तेमाल करके टोकन का अनुरोध करती है:
- इसमें मान्य टोकन नहीं होता है, जैसे कि जब इसने हाल ही के पेज लोड पर फ़ेचर को कॉल नहीं किया है या जब फ़ेचर कोई टोकन नहीं देता है.
- इसे पहले फ़ेच किए गए टोकन की समयसीमा खत्म हो गई है.
- इससे पहले जो टोकन फ़ेच किया गया था उसकी समयसीमा खत्म होने के एक मिनट के अंदर का समय है.
नहीं तो, लाइब्रेरी पिछले जारी किए गए, अब भी मान्य टोकन का इस्तेमाल करती है और फ़ेचर को कॉल नहीं करती है.
आपके पास, ऑथेंटिकेशन टोकन फ़ेचर बनाने का विकल्प होता है. इससे, अपने सर्वर पर सही दावों के आधार पर बनाया गया टोकन वापस पाया जा सकता है. इसके लिए, आपको अपने प्रोजेक्ट के सेवा खाते के सर्टिफ़िकेट का इस्तेमाल करना होगा. यह ज़रूरी है कि आप सिर्फ़ अपने सर्वर पर टोकन बनाएं. साथ ही, अपने सर्टिफ़िकेट को किसी भी क्लाइंट के साथ शेयर न करें. ऐसा न करने पर, आपके सिस्टम की सुरक्षा को खतरा हो सकता है.
फ़ेचर को प्रॉमिस में रैप किए गए दो फ़ील्ड के साथ डेटा स्ट्रक्चर दिखाना होगा:
- स्ट्रिंग
token. - नंबर
expiresInSeconds. फ़ेच करने के बाद इतने समय में टोकन खत्म हो जाता है.
इस उदाहरण में, पुष्टि करने वाला टोकन फ़ेचर बनाने का तरीका बताया गया है:
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/driver/VEHICLE_ID - https://
SERVER_URL/token/consumer/TRIP_ID - https://
SERVER_URL/token/fleet_reader
- https://
एचटीएमएल से कोई मैप लोड करें
यहां दिए गए उदाहरण में, किसी खास यूआरएल से JavaScript Journey शेयरिंग लाइब्रेरी को लोड करने का तरीका बताया गया है. एपीआई लोड होने के बाद, callback पैरामीटर initMap फ़ंक्शन एक्ज़ीक्यूट करता है. Defer एट्रिब्यूट की मदद से ब्राउज़र, एपीआई के लोड होने के दौरान आपके बाकी पेज को रेंडर करना जारी रखता है.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>
किसी वाहन को फ़ॉलो करें
इस सेक्शन में बताया गया है कि किसी वाहन को फ़ॉलो करने के लिए, JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी का इस्तेमाल कैसे किया जाता है. अपना कोड चलाने से पहले, स्क्रिप्ट टैग में दिए गए कॉलबैक फ़ंक्शन से लाइब्रेरी लोड करना न भूलें.
वाहन की जगह की जानकारी देने वाली कंपनी को इंस्टैंशिएट करें
JavaScript Fleet Tracking Library में, ऑन डिमांड राइड और डिलीवरी एपीआई के लिए, जगह की जानकारी देने वाली कंपनी की जानकारी दी जाती है. इसे इंस्टैंशिएट करने के लिए, अपने प्रोजेक्ट आईडी और टोकन फ़ैक्ट्री के रेफ़रंस का इस्तेमाल करें.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
मैप व्यू शुरू करना
JavaScript जर्नी शेयरिंग लाइब्रेरी लोड होने के बाद, मैप व्यू शुरू करें और उसे एचटीएमएल पेज में जोड़ें. आपके पेज में <div> एलिमेंट होना चाहिए, जिसमें मैप व्यू हो. नीचे दिए गए उदाहरण में <div> एलिमेंट को map_canvas नाम दिया गया है.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);
बदलाव के इवेंट सुनना
जगह की जानकारी देने वाली कंपनी का इस्तेमाल करके, vehicle ऑब्जेक्ट से किसी वाहन की मेटा जानकारी पाई जा सकती है. मेटा जानकारी में ETA और वाहन के अगले पिकअप या ड्रॉप-ऑफ़
से पहले की बची हुई दूरी शामिल होती है. मुख्य जानकारी में बदलाव करने पर, अपडेट इवेंट ट्रिगर हो जाता है. नीचे दिए गए उदाहरण में, बदलाव से जुड़े इन इवेंट
को सुनने का तरीका बताया गया है.
JavaScript
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
गड़बड़ियों का पता लगाना
वाहन की जानकारी का अनुरोध करने से एसिंक्रोनस रूप से पैदा होने वाली गड़बड़ियां, गड़बड़ी के इवेंट को ट्रिगर करती हैं. नीचे दिए गए उदाहरण में, गड़बड़ियों को ठीक करने के लिए इन इवेंट को सुनने का तरीका बताया गया है.
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);
});
ट्रैकिंग रोकें
जगह की जानकारी देने वाली कंपनी को वाहन ट्रैक करने से रोकने के लिए, जगह की जानकारी देने वाली कंपनी से वाहन का आईडी हटाएं.
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
मैप व्यू से, जगह की जानकारी देने वाली कंपनी को हटाएं
नीचे दिए गए उदाहरण में, मैप व्यू से जगह की जानकारी देने वाली कंपनी को हटाने का तरीका बताया गया है.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
सभी गाड़ियों की सूची देखना
इस सेक्शन में, सभी वाहनों की जानकारी देखने के लिए, 'JavaScript का सफ़र शेयर करने की सुविधा' लाइब्रेरी का इस्तेमाल करने का तरीका बताया गया है. अपना कोड चलाने से पहले, स्क्रिप्ट टैग में दिए गए कॉलबैक फ़ंक्शन से लाइब्रेरी लोड करना न भूलें.
वाहन के फ़्लीट की जगह की जानकारी देने वाली कंपनी को इंस्टैंशिएट करें
JavaScript Fleet Tracking Library में, जगह की जानकारी देने वाली ऐसी कंपनी के बारे में जानकारी दी जाती है जो On Demand Rides and delivery API से कई वाहन फ़ेच करती है. इसे इंस्टैंशिएट करने के लिए, अपने प्रोजेक्ट आईडी और टोकन फ़ेचर के रेफ़रंस का इस्तेमाल करें.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
vehicleFilter ऐसी क्वेरी के बारे में बताता है जिसका इस्तेमाल मैप पर दिखने वाली गाड़ियों को फ़िल्टर करने के लिए किया जाता है.
यह फ़िल्टर सीधे Fleet Engine को पास किया जाता है. इस्तेमाल किए जा सकने वाले फ़ॉर्मैट के लिए, ListVehiclesRequest देखें.
locationRestriction उस इलाके को सीमित करता है जहां मैप पर वाहन दिखाने हैं.
इससे यह भी कंट्रोल होता है कि जगह की जानकारी ट्रैक करने की सुविधा चालू है या नहीं. इसके सेट होने तक स्थान ट्रैकिंग
शुरू नहीं होगी.
जगह की जानकारी देने वाली कंपनी बनने के बाद, मैप व्यू शुरू करें.
मैप व्यूपोर्ट का इस्तेमाल करके स्थान प्रतिबंध सेट करें
locationRestriction की सीमाओं को मैप व्यू में दिखने वाले इलाके से मैच करने के लिए कॉन्फ़िगर किया जा सकता है.
JavaScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
TypeScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
बदलाव के इवेंट सुनना
जगह की जानकारी देने वाली कंपनी का इस्तेमाल करके, vehicles ऑब्जेक्ट से फ़्लीट की मेटा जानकारी पाई जा सकती है. मुख्य जानकारी में वाहन की प्रॉपर्टी, जैसे कि नेविगेशन का स्टेटस, अगले वेपॉइंट से दूरी, और कस्टम एट्रिब्यूट शामिल होते हैं. ज़्यादा जानकारी के लिए, रेफ़रंस दस्तावेज़ देखें. मेटा जानकारी में बदलाव होने पर, अपडेट इवेंट ट्रिगर होगा. नीचे दिए गए उदाहरण में, बदलाव से जुड़े इन इवेंट को सुनने का तरीका बताया गया है.
JavaScript
locationProvider.addListener('update', e => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
// e.vehicles contains data that may be useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
गड़बड़ियों का पता लगाना
वाहन के सभी डिवाइसों की जानकारी का अनुरोध करने से एसिंक्रोनस तरीके से होने वाली गड़बड़ियां, गड़बड़ी वाले इवेंट को ट्रिगर करती हैं. इन इवेंट को सुनने का तरीका बताने वाले उदाहरणों के लिए, गड़बड़ियों का पता लगाने के लिए सुनें पेज पर जाएं.
ट्रैकिंग रोकें
जगह की जानकारी देने वाले को फ़्लीट ट्रैक करने से रोकने के लिए, जगह की जानकारी देने वाली कंपनी की सीमाएं शून्य पर सेट करें.
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
मैप व्यू से, जगह की जानकारी देने वाली कंपनी को हटाएं
नीचे दिए गए उदाहरण में, मैप व्यू से जगह की जानकारी देने वाली कंपनी को हटाने का तरीका बताया गया है.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
बुनियादी मैप के रंग-रूप को पसंद के मुताबिक बनाएं
मैप कॉम्पोनेंट के लुक और स्टाइल को पसंद के मुताबिक बनाने के लिए, क्लाउड-आधारित टूल का इस्तेमाल करके अपने मैप की स्टाइल बदलें. इसके अलावा, सीधे कोड में विकल्प सेट करके भी ऐसा किया जा सकता है.
क्लाउड-आधारित मैप स्टाइल का इस्तेमाल करना
क्लाउड-आधारित मैप स्टाइल से, आपको Google Cloud कंसोल से Google Maps का इस्तेमाल करने वाले अपने सभी ऐप्लिकेशन के लिए, मैप स्टाइल बनाने और उनमें बदलाव करने की सुविधा मिलती है. इसके लिए, आपको कोड में बिना कोई बदलाव करने की ज़रूरत नहीं होती. मैप स्टाइल को आपके Cloud प्रोजेक्ट में, मैप आईडी के तौर पर सेव किया जाता है. अपने JavaScript Fleet Tracking मैप पर कोई स्टाइल लागू करने के लिए, JourneySharingMapView बनाते समय mapId डालें. JourneySharingMapView को इंस्टैंशिएट करने के बाद, mapId फ़ील्ड को बदला या जोड़ा नहीं जा सकता. यहां दिए गए उदाहरण में, पहले बनाए गए मैप स्टाइल को मैप आईडी के साथ चालू करने का तरीका बताया गया है.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
कोड पर आधारित मैप स्टाइलिंग का इस्तेमाल करना
मैप की स्टाइल को पसंद के मुताबिक बनाने का दूसरा तरीका यह है कि 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 के बाहर के सोर्स से भी डेटा को जोड़ा जा सकता है और उस जानकारी के आधार पर मार्कर को स्टाइल किया जा सकता है.
इसके अलावा, मार्कर विज़िबिलिटी को फ़िल्टर करने के लिए, कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल किया जा सकता है.
ऐसा करने के लिए, मार्कर पर
setVisible(false)
को कॉल करें.
हालांकि, हमारा सुझाव है कि परफ़ॉर्मेंस की वजह से, जगह की जानकारी देने वाली कंपनी में नेटिव फ़िल्टर के साथ फ़िल्टर करें, जैसे कि FleetEngineFleetLocationProvider.vehicleFilter.
हालांकि, फ़िल्टर करने की अतिरिक्त सुविधा की ज़रूरत पड़ने पर, कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल करके फ़िल्टर लागू किया जा सकता है.
फ़्लीट ट्रैकिंग लाइब्रेरी में ये पसंद के मुताबिक पैरामीटर दिए गए हैं:
MarkerOptions का उपयोग करके मार्कर की शैली बदलें
इस उदाहरण में, वाहन के मार्कर की स्टाइल को MarkerOptions ऑब्जेक्ट के साथ कॉन्फ़िगर करने का तरीका बताया गया है. ऊपर दिए गए किसी भी मार्कर कस्टमाइज़ेशन पैरामीटर का इस्तेमाल करके, किसी भी मार्कर की स्टाइल को पसंद के मुताबिक बनाने के लिए इस पैटर्न का पालन करें.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल करके मार्कर की स्टाइल बदलें
नीचे दिए गए उदाहरण में, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. किसी भी मार्कर की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न का पालन करें. इसके लिए, ऊपर दिए गए किसी भी मार्कर कस्टम पैरामीटर का इस्तेमाल करें.
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
मार्कर में क्लिक हैंडलिंग जोड़ें
नीचे दिए गए उदाहरण में, वाहन के मार्कर में क्लिक हैंडलिंग जोड़ने का तरीका बताया गया है. ऊपर दिए गए किसी भी मार्कर कस्टमाइज़ेशन पैरामीटर का इस्तेमाल करके, किसी भी मार्कर में क्लिक हैंडलिंग जोड़ने के लिए इस पैटर्न का पालन करें.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
दिखाई देने वाले मार्कर फ़िल्टर करें
इस उदाहरण में यह फ़िल्टर करने का तरीका बताया गया है कि कौनसे वाहन के मार्कर दिख रहे हैं. ऊपर दिए गए किसी भी मार्कर कस्टमाइज़ेशन पैरामीटर का इस्तेमाल करके, किसी भी मार्कर को फ़िल्टर करने के लिए, इस पैटर्न का पालन करें.
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
वाहन को फ़ॉलो करते समय, पॉलीलाइन को पसंद के मुताबिक बनाने की सुविधा इस्तेमाल करें
फ़्लीट ट्रैकिंग लाइब्रेरी की मदद से, मैप पर
फ़ॉलो किए जा रहे वाहन के रास्ते के लुक और स्टाइल को अपनी पसंद के मुताबिक बनाया जा सकता है. लाइब्रेरी, वाहन के चालू या बचे हुए पाथ में कोऑर्डिनेट के हर जोड़े के लिए, google.maps.Polyline ऑब्जेक्ट बनाती है.
पॉलीलाइन कस्टमाइज़ेशन के बारे में बताकर, Polyline ऑब्जेक्ट को स्टाइल किया जा सकता है. इसके बाद, लाइब्रेरी इन कस्टमाइज़ेशन को दो स्थितियों में लागू करती है: मैप पर ऑब्जेक्ट जोड़ने से पहले, और ऑब्जेक्ट के लिए इस्तेमाल किए गए डेटा में बदलाव होने से पहले.
मार्कर को पसंद के मुताबिक बनाने की तरह ही, PolylineOptions का एक सेट तय किया जा सकता है, जो मेल खाने वाले सभी Polyline ऑब्जेक्ट पर लागू हो जाए. ऐसा तब होता है, जब उन्हें बनाया या अपडेट किया जाता है.
इसी तरह, कस्टमाइज़ेशन फ़ंक्शन तय किया जा सकता है. कस्टमाइज़ेशन फ़ंक्शन, Fleet Engine से मिले डेटा के आधार पर, ऑब्जेक्ट को अलग-अलग स्टाइल में बदलने की सुविधा देते हैं.
यह फ़ंक्शन, वाहन की मौजूदा स्थिति के हिसाब से हर ऑब्जेक्ट की स्टाइल बदल सकता है. उदाहरण के लिए, वाहन के धीरे चलने पर, Polyline ऑब्जेक्ट को ज़्यादा गहरा रंग या मोटा करके दिखाना. आप चाहें, तो Fleet Engine के बाहर के सोर्स से भी मीटिंग में शामिल हुआ जा सकता है और उस जानकारी के आधार पर Polyline ऑब्जेक्ट को स्टाइल किया जा सकता है.
FleetEngineVehicleLocationProviderOptions में दिए गए पैरामीटर का इस्तेमाल करके, कस्टमाइज़ेशन के बारे में बताया जा सकता है.
आप वाहन की यात्रा के दौरान, पाथ की अलग-अलग स्थितियों के हिसाब से मनमुताबिक बदलाव करने की सुविधा सेट कर सकते हैं--वे पहले ही यात्रा कर चुके हैं, सक्रिय रूप से यात्रा कर चुके हैं या अभी तक यात्रा नहीं कर चुके हैं. पैरामीटर नीचे दिए गए हैं:
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.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
कंट्रोल करें कि Polyline ऑब्जेक्ट किसको दिखे
डिफ़ॉल्ट रूप से, सभी Polyline ऑब्जेक्ट दिखते हैं. किसी Polyline ऑब्जेक्ट को न दिखाने के लिए, उसकी visible प्रॉपर्टी को सेट करें:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
ट्रैफ़िक की जानकारी देने वाले Polyline ऑब्जेक्ट रेंडर करें
Fleet Engine, फ़ॉलो किए गए वाहन के लिए, चालू और बाकी पाथ के ट्रैफ़िक की स्पीड का डेटा दिखाता है. इस जानकारी का इस्तेमाल करके, Polyline ऑब्जेक्ट को उनकी ट्रैफ़िक स्पीड के हिसाब से स्टाइल में बांटा जा सकता है:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
वाहन या जगह के मार्कर के लिए InfoWindow दिखाएं
किसी वाहन या जगह के मार्कर के बारे में ज़्यादा जानकारी दिखाने के लिए, InfoWindow का इस्तेमाल किया जा सकता है.
नीचे दिए गए उदाहरण में, InfoWindow बनाने और उसे वाहन के मार्कर से जोड़ने का तरीका बताया गया है.
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
अपने-आप फ़िट होने की सुविधा बंद करें
अपने-आप फ़िट होने की सुविधा को बंद करके, मैप को व्यूपोर्ट में अपने-आप फ़िट होने से रोका जा सकता है और अनुमानित रास्ते पर लगाया जा सकता है. इस उदाहरण में बताया गया है कि सफ़र की जानकारी शेयर करने वाले मैप व्यू को कॉन्फ़िगर करते समय, अपने-आप फ़िट होने की सुविधा को कैसे बंद किया जाए.
JavaScript
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,
...
});
कोई मौजूदा मैप बदलें
आप मार्कर या अन्य कस्टमाइज़ेशन वाले किसी मौजूदा मैप को, उन कस्टमाइज़ेशन को खोए बिना बदल सकते हैं.
उदाहरण के लिए, मान लें कि आपके पास मानक 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 Oracle Park Stadium
var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
// 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 Oracle Park
var marker = new google.maps.Marker({ position: oraclePark, 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. Use FleetEngineVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
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
});
mapView.addListener('ready', () => {
locationProvider.vehicleId = VEHICLE_ID;
// (4) Add customizations like before.
// The location of Oracle Park
var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
// 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 Oracle Park
var marker = new google.maps.Marker({position: oraclePark, 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, which includes Fleet Tracking functionality.
-->
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
></script>
</body>
</html>
अगर आप Oracle पार्क के पास बताए गए आईडी वाला वाहन चलाते हैं, तो यह मैप में दिखेगी.