İş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. İşaretçileri türe göre biçimlendirme: Aynı türdeki işaretçileri biçimlendirmek 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 MarkerOptions kullanarak işaretçilerin stilini değiştirme bölümüne bakın.

2. İşaretçileri verilere göre biçimlendirme: İşaretçileri verilere göre biçimlendirmek için bir özelleştirme işlevi belirtin. Yolculuk paylaşımından veya harici kaynaklardan gelen verilere göre stil oluşturabilirsiniz:

   • Gezi paylaşımından elde edilen veriler: Gezi paylaşımı, işaretçinin temsil ettiği nesne türü (araç, başlangıç noktası, ara nokta veya varış noktası) 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ılavuzdaki Ö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 FleetEngineTripLocationProviderOptions altındaki Google Maps JavaScript API'de aşağıdaki özelleştirme parametrelerini kullanır:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

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

Aşağıdaki örnekte, araç işaretçisi stilinin MarkerOptions nesnesiyle 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 işaretçilerin 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şlevlerini kullanarak 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 işaretçilerin 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, araç işaretçisine tıklama işleme özelliğinin 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