İş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 izleme uygulamanızda kullandığınız bir üründür.

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.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

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

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

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

Tıklama işlemeyi herhangi bir işaretçiye aşağıdaki örnekte olduğu gibi ekleyebilirsiniz kullanabilirsiniz.

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ö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:

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?

• Çoklu çizgileri özelleştirme