JavaScript filo izleme kitaplığıyla haritaya eklenen işaretçilerin görünümünü ve tarzını özelleştirebilirsiniz. Bunu, işaretçi özelleştirmelerini belirterek yaparsınız. Ardından filo izleme kitaplığı, haritaya işaretçi eklemeden önce ve her işaretçi güncellemesinde bu özelleştirmeleri uygular. İşaretçilerinizin görünümünü ve tarzını aşağıdaki yöntemlerle özelleştirebilirsiniz:
Türe göre stil işaretçileri: Aynı türdeki stil işaretçilerini biçimlendirmek için bir
MarkerOptionsobjesi belirtin. Belirttiğiniz değişiklikler, her işaretçi oluşturulduktan sonra varsayılan seçeneklerin üzerine yazılarak uygulanır. Örnekler için bu kılavuzun Türe dayalı stil işaretçileri bölümüne bakın.Verilere dayalı işaretçi stilleri: Verilere dayalı bir özelleştirme işlevi belirtin ve işaretçilere tıklama işleme gibi etkileşimler ekleyin. Stili, filo takibi veya harici kaynaklardan gelen verilere göre ayarlayabilirsiniz:
Araç takibi verilerinden: Araç takibi, işaretçinin temsil ettiği nesne türü (araç, durak veya görev) dahil olmak üzere verileri özelleştirme işlevine iletir. İşaretçi stili, işaretçi öğesinin mevcut durumuna göre değişir. Örneğin, kalan durak sayısı veya görevin türü.
Dış kaynaklar: Filo takibi verilerini Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir ve işaretçiyi bu bilgilere göre de biçimlendirebilirsiniz.
Örnekler için Verilere dayalı stil işaretçileri bölümüne bakın.
İşaretçilere tıklama işleme ekleme: Örnekler için Tıklama işleme ekleme bölümüne bakın.
Görünür işaretçileri filtreleme: JavaScript konum sağlayıcısında bulunan filtreleme özellikleriyle hangi işaretçilerin görüneceğini filtreleyin. Örneğin:
Planlanmış görev teslim aracını izlemek için işaretçi özelleştirmesini kullanma: Araçları izlemek için işaretçileri özelleştirebilirsiniz. Daha fazla bilgi için Teslim aracını izlemek için işaretçi özelleştirmesini kullanma başlıklı makaleyi inceleyin.
İşaretçi özelleştirme seçenekleri
Filo izleme kitaplığı aşağıdaki özelleştirme parametrelerini sağlar:
İsteğe bağlı gezi özelleştirme parametreleri
Planlanmış görev özelleştirme parametreleri
Türe göre stil işaretçileri
Aşağıdaki örnekte, bir araç işaretçisinin stilinin MarkerOptions nesnesi ile nasıl yapılandırılacağı gösterilmektedir. İşaretçi özelleştirme seçenekleri bölümünde listelenen seçeneklerden herhangi birini kullanarak bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.
Talep üzerine gezi örneği
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Planlanmış görevler örneği
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Verilere dayalı stil işaretçileri
Aşağıdaki örnekte, özelleştirme işlevleri kullanılarak bir araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. Yukarıdaki İşaretçi özelleştirme seçenekleri bölümünde listelenen seçeneklerden herhangi birini kullanarak işaretçilerin stilini verilere göre özelleştirmek için bu kalıbı uygulayın.
Talep üzerine gezi ö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, bir araç işaretçisine tıklama işlemenin nasıl ekleneceği gösterilmektedir. Yukarıda listelenen İşaretçi özelleştirme seçenekleri'nden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu kalıbı uygulayın.
Talep üzerine gezi ö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üneceğini filtreleme
setVisible kullanmanız gerekiyorsa yukarıdaki İşaretçi özelleştirme seçenekleri bölümünde listelenen seçeneklerden herhangi birini kullanarak işaretçileri filtrelemek için bu kalıbı uygulayın.
Talep üzerine gezi ö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);
}
};