इस दस्तावेज़ में, मैप में वाहन और जगह के मार्कर को पसंद के मुताबिक बनाने का तरीका बताया गया है का उपयोग करते हैं, तो आप उपभोक्ताओं के लिए अपने वेब-आधारित शिपमेंट ट्रैकिंग ऐप का उपयोग करते हैं.
JavaScript उपभोक्ता SDK की मदद से, दो यूज़र इंटरफ़ेस (यूआई) के लुक और स्टाइल को पसंद के मुताबिक बनाया जा सकता है मैप में जोड़े गए मार्कर के प्रकार:
- डिलीवरी करने वाले वाहन के मार्कर:
deliveryVehicleMarkerCustomization
का इस्तेमाल करें - डेस्टिनेशन मार्कर:
destinationMarkerCustomization
का इस्तेमाल करें
इन दो में से किसी एक तरीके से ऐसा किया जा सकता है:
- सबसे आसान: सभी मार्कर पर लागू करने के लिए एक
MarkerOptions
ऑब्जेक्ट तय करें एक ही तरह के हैं. इसके बाद, कंज़्यूमर SDK टूल, स्थिति: मैप पर मार्कर जोड़ने से पहले और डेटा का इस्तेमाल कब किया गया मार्कर बदल गए हैं. - ज़्यादा बेहतर: कस्टमाइज़ेशन फ़ंक्शन तय करें. कस्टमाइज़ेशन फ़ंक्शन डेटा के आधार पर मार्कर की शैली में बदलाव करने के साथ-साथ मार्कर के लिए इंटरैक्टिविटी, जैसे कि क्लिक मैनेज करना. खास तौर पर, उपभोक्ता SDK टूल, कस्टमाइज़ेशन फ़ंक्शन को मार्कर दिखाता है: वाहन या मंज़िल. इसके बाद यह मार्कर स्टाइलिंग की अनुमति देता है मार्कर एलिमेंट की मौजूदा स्थिति के आधार पर बदलने के लिए; इसके लिए उदाहरण के लिए, मंज़िल तक पहुंचने के लिए बचे हुए स्टॉप की संख्या. आपने लोगों तक पहुंचाया मुफ़्त में Fleet Engine के बाहर के सोर्स से भी डेटा इकट्ठा हो सकता है और मार्कर का इस्तेमाल करें.
आसान उदाहरण: MarkerOptions
का इस्तेमाल करें
इस उदाहरण में, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है
MarkerOptions
ऑब्जेक्ट. इस उदाहरण में, मार्कर की ओपैसिटी को 50% पर सेट किया गया है.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
बेहतर उदाहरण: कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल करना
इस उदाहरण में, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है स्टॉप तक पहुंचने से पहले, वाहन के स्टॉप की बची हुई संख्या दिखाएं शेड्यूल किया गया टास्क.
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.
});
}
};
मार्कर के लिए अतिरिक्त जानकारी दिखाएं
किसी प्रॉडक्ट के बारे में ज़्यादा जानकारी दिखाने के लिए, 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();