İşaretçileri Özelleştir

JavaScript filo izleme kitaplığıyla, haritaya eklenen işaretçilerin görünümü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üre göre stil işaretçileri: 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 kılavuzdaki Stil işaretçileri türe göre 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 ekleyin. Filo takibinden veya harici 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ü.

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

    Örnekler için Verilere göre işaretçileri stilize etme 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:

İsteğe bağlı seyahat özelleştirme parametreleri

Planlanmış görevleri özelleştirme parametreleri

Türe göre stil işaretçileri

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şlevleri kullanılarak bir araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. Yukarıda İşaretçi özelleştirme seçenekleri bölümünde listelenen 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 İşaretçi özelleştirme seçenekleri bölümünde listelenen 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?