JavaScript filo izleme kitaplığıyla görünümünü ve tarzını özelleştirebilirsiniz. haritaya eklendi. Bunu işaretçi özelleştirmeleri belirterek, Daha sonra, filo izleme kitaplığının haritaya işaretçi eklemeden önce uyguladığı ve her işaretçi güncellemesiyle birlikte. İşaretçilerin görünümünü ve tarzını özelleştirebilirsiniz. şu yöntemleri kullanabilirsiniz:
Türe göre stil işaretçileri: Belirttiğiniz türe göre
MarkerOptionsstil işaretçileri kullanır. Belirttiğiniz değişiklikler, her işaretçi oluşturulduktan sonra uygulanır. Örneğin, örnekler için Türe göre stil işaretçileri bölümüne bakın inceleyebilirsiniz.Verileri temel alan stil işaretçileri: Şuna göre bir özelleştirme işlevi belirtin: göstermenin yanı sıra tıklama işleme gibi işaretçilere etkileşim olanağı eklemektir. Filo izleme veya dış kaynaklardan gelen verilere göre stil belirleyebilirsiniz:
Filo izleme verileri: Filo İzleme, verileri işaretçinin nesnesinin türünü içeren özelleştirme işlevi temsil eder: araç, durak veya görev. İşaretçi stili daha sonra değişiyor mevcut durumuna göre değiştirin. Örneğin, ya da görev türüne göre değişebilir.
Dış kaynaklar: Filo izleme verilerini Fleet Engine dışındaki kaynakları kullanır ve işaretçiyi buna göre biçimlendirirsiniz. yardımcı olur.
Örnekler için Verilere dayalı stil işaretçileri bölümüne bakın.
İşaretçilere tıklama işlemeyi ekleme: Örnekler için Tıklama işleme ekleyin.
Görünür olacak işaretçileri filtrele: Gösterilecek işaretçileri filtreleyin JavaScript konumunda bulunan filtreleme özellikleriyle birlikte sağlar. Örneğin:
ziyaret edin.Planlanmış bir görev teslim aracını izlemek için işaretçi özelleştirmeyi kullanma: İşaretçileri, araçları takip edecek şekilde özelleştirebilirsiniz. Daha fazla bilgi için bir teslimat aracını takip etmek için işaretçi özelleştirme.
İşaretçi özelleştirme seçenekleri
Filo izleme kitaplığı aşağıdaki özelleştirme parametrelerini sağlar:
İsteğe bağlı gezileri özelleştirme parametreleri
Planlanmış görevleri özelleştirme parametreleri
Türe göre stil işaretçileri
Aşağıdaki örnekte, bir araç işaretçisinin stilinin
MarkerOptions nesnesini ifade eder. Herhangi bir dosyanın stilini özelleştirmek için bu kalıbı
yukarıda listelenen seçeneklerden herhangi birini kullanarak
İşaretçi özelleştirme seçenekleri.
İsteğe bağlı geziler örneği
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Planlanmış görevler örneği
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Stil işaretçileri verilere göre belirlenir
Aşağıdaki örnekte, bir araç işaretçisinin stilinin özelleştirme işlevlerinden yararlanabilirsiniz. Herhangi bir dosyanın stilini özelleştirmek için bu kalıbı listelenen seçeneklerden herhangi birini kullanarak verilere dayalı Yukarıda listelenen işaretçi özelleştirme seçenekleri.
İsteğe bağlı geziler örneği
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
Planlanmış görevler örneği
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
İşaretçilere tıklama işleme ekleme
Aşağıdaki örnekte, tıklama işlemenin bir araç işaretçisine nasıl ekleneceği gösterilmektedir. Aşağıdakilerden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu modeli izleyin: İşaretçi özelleştirme seçenekleri'nde listelenen seçenekleri işaretleyin.
İsteğe bağlı geziler örneği
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Planlanmış görevler örneği
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Hangi işaretçilerin görünür olduğunu filtreleyin
setVisible kullanmanız gerekiyorsa işaretçileri filtrelemek için bu kalıbı izleyin
kullanarak yukarıdaki İşaretçi özelleştirme seçenekleri bölümünde listelenen seçeneklerden birini kullanabilirsiniz.
İsteğe bağlı geziler örneği
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);
}
};
Planlanmış görevler örneği
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};