Haritaya eklenen işaretçilerin görünümünü ve tarzını özelleştirin. Görünümü özelleştirin haritaya iki şekilde eklenen işaretçileri ve hissini verir:
Türe göre stil işaretçileri: Belirttiğiniz türe göre
MarkerOptions
stil işaretçileri kullanır. Belirttiğiniz değişiklikler şunlardır: ardından uygulanır. Örnekler için bkz.MarkerOptions
kullanarak işaretçilerin stilini değiştirin rehberini inceleyin.Verileri temel alan stil işaretçileri: Aşağıdaki işlemler için bir özelleştirme işlevi belirtin: stil işaretçilerini kullanır. Yolculuğun verilerine göre stil belirleyebilirsiniz veya dış kaynaklardan paylaşma:
Yolculuk paylaşımından elde edilen veriler: Yolculuk paylaşımı, işaretçi verilerini özelleştirme işlevi, işaretçinin temsil ettiği nesnenin türünü içerir: başlangıç noktası, ara nokta veya hedef olabilir. İşaretçi stili daha sonra değişiyor mevcut durumuna göre değiştirin. Örneğin, araç yolculuğu tamamlayana kadar kalan ara noktaların sayısını gösterir.
Dış kaynaklar: Yolculuk paylaşımı verilerini Fleet Engine dışındaki kaynaklardan gelen verileri ve işaretçiyi buna göre biçimlendirin. yardımcı olur.
Örnekler için bkz. Özelleştirme işlevlerini kullanarak işaretçilerin stilini değiştirme inceleyebilirsiniz.
İşaretçilere tıklama işlemeyi ekleme: Örnekler için Tıklama işleme ekleme konusuna bakın.
İşaretçi özelleştirme seçenekleri
Her iki seçenek de Google Analytics 4'te aşağıdaki özelleştirme parametrelerini kullanır
Maps JavaScript API altında
FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
MarkerOptions
kullanarak işaretçilerin stilini değiştirin
Aşağıdaki örnekte, araç işaretçisi stilinin
MarkerOptions
nesnesini ifade eder. Herhangi bir öğenin stilini özelleştirmek için bu kalıbı
aşağıda listelenen işaretçi özelleştirmelerinden herhangi birini kullanan bir işaretleyici
İşaretçi özelleştirme seçenekleri.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Özelleştirme işlevlerini kullanarak işaretçilerin stilini değiştirme
Aşağıdaki örnekte, özelleştirme işlevlerinden yararlanabilirsiniz. İşaretçi özelleştirme seçenekleri bölümünde listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
İş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. İşaretçilerden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu kalıbı izleyin İşaretçi özelleştirme seçenekleri'nde listelenen özelleştirme parametrelerini.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};