İş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. Haritaya eklenen işaretçilerin görünümünü ve tarzını iki şekilde özelleştirebilirsiniz:

1. Türe göre stil işaretçileri: Aynı tür işaretçilerin stilini ayarlamak için bir MarkerOptions nesnesi 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ılavuzdaki MarkerOptions kullanarak işaretçilerin stilini değiştirme konusuna bakın.

2. Verilere dayalı stil işaretçileri: İşaretçilerin verilere göre stilini belirlemek için bir özelleştirme işlevi belirtin. Stili, yolculuk paylaşımından veya harici kaynaklardan gelen verilere göre ayarlayabilirsiniz:

   • Gezi paylaşımından elde edilen veriler: Gezi paylaşımı, işaretçinin temsil ettiği nesnenin türü (araç, başlangıç, ara nokta veya hedef) dahil olmak üzere işaretçi verilerini özelleştirme işlevine iletir. Daha sonra işaretçi stili, işaretçi öğesinin mevcut durumuna göre değişir. Örneğin, aracın yolculuğu tamamlayana kadar kalan ara nokta sayısı.

   • Dış kaynaklar: Gezi paylaşımı verilerini Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir ve işaretçiyi bu bilgilere göre de biçimlendirebilirsiniz.

   Örnekler için bu kılavuzun Özelleştirme işlevlerini kullanarak işaretçilerin stilini değiştirme bölümüne bakın.

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 FleetEngineTripLocationProviderOptions altındaki Google Haritalar JavaScript API'de aşağıdaki özelleştirme parametrelerini kullanır:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

MarkerOptions simgesini kullanarak işaretçilerin stilini değiştirme

Aşağıdaki örnekte, araç işaretçisi stilinin bir MarkerOptions nesnesi ile nasıl yapılandırılacağı gösterilmektedir. İşaretçi özelleştirme seçeneklerinde listelenen işaretçi özelleştirmelerinden herhangi birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.

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şlevleri kullanılarak araç işaretçisi stilinin nasıl yapılandırılacağı gösterilmektedir. İşaretçi özelleştirme seçenekleri bölümünde listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.

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çi özelleştirme seçenekleri bölümünde listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu kalıbı uygulayın.

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