İş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 tür işaretçinin görünümünü ve tarzını özelleştirebilirsiniz:

• Teslimat aracı işaretçileri: deliveryVehicleMarkerCustomization simgesini kullanın.
• Hedef işaretçileri: destinationMarkerCustomization etiketini 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çimlendirilmesinin yanı sıra tıklama işleme gibi işaretçilere etkileşim eklenmesine olanak tanır. Tüketici SDK'sı spesifik olarak, işaretçinin temsil ettiği nesne türüyle (araç veya hedef) ilgili verileri özelleştirme işlevine iletir. Bu daha sonra, işaretçi stilinin, işaretçi öğesinin mevcut durumuna (örneğin, hedefe kadar kalan planlanan durak sayısı) bağlı olarak değişmesine olanak tanır. Fleet Engine dışındaki kaynaklardan gelen verilerle bile birleştirme yapabilir ve işaretçiyi bu bilgilere göre biçimlendirebilirsiniz.

Basit örnek: MarkerOptions özelliğini kullanın

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, planlanan görev için durağa ulaşmadan önce araç için kalan durak sayısını görüntülemek amacıyla bir 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öster

Bir araç veya konum işaretçisiyle ilgili ek bilgileri görüntülemek için InfoWindow kullanabilirsiniz. Aşağıdaki örnek bir InfoWindow oluşturur ve bunu bir araç işaretçisine ekler:

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