İşaretçileri Özelleştir

JavaScript filo izleme kitaplığıyla, haritaya eklenen işaretlerin görünümünü ve tarzını özelleştirebilirsiniz. Bunu, işaretçi özelleştirmelerini belirterek yaparsınız. Filo izleme kitaplığı, işaretçileri haritaya eklemeden önce ve her işaretçi güncellemesinde bu özelleştirmeleri uygular. İşaretçilerin görünümünü ve tarzını şu şekillerde özelleştirebilirsiniz:

  1. Türüne göre işaretçileri stilize etme: Aynı türdeki işaretçileri stilize etmek için bir MarkerOptions nesnesi belirtin. Belirttiğiniz değişiklikler, her işaretçi oluşturulduktan sonra uygulanır ve varsayılan seçeneklerin üzerine yazılır. Örnekler için bu rehberdeki Türüne göre stil işaretçileri bölümüne bakın.

  2. Verilere göre işaretçileri stilize etme: Verilere dayalı bir özelleştirme işlevinin yanı sıra işaretçilere tıklama işleme gibi etkileşimler eklemeyi belirtin. Filo takibinden veya dış kaynaklardan alınan verilere göre stil oluşturabilirsiniz:

    • Filo takibinden alınan veriler: Filo 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örev türü.

    • Dış kaynaklar: Filo takibi verilerini Fleet Engine dışındaki kaynaklardan alınan verilerle birleştirebilir ve işaretçiyi bu bilgilere göre şekillendirebilirsiniz.

    Örnekler için Verilere göre stil işaretçileri başlıklı makaleyi inceleyin.

  3. İşaretçilere tıklama işleme ekleme: Örnekler için Tıklama işleme ekleme bölümüne bakın.

  4. Hangi işaretçilerin görünür olduğunu filtreleme: JavaScript konum sağlayıcısında bulunan filtreleme özellikleriyle hangi işaretçilerin görüneceğini filtreleyin. Örneğin:

  5. Planlanmış görevlerin teslimat aracını takip etmek için işaretçi özelleştirmeyi kullanma: Araçları takip etmek için işaretçileri özelleştirebilirsiniz. Daha fazla bilgi için Teslimat aracını izlemek için işaretçi özelleştirmeyi kullanma başlıklı makaleyi inceleyin.

İşaretçi özelleştirme seçenekleri

Filo izleme kitaplığı aşağıdaki özelleştirme parametrelerini sağlar:

Talep üzerine yolculuk özelleştirme parametreleri

Planlanmış görevleri özelleştirme parametreleri

İşaretçileri türe göre stilize etme

Aşağıdaki örnekte, MarkerOptions nesnesiyle araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. İşaretçi özelleştirme seçenekleri bölümünde listelenen seçeneklerden herhangi birini kullanarak işaretçilerin stilini özelleştirmek için bu kalıbı izleyin.

İsteğe bağlı geziler örneği

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Planlanmış görev örneği

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Verilere dayalı stil işaretçileri

Aşağıdaki örnekte, özelleştirme işlevlerini kullanarak bir araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. Yukarıda listelenen İşaretçi özelleştirme seçenekleri bölümündeki seçeneklerden herhangi birini kullanarak verileri temel alan işaretçilerin stilini özelleştirmek için bu kalıbı izleyin.

İ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örev ö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şleme özelliğinin nasıl ekleneceği gösterilmektedir. Yukarıda listelenen İşaretçi özelleştirme seçenekleri'nde yer alan seçeneklerden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme özelliği eklemek için bu kalıbı izleyin.

İ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örev ö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 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.

İ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örev ö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);
    }
  };

Sırada ne var?