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. Kitaplık, bir aracın etkin veya kalan yolunda bulunan her koordinat çifti için bir google.maps.Polyline nesnesi oluşturur. Ç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 farklı şekillerde kullanabilirsiniz:

  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. Rota poli çizgilerini verilere göre biçimlendirme: Filo takibi veya harici kaynaklardan gelen verilere dayalı bir özelleştirme işlevi belirtin:

    • 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: visible mülkünü kullanarak çoklu çizgileri gizleyebilir veya gösterebilirsiniz. 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çisi için ek bilgi görüntüleme: infowindow mülkünü kullanarak ek bilgiler 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:

Rota poli çizgilerini türe göre biçimlendirme

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 öğenin 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

JavaScript

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

TypeScript

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, özelleştirme işlevi kullanılarak etkin bir rotanın stilinin nasıl yapılandırılacağı gösterilmektedir. Bu kılavuzun Çoklu çizgi özelleştirme seçenekleri bölümünde listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

Talep üzerine gezi örneği

JavaScript

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

TypeScript

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

JavaScript

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

TypeScript

// 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ç. Polyline stilini biçimlendirmek için bu bilgileri kullanabilirsiniz yardımcı olan araçlardır:

JavaScript

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

TypeScript

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

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

JavaScript

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

TypeScript

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

JavaScript

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

TypeScript

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