İşaretçileri özelleştir

Bu belgede, tüketicilere yönelik web tabanlı kargo takibi uygulamanızda kullandığınız haritadaki araç ve konum işaretçilerinin nasıl özelleştirileceği açıklanmaktadır.

JavaScript Consumer SDK ile haritaya eklenen iki tür işaretçinin görünümünü özelleştirebilirsiniz:

Bu işlemi iki şekilde yapabilirsiniz:

  • En basit: Aynı türdeki tüm işaretçilere uygulanacak bir MarkerOptions nesnesi belirtin. Tüketici SDK'sı daha sonra 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 seviye: Bir özelleştirme işlevi belirtin. Özelleştirme işlevleri, işaretçilerin verilere göre stil oluşturulmasına ve işaretçilere tıklama işleme gibi etkileşim özelliklerinin eklenmesine olanak tanır. Daha net bir ifadeyle, Consumer SDK, işaretçinin temsil ettiği nesne türü (araç veya hedef) hakkında özelleştirme işlevine veri aktarır. Bu sayede işaretçi öğesinin mevcut durumuna göre işaretçi stili değiştirilebilir. Örneğin, hedefe ulaşmak için kalan planlanmış durak sayısı. Hatta Fleet Engine dışındaki kaynaklardan gelen verileri birleştirebilir ve işaretçiyi bu bilgilere göre şekillendirebilirsiniz.

Basit örnek: MarkerOptions kullanma

Aşağıdaki örnekte, MarkerOptions nesnesiyle araç işaretçisinin stilinin 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, planlanmış 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 bilgiler göstermek için InfoWindow kullanabilirsiniz. Aşağıdaki örnekte bir InfoWindow oluşturulup bir araç işaretçisine ekleniyor:

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?