এই ডকুমেন্টে কীভাবে একটি মানচিত্রের চেহারা এবং অনুভূতি কাস্টমাইজ করা যায় এবং ডেটা দৃশ্যমানতা এবং ভিউপোর্ট বিকল্পগুলি নিয়ন্ত্রণ করা যায় তা আলোচনা করা হয়েছে। আপনি নিম্নলিখিত উপায়ে এটি করতে পারেন:
- ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন
- আপনার নিজস্ব কোডে সরাসরি মানচিত্র শৈলীর বিকল্পগুলি সেট করুন
ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করে মানচিত্রটি স্টাইল করুন
আপনার জাভাস্ক্রিপ্ট কনজিউমার ট্রিপ শেয়ারিং ম্যাপে একটি ম্যাপ স্টাইল প্রয়োগ করতে, JourneySharingMapView তৈরি করার সময় একটি mapId এবং অন্য যেকোনো mapOptions উল্লেখ করুন।
নিম্নলিখিত উদাহরণগুলি দেখায় যে কীভাবে একটি মানচিত্র আইডি দিয়ে একটি মানচিত্র শৈলী প্রয়োগ করতে হয়।
জাভাস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
টাইপস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
আপনার নিজস্ব কোডে সরাসরি মানচিত্র স্টাইল করুন
JourneySharingMapView তৈরি করার সময় আপনি মানচিত্রের বিকল্পগুলি সেট করে মানচিত্রের স্টাইলিং কাস্টমাইজ করতে পারেন। নিম্নলিখিত উদাহরণগুলি মানচিত্রের বিকল্পগুলি ব্যবহার করে কীভাবে একটি মানচিত্র স্টাইল করবেন তা দেখায়। আপনি কোন মানচিত্রের বিকল্পগুলি সেট করতে পারেন সে সম্পর্কে আরও তথ্যের জন্য, Google Maps JavaScript API রেফারেন্সে mapOptions দেখুন।
জাভাস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
টাইপস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
মানচিত্রে তথ্য প্রদর্শন করুন
InfoWindow ব্যবহার করে একটি যানবাহন বা অবস্থান চিহ্নিতকারী সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করুন। আরও তথ্যের জন্য, InfoWindow দেখুন।
নিচের উদাহরণে দেখানো হয়েছে কিভাবে একটি InfoWindow তৈরি করতে হয় এবং এটি একটি যানবাহন মার্কারের সাথে সংযুক্ত করতে হয়:
জাভাস্ক্রিপ্ট
// 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();
টাইপস্ক্রিপ্ট
// 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();
স্বয়ংক্রিয় ফিটিং বন্ধ করুন
আপনি স্বয়ংক্রিয় ফিটিং অক্ষম করে গাড়ি এবং প্রত্যাশিত রুটে ভিউপোর্ট স্বয়ংক্রিয়ভাবে ফিট করা থেকে মানচিত্রটি বন্ধ করতে পারেন। নিম্নলিখিত উদাহরণটি দেখায় যে আপনি যখন যাত্রা ভাগ করে নেওয়ার মানচিত্র দৃশ্য কনফিগার করেন তখন কীভাবে স্বয়ংক্রিয় ফিটিং অক্ষম করবেন।
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
টাইপস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});