İşaretçileri özelleştir

Bu belgede, tüketicilere yönelik web tabanlı gönderi takip uygulamanız için kullandığınız haritada araç ve konum işaretçilerini nasıl özelleştireceğiniz açıklanmaktadır.

JavaScript Tüketici SDK'sı ile haritaya eklenen iki tür işaretçinin görünümünü özelleştirebilirsiniz:

Bunu iki şekilde yapabilirsiniz:

  • En basit: Aynı türdeki tüm işaretçilere uygulanacak bir MarkerOptions nesnesi belirtin. Tüketici SDK'sı, stili iki durumda uygular: işaretçileri haritaya eklemeden önce ve işaretçiler için kullanılan veriler değiştiğinde.
  • Daha ileri düzey: Bir özelleştirme işlevi belirtin. Özelleştirme işlevleri, işaretçilerin verilere göre stillendirilmesine ve işaretçilere tıklama işleme gibi etkileşim özellikleri eklenmesine olanak tanır. Özellikle Tüketici SDK'sı, özelleştirme işlevine işaretçinin temsil ettiği nesne türü (araç veya hedef) hakkında veri iletir. Bu sayede işaretçi stilini, işaretçi öğesinin mevcut durumuna göre (ör. varış noktasına kadar kalan planlı durak sayısı) değiştirebilirsiniz. Hatta Fleet Engine dışındaki kaynaklardan gelen verileri birleştirebilir ve işaretçiyi bu bilgilere göre biçimlendirebilirsiniz.

Basit örnek: MarkerOptions kullanın

Aşağıdaki örnekte, bir araç işaretçisinin stilinin MarkerOptions nesnesiyle nasıl yapılandırılacağı gösterilmektedir. Bu örnekte, işaretçi opaklığı %50 olarak ayarlanmıştır.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Gelişmiş örnek: Özelleştirme işlevi kullanma

Aşağıdaki örnekte, planlanan görev için durağa ulaşmadan önce aracın kalan durak sayısını gösterecek şekilde araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

İşaretçilere tıklama işleme ekleme

Aşağıdaki araç işaretçisi örneğinde olduğu gibi, herhangi bir işaretçiye tıklama işleme ekleyebilirsiniz.

JavaScript

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

TypeScript

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

İşaretçilerle ilgili ek bilgileri görüntüleme

Bir araç veya konum işaretçisi hakkında ek bilgi göstermek için InfoWindow kullanabilirsiniz. Aşağıdaki örnekte bir InfoWindow oluşturulmakta ve bu bilgi penceresi bir araç işaretçisine eklenmektedir:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Sırada ne var?