İşaretçileri özelleştir

Platform seçin: Android iOS JavaScript

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:

1. 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.

2. 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.

3. İş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 nesnesidir. Herhangi bir dosyanın 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. Herhangi bir dosyanın stilini özelleştirmek için bu kalıbı aşağıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak bir işaretçi İşaretçi özelleştirme seçenekleri.

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.
      });
    }
  };

Sırada ne var?

• Rota çoklu çizgilerini özelleştirme