İş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çilerin görünümünü ve tarzını özelleştirebilirsiniz. şu yöntemleri kullanabilirsiniz:

  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, her işaretçi oluşturulduktan sonra uygulanır. Örneğin, örnekler için Türe göre stil işaretçileri bölümüne bakın inceleyebilirsiniz.

  2. Verileri temel alan stil işaretçileri: Şuna göre bir özelleştirme işlevi belirtin: göstermenin yanı sıra tıklama işleme gibi işaretçilere etkileşim olanağı eklemektir. Filo izleme veya dış kaynaklardan gelen verilere göre stil belirleyebilirsiniz:

    • Filo izleme verileri: Filo İzleme, verileri işaretçinin nesnesinin türünü içeren özelleştirme işlevi temsil eder: araç, durak veya görev. İşaretçi stili daha sonra değişiyor mevcut durumuna göre değiştirin. Örneğin, ya da görev türüne göre değişebilir.

    • 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şlemeyi ekleme: Örnekler için Tıklama işleme ekleyin.

  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:

    ziyaret edin.
  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 bir teslimat aracını takip etmek için işaretçi özelleştirme.

İş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'
};

Stil işaretçileri verilere göre belirlenir

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.

İ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ö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, tıklama işlemenin bir araç işaretçisine nasıl ekleneceği gösterilmektedir. Aşağıdakilerden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu modeli izleyin: İşaretçi özelleştirme seçenekleri'nde listelenen seçenekleri işaretleyin.

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

İ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ö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?