İşaretçileri Özelleştir

JavaScript filo izleme kitaplığıyla görünümünü ve tarzını özelleştirebilirsiniz. haritaya eklendi. Bunu işaretçi özelleştirmeleri belirterek, Daha sonra, filo izleme kitaplığının haritaya işaretçi eklemeden önce uyguladığı ve her işaretçi güncellemesiyle birlikte. İşaretçilerinizin görünümünü ve tarzını aşağıdaki yöntemlerle özelleştirebilirsiniz:

  1. Türe göre stil işaretçileri: Aynı türdeki stil işaretçilerini biçimlendirmek için bir MarkerOptions objesi 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ılavuzun Türe dayalı stil işaretçileri bölümüne bakın.

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

    • Araç takibi verilerinden: Araç 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 daha sonra değişiyor mevcut durumuna göre değiştirin. Örneğin, kalan durak sayısı veya görevin türü.

    • Dış kaynaklar: Filo izleme verilerini Fleet Engine dışındaki kaynakları kullanır ve işaretçiyi buna göre biçimlendirirsiniz. yardımcı olur.

    Örnekler için Verilere dayalı stil işaretçileri bölümüne bakın.

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

  4. Görünür olacak işaretçileri filtrele: Gösterilecek işaretçileri filtreleyin JavaScript konumunda bulunan filtreleme özellikleriyle birlikte sağlar. Örneğin:

  5. Planlanmış bir görev teslim aracını izlemek için işaretçi özelleştirmeyi kullanma: İşaretçileri, araçları takip edecek şekilde özelleştirebilirsiniz. Daha fazla bilgi için Teslim aracını izlemek için işaretçi özelleştirmesini 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ı gezileri özelleştirme parametreleri

Planlanmış görevleri özelleştirme parametreleri

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

Aşağıdaki örnekte, bir araç işaretçisinin stilinin MarkerOptions nesnesini ifade eder. Herhangi bir dosyanın stilini özelleştirmek için bu kalıbı yukarıda listelenen seçeneklerden herhangi birini kullanarak İşaretçi özelleştirme seçenekleri.

İsteğe bağlı geziler ö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, bir araç işaretçisinin stilinin özelleştirme işlevlerinden yararlanabilirsiniz. Herhangi bir dosyanın stilini özelleştirmek için bu kalıbı listelenen seçeneklerden herhangi birini kullanarak verilere dayalı Yukarıda listelenen işaretçi özelleştirme seçenekleri.

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'nde belirtilen seçeneklerden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu kalıbı uygulayın.

Talep üzerine gezi ö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ünür olduğunu filtreleyin

setVisible kullanmanız gerekiyorsa işaretçileri filtrelemek için bu kalıbı izleyin kullanarak yukarıdaki İşaretçi özelleştirme seçenekleri bölümünde listelenen seçeneklerden birini kullanabilirsiniz.

Talep üzerine gezi ö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);
    }
  };

Sırada ne var?