Настроить маркеры

В этом документе описывается, как настроить маркеры транспортных средств и местоположений на карте, которую вы используете в своем веб-приложении для отслеживания поставок для потребителей.

С помощью JavaScript Consumer SDK вы можете настроить внешний вид двух типов маркеров, добавляемых на карту:

• Маркеры транспортных средств доставки : используйте deliveryVehicleMarkerCustomization
• Маркеры назначения : используйте destinationMarkerCustomization

Вы делаете это одним из двух способов:

• Самый простой : укажите объект MarkerOptions , который будет применяться ко всем маркерам одного типа. Затем Consumer SDK применяет стиль в двух ситуациях: перед добавлением маркеров на карту и при изменении данных, используемых для маркеров.
• Более продвинутый : укажите функцию настройки. Функции настройки позволяют стилизовать маркеры на основе данных, а также добавлять к маркерам интерактивность, например обработку щелчков. В частности, Consumer SDK передает в функцию настройки данные о типе объекта, который представляет маркер: транспортное средство или пункт назначения. Это позволяет изменить стиль маркера в зависимости от текущего состояния самого элемента маркера; например, количество запланированных остановок, оставшихся до пункта назначения. Вы даже можете объединить данные из источников за пределами Fleet Engine и стилизовать маркер на основе этой информации.

Простой пример: используйте MarkerOptions

В следующем примере показано, как настроить стиль маркера транспортного средства с помощью объекта MarkerOptions . В этом примере непрозрачность маркера устанавливается на 50%.

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Расширенный пример: используйте функцию настройки

В следующем примере показано, как настроить стиль маркера транспортного средства для отображения оставшегося количества остановок транспортного средства до достижения остановки для запланированной задачи.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Добавить обработку кликов к маркерам

Вы можете добавить обработку щелчков к любому маркеру, как в следующем примере для маркера транспортного средства.

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

Отображение дополнительной информации для маркеров

Вы можете использовать InfoWindow для отображения дополнительной информации о транспортном средстве или маркере местоположения. В следующем примере создается InfoWindow и прикрепляется к маркеру транспортного средства:

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

Что дальше

• Настройка полилиний

В этом документе описывается, как настроить маркеры транспортных средств и местоположений на карте, которую вы используете в своем веб-приложении для отслеживания поставок для потребителей.

С помощью JavaScript Consumer SDK вы можете настроить внешний вид двух типов маркеров, добавляемых на карту:

• Маркеры транспортных средств доставки : используйте deliveryVehicleMarkerCustomization
• Маркеры назначения : используйте destinationMarkerCustomization

Вы делаете это одним из двух способов:

• Самый простой : укажите объект MarkerOptions , который будет применяться ко всем маркерам одного типа. Затем Consumer SDK применяет стиль в двух ситуациях: перед добавлением маркеров на карту и при изменении данных, используемых для маркеров.
• Более продвинутый : укажите функцию настройки. Функции настройки позволяют стилизовать маркеры на основе данных, а также добавлять к маркерам интерактивность, например обработку кликов. В частности, Consumer SDK передает в функцию настройки данные о типе объекта, который представляет маркер: транспортное средство или пункт назначения. Это позволяет изменить стиль маркера в зависимости от текущего состояния самого элемента маркера; например, количество запланированных остановок, оставшихся до пункта назначения. Вы даже можете объединить данные из источников за пределами Fleet Engine и стилизовать маркер на основе этой информации.

Простой пример: используйте MarkerOptions

В следующем примере показано, как настроить стиль маркера транспортного средства с помощью объекта MarkerOptions . В этом примере непрозрачность маркера устанавливается на 50%.

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Расширенный пример: используйте функцию настройки

В следующем примере показано, как настроить стиль маркера транспортного средства для отображения оставшегося количества остановок транспортного средства до достижения остановки для запланированной задачи.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Добавить обработку кликов к маркерам

Вы можете добавить обработку щелчков к любому маркеру, как в следующем примере для маркера транспортного средства.

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

Отображение дополнительной информации для маркеров

Вы можете использовать InfoWindow для отображения дополнительной информации о транспортном средстве или маркере местоположения. В следующем примере создается InfoWindow и прикрепляется к маркеру транспортного средства:

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

Что дальше

• Настройка полилиний

В этом документе описывается, как настроить маркеры транспортных средств и местоположений на карте, которую вы используете в своем веб-приложении для отслеживания поставок для потребителей.

С помощью JavaScript Consumer SDK вы можете настроить внешний вид двух типов маркеров, добавляемых на карту:

• Маркеры транспортных средств доставки : используйте deliveryVehicleMarkerCustomization
• Маркеры назначения : используйте destinationMarkerCustomization

Вы делаете это одним из двух способов:

• Самый простой : укажите объект MarkerOptions , который будет применяться ко всем маркерам одного типа. Затем Consumer SDK применяет стиль в двух ситуациях: перед добавлением маркеров на карту и при изменении данных, используемых для маркеров.
• Более продвинутый : укажите функцию настройки. Функции настройки позволяют стилизовать маркеры на основе данных, а также добавлять к маркерам интерактивность, например обработку кликов. В частности, Consumer SDK передает в функцию настройки данные о типе объекта, который представляет маркер: транспортное средство или пункт назначения. Это позволяет изменить стиль маркера в зависимости от текущего состояния самого элемента маркера; например, количество запланированных остановок, оставшихся до пункта назначения. Вы даже можете объединить данные из источников за пределами Fleet Engine и стилизовать маркер на основе этой информации.

Простой пример: используйте MarkerOptions

В следующем примере показано, как настроить стиль маркера транспортного средства с помощью объекта MarkerOptions . В этом примере непрозрачность маркера устанавливается на 50%.

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Расширенный пример: используйте функцию настройки

В следующем примере показано, как настроить стиль маркера транспортного средства для отображения оставшегося количества остановок транспортного средства до достижения остановки для запланированной задачи.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Добавить обработку кликов к маркерам

Вы можете добавить обработку щелчков к любому маркеру, как в следующем примере для маркера транспортного средства.

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

Отображение дополнительной информации для маркеров

Вы можете использовать InfoWindow для отображения дополнительной информации о транспортном средстве или маркере местоположения. В следующем примере создается InfoWindow и прикрепляется к маркеру транспортного средства:

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

Что дальше

• Настройка полилиний