İşaretçileri özelleştir

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ü iki şekilde özelleştirebilirsiniz:

1. Türüne göre işaretçileri stilize etme: Aynı türdeki işaretçileri stilize etmek 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. Verilere göre işaretçileri stilize etme: İşaretçileri verilere göre stilize etmek için bir özelleştirme işlevi belirtin. Yolculuk paylaşımından veya dış kaynaklardan alınan verilere göre stil oluşturabilirsiniz:

   • Gezi paylaşımından alınan 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, araç yolculuğu tamamlayana kadar kalan ara nokta sayısı.

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

   Örnekler için bu kılavuzdaki Özelleştirme işlevlerini kullanarak işaretçilerin stilini değiştirme başlıklı makaleyi inceleyin.

3. İşaretçilere tıklama işleme ekleme: Örneğin, Tıklama işleme ekleme başlıklı makaleye bakın.

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

Her iki seçenekte de Google Maps JavaScript API'deki FleetEngineTripLocationProviderOptions altında aşağıdaki özelleştirme parametreleri kullanılır:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

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

Aşağıdaki örnekte, MarkerOptions nesnesiyle 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ştirmelerinden herhangi birini kullanarak işaretçilerin stilini özelleştirmek için bu kalıbı izleyin.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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. Marker ö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ı izleyin.

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

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ş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ı izleyin.

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Sırada ne var?

• Rota çoklu çizgilerini özelleştirme