Rota çoklu çizgilerini özelleştirin

Bu dokümanda, izlenen rotalar için rotaların görünüm ve tarzının nasıl özelleştirileceği ele alınmaktadır. görebilirsiniz. Rotalar, harita üzerinde çoklu çizgilerle çizilir. Her bir bir aracın etkin veya kalan yolunun koordinatlarını google.maps.Polyline nesnesini tıklayın. Çoklu çizgi özelleştirmeleri belirterek Polyline nesnelerini biçimlendirebilirsiniz: daha sonra kitaplık iki durumda uygulanır:

• Nesneleri haritaya eklemeden önce
• Nesneler için kullanılan veriler değiştiğinde

Çoklu çizgilerin stilini ayarlama

İşaretçileri özelleştirirken yaptığınız gibi rota çoklu çizgilerini de çeşitli yöntemler vardır:

1. Rota çoklu çizgilerini türe göre biçimlendirme: PolylineOptions öğesini, eşleşen tüm Polyline nesnelere oluşturabilir veya güncelleyebilir. Örnek için Çoklu çizgileri türe göre biçimlendirme bölümüne göz atın.

2. Verilere dayalı olarak rota çoklu çizgilerinin stilini belirleme: Bir özelleştirme işlevi belirtin filo izleme veya dış kaynaklardan gelen verilere göre:

   • Filo izleme verileri: Filo izleme, çoklu çizgi verilerini özelleştirme işlevi (mevcut araçtaki veriler dahil) durumu. Bu verilere dayanarak çoklu çizgileri, renklendirme de dahil olmak üzere biçimlendirebilirsiniz Polyline nesneye daha koyu bir renk uygulanır veya Araç daha yavaş hareket ediyor.

   • Dış kaynaklar: Filo izleme verilerini ve Polyline nesnesini buna göre biçimlendirin ekleyebilirsiniz.

   Örnek için Verilere dayalı çoklu çizgileri biçimlendirme bölümüne bakın.

3. Rota çoklu çizgilerinin görünürlüğünü kontrol etme: Çoklu çizgileri gizleyebilir veya gösterebilirsiniz. çoklu çizgiler için visible özelliğini kullanabilirsiniz. Ayrıntılar için bkz. Bu kılavuzdaki çoklu çizgilerin görünürlüğünü kontrol edin.

4. Bir araç veya konum işaretçisiyle ilgili ek bilgileri görüntüleme: infowindow özelliğini kullanarak daha fazla bilgi gösterebilirsiniz. Örneğin, için bkz. Bir araç veya konum işaretçisiyle ilgili ek bilgileri göster: inceleyebilirsiniz.

Çoklu çizgi özelleştirme seçenekleri

Aşağıdaki özelleştirme seçenekleri her iki sürümde de kullanılabilir: FleetEngineVehicleLocationProviderOptions ve FleetEngineDeliveryVehicleLocationProviderOptions. Aracın farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. yolculuk:

• Gitmiş olduğunuz yol: takenPolylineCustomization - kullanın İsteğe bağlı geziler, Planlanmış görevler referansları.

• Etkin gidilen yol: activePolylineCustomization - kullanın İsteğe bağlı geziler, Planlanmış görevler referansları.

• Henüz gidilmemiş yol: remainingPolylineCustomization - kullanın İsteğe bağlı geziler, Planlanmış görevler referansları.

Rota çoklu çizgilerinin stilini türe göre belirleyin

Rota çoklu çizgilerini türe göre biçimlendirmek için Polyline nesnelerin stilini değiştirin PolylineOptions kullanılıyor.

Aşağıdaki örnekte, bir Polyline nesnesi için stilin nasıl yapılandırılacağı gösterilmektedir PolylineOptions ile. Herhangi bir dosyanın stilini özelleştirmek için bu kalıbı Şu konumlarda listelenen rota çoklu çizgi özelleştirmelerinden herhangi birini kullanan Polyline nesnesi: Bu kılavuzdaki Çoklu çizgi özelleştirme seçenekleri.

İsteğe bağlı geziler veya planlanmış görevler için örnek

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Verileri kullanarak rota çoklu çizgilerinin stilini belirleme

Verileri kullanarak rota çoklu çizgilerini biçimlendirmek için Polyline nesnelerin stilini değiştirin nasıl kullanacağınızı göstereceğim.

Aşağıdaki örnekte, etkin bir rota için stilin nasıl yapılandırılacağı gösterilmektedir kullanarak RACI matrisi gibi görünebilir. Stilini özelleştirmek için bu kalıbı izleyin Listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanan herhangi bir Polyline nesnesi Çoklu çizgi özelleştirme seçenekleri bölümüne göz atın.

İsteğe bağlı geziler örneği

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Planlanmış görevler örneği

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Trafiğe duyarlı stil örneği (yalnızca isteğe bağlı geziler)

Fleet Engine, Search Ads 360'ın etkin ve kalan yolları için takip edilen araç. Bu bilgileri kullanarak Polyline stilini belirleyebilirsiniz nesnelere göre çalışır:

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Çoklu çizgilerin görünürlüğünü kontrol edin

Varsayılan olarak tüm Polyline nesneleri görünür. Polyline nesnesi oluşturmak için görünmezse visible özelliğini false olarak ayarlayın.

İsteğe bağlı geziler veya planlanmış görevler için örnek

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Bir araç veya konum işaretçisi için bilgi penceresi görüntüleyin

Bir InfoWindow ile ilgili ek bilgileri görüntüleyebilirsiniz. araç veya konum işaretçisi.

Aşağıdaki örnekte, InfoWindow oluşturma ve bunu bir araç işaretçisi.

İsteğe bağlı geziler örneği

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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();

Planlanmış görevler örneği

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

• Haritanın stilini ayarlama
• İşaretleri özelleştirme