İşaretçileri özelleştir

Bu dokümanda, haritadaki araç ve konum işaretçilerinin nasıl özelleştirileceği ele alınmaktadır. web tabanlı kargo takibi uygulamanızda kullanacağınız verileri kontrol edebilirsiniz.

JavaScript Tüketici SDK'sı ile iki veya daha alt gruplara yönelik haritaya eklenen işaretçi türleri:

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

Bunu iki şekilde yapabilirsiniz:

• En basit: Tüm işaretçilere uygulanacak bir MarkerOptions nesnesi belirtin aynı türdedir. Tüketici SDK'sı daha sonra stili iki durumlar: işaretçileri haritaya eklemeden önce ve verilerin ne zaman kullanıldığını tamamen değişti.
• Daha gelişmiş: Bir özelleştirme işlevi belirtin. Özelleştirme işlevleri işaretçilerin verilere dayalı olarak biçimlendirilmesine ve ek olarak, işaretçilerle etkileşimini (ör. tıklama işleme). Daha ayrıntılı belirtmek gerekirse, SDK, İşaretçi aracı veya hedefi temsil eder. Bu işlem, işaretçi stilinin Örneğin, işaretçi öğenin mevcut durumuna göre değiştirin; şunun için: örnek olarak, hedefe kalan planlanmış durak sayısı verilebilir. Siz hatta Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir ve bir işaretçi oluşturabilirsiniz.

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

Aşağıdaki örnekte, bir araç işaretçisinin stilinin MarkerOptions nesne algılandı. Bu örnekte, işaretçi opaklığı %50'ye ayarlanmaktadır.

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

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

Aşağıdaki örnekte, bir araç işaretçisinin stilinin araç için durağa ulaşmadan önce kalan durak sayısını görüntüleyin görevdir.

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şlemeyi herhangi bir işaretçiye aşağıdaki örnekte olduğu gibi ekleyebilirsiniz kullanabilirsiniz.

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 InfoWindow ile ilgili ek bilgileri görüntüleyebilirsiniz. araç veya konum işaretçisi. Aşağıdaki örnek, InfoWindow ve 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