İşaretçileri özelleştir

Bu dokümanda, tüketicilere yönelik web tabanlı gönderi takibi uygulamanız için kullandığınız haritada araç ve konum işaretçilerinin nasıl özelleştirileceği açıklanmaktadır.

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

• Teslimat aracı işaretçileri: deliveryVehicleMarkerCustomization simgesini kullanın.
• Hedef işaretçileri: destinationMarkerCustomization simgesini kullanın.

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: İşaretleri haritaya eklemeden önce ve işaretçiler için kullanılan veriler değiştiğinde.
• Daha gelişmiş: Bir özelleştirme işlevi belirtin. Özelleştirme işlevleri, işaretçilerin verilere göre biçimlendirilmesine ve işaretçilere tıklama işleme gibi etkileşimler eklenmesine olanak tanır. Daha açık belirtmek gerekirse Tüketici SDK'sı, 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 stilinin işaretçi öğesinin mevcut durumuna göre (ör. hedefe kalan planlanmış durak sayısı) değişmesine olanak tanınabilir. Fleet Engine dışındaki kaynaklardan gelen verilerle bile birleştirme yapabilir ve işaretçiyi bu bilgilere göre biçimlendirebilirsiniz.

Basit örnek: MarkerOptions kullanabilirsiniz.

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

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

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

Aşağıdaki örnekte, planlanmış görevin durağına ulaşmadan önce araç için kalan durak sayısını görüntülemek üzere araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir.

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

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

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

Tıklama işleme özelliğini herhangi bir işaretçiye ekleyebilirsiniz. Aşağıdaki araç işaretçisi örneğinde gösterildiği gibi.

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

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örüntülemek için InfoWindow kullanabilirsiniz. Aşağıdaki örnekte bir InfoWindow oluşturulup bir araç işaretçisine eklenmektedir:

// 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();

// 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?

• Çoklu çizgileri özelleştirme