İş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üre göre stil işaretçileri: 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 elde edilen veriler: Gezi paylaşımı, işaretin temsil ettiği nesne türü (araç, başlangıç noktası, ara nokta veya varış noktası) dahil olmak üzere işaret verilerini özelleştirme işlevine aktarır. İşaretçi stili, işaretçi öğesinin mevcut durumuna göre değişir. Örneğin, araç yolculuğu tamamlayana kadar kalan yol noktalarının sayısı.

   • Dış kaynaklar: Seyahat paylaşımı verilerini Fleet Engine dışındaki kaynaklardan alınan 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 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çenekte de Google Haritalar JavaScript API'sinde 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. İş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ı 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'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