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çilerin görünümünü ve tarzını aşağıdaki şekillerde özelleştirebilirsiniz:
Türe göre stil işaretçileri: Aynı tür işaretçilerin stilini ayarlamak için bir
MarkerOptionsnesnesi 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ılavuzdaki Türe göre stil işaretçileri konusuna 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:
Filo izlemeden elde edilen veriler: Filo İzleme, işaretçinin temsil ettiği nesne türü (araç, durak veya görev) dahil olmak üzere verileri özelleştirme işlevine iletir. Daha sonra işaretçi stili, işaretçi öğesinin mevcut durumuna göre değişir. Örneğin, kalan durak sayısı veya görev 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 olacak işaretçileri filtreleyin: JavaScript konum sağlayıcısında bulunan filtreleme özellikleriyle hangi işaretçilerin gösterileceğ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 Bir teslimat aracını takip etmek için işaretçi özelleştirmeyi kullanma bölümüne bakın.
İş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örev özelleştirme parametreleri
Türe göre stil işaretçileri
Aşağıdaki örnekte, bir araç işaretçisinin stilinin MarkerOptions nesnesiyle 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 içinde listelenen seçeneklerden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu kalıbı uygulayın.
İ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üneceğini filtreleme
setVisible öğesini kullanmanız gerekirse yukarıdaki İşaretçi özelleştirme seçenekleri'nde listelenen seçeneklerden herhangi birini kullanarak işaretçileri filtrelemek için bu kalıbı uygulayın.
İ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);
}
};