İş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ü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 MarkerOptions kullanarak işaretçilerin stilini değiştirme bölümüne bakın.

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

   • Seyahat paylaşımından gelen veriler: Seyahat paylaşımı, işaretçinin temsil ettiği nesne türü (araç, başlangıç noktası, yol noktası veya hedef) dahil olmak üzere işaretçi verilerini özelleştirme işlevine iletir. İşaretçi stili, işaretçi öğesinin mevcut durumuna göre değişir. Örneğin, aracın seyahati tamamlamasına kalan yol noktası 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şleme ekleme: Örnekler için Tıklama işleme ekleme bölümüne bakın.

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

Her iki seçenek de Google Maps JavaScript API'deki FleetEngineTripLocationProviderOptions altında 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çenekleri bölümünde listelenen işaretçi özelleştirmelerinden herhangi birini kullanarak 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, bir araç işaretçisine tıklama işlemenin 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