Tạo kiểu cho bản đồ

Tài liệu này đề cập đến cách tuỳ chỉnh giao diện của bản đồ và chức năng điều khiển các tuỳ chọn chế độ xem và chế độ hiển thị dữ liệu. Bạn có thể thực hiện việc này theo các cách sau:

  • Sử dụng kiểu bản đồ dựa trên đám mây
  • Thiết lập các tuỳ chọn kiểu bản đồ ngay trong mã của riêng bạn

Định kiểu bản đồ bằng kiểu bản đồ dựa trên đám mây

Tuỳ chỉnh giao diện của thành phần bản đồ bằng cách định kiểu bản đồ dựa trên đám mây. Bạn có thể tạo và chỉnh sửa kiểu bản đồ trên Google Cloud Console cho mọi ứng dụng sử dụng Google Maps mà không cần thay đổi mã. Để biết thêm thông tin, hãy xem Định kiểu bản đồ trên đám mây.

Cả lớp ConsumerMapView và lớp ConsumerMapFragment đều hỗ trợ định kiểu bản đồ dựa trên đám mây. Để sử dụng việc định kiểu bản đồ dựa trên đám mây, hãy đảm bảo rằng các bản đồ đã chọn trình kết xuất là LATEST. Các phần sau đây trình bày ví dụ về cách sử dụng định kiểu bản đồ dựa trên đám mây bằng dự án của bạn.

ConsumerMapView

Để sử dụng kiểu bản đồ dựa trên đám mây trong ConsumerMapView, hãy đặt trường mapId trên GoogleMapOptions và truyền GoogleMapOptions đến getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) hoặc getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Ví dụ:

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Có hai cách để sử dụng kiểu bản đồ dựa trên đám mây trong ConsumerMapFragments:

  • Tĩnh với XML.
  • Linh động bằng newInstance.

Tĩnh với XML

Để sử dụng kiểu bản đồ dựa trên đám mây bằng XML trong ConsumerMapFragment, hãy thêm thuộc tính XML map:mapId với mapId được chỉ định. Hãy xem ví dụ sau:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Linh hoạt nhờ newInstance

Để sử dụng định kiểu bản đồ dựa trên đám mây bằng newInstance trong ConsumerMapFragment, đặt trường mapId trên GoogleMapOptions và truyền GoogleMapOptions thành newInstance. Hãy xem ví dụ sau:

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

Để áp dụng kiểu bản đồ cho bản đồ chia sẻ hành trình của người tiêu dùng bằng JavaScript, hãy chỉ định một mapId và mọi mapOptions khác khi bạn tạo JourneySharingMapView.

Các ví dụ sau đây cho biết cách áp dụng kiểu bản đồ bằng mã bản đồ.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Tạo kiểu cho bản đồ ngay trong mã của bạn

Bạn cũng có thể tuỳ chỉnh kiểu bản đồ bằng cách thiết lập các tuỳ chọn bản đồ khi tạo JourneySharingMapView. Các ví dụ sau đây cho biết cách tạo kiểu cho bản đồ bằng các tuỳ chọn bản đồ. Để biết thêm thông tin về những tùy chọn bản đồ mà bạn có thể đặt, hãy xem mapOptions trong tài liệu tham khảo API JavaScript của Google Maps.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Kiểm soát chế độ hiển thị dữ liệu tác vụ cho SDK

Bạn có thể kiểm soát chế độ hiển thị của một số đối tượng nhiệm vụ nhất định trên bản đồ bằng cách sử dụng các quy tắc hiển thị.

Chế độ hiển thị mặc định của dữ liệu công việc

Theo mặc định, dữ liệu của các nhiệm vụ được giao cho xe sẽ hiển thị khi xe cách nhiệm vụ 5 điểm dừng. Chế độ hiển thị sẽ kết thúc khi tác vụ hoàn tất hoặc bị huỷ.

Bảng này cho thấy chế độ hiển thị mặc định cho từng loại tác vụ. Bạn có thể tuỳ chỉnh chế độ hiển thị cho nhiều tác vụ, nhưng không phải tất cả. Để biết thêm thông tin về nhiệm vụ loại việc cần làm, hãy xem mục Loại việc cần làm trong hướng dẫn về Việc cần làm đã lên lịch.

Loại việc cần làm Chế độ hiển thị mặc định Có thể tuỳ chỉnh không? Mô tả
Tác vụ về tình trạng không có sẵn Không hiển thị Không Dùng khi lái xe nghỉ giải lao và tiếp nhiên liệu. Nếu một tuyến đường đến một nhiệm vụ giao hàng cũng chứa một điểm dừng xe khác, thì điểm dừng đó sẽ không xuất hiện nếu chỉ chứa các nhiệm vụ không có hàng. Thời gian đến dự kiến và thời gian hoàn thành tác vụ dự kiến vẫn hiển thị cho chính tác vụ phân phối.
Mở việc cần làm liên quan đến xe Hiển thị Chế độ hiển thị sẽ kết thúc khi việc cần làm hoàn thành hoặc bị huỷ. Bạn có thể tuỳ chỉnh chế độ hiển thị của các nhiệm vụ đang mở trên xe. Xem Tuỳ chỉnh chế độ hiển thị của quảng cáo đang mở nhiệm vụ trên xe.
Các tác vụ đã đóng liên quan đến xe Không hiển thị Không Bạn không thể tuỳ chỉnh chế độ hiển thị của các nhiệm vụ trên xe đã đóng.

Tuỳ chỉnh chế độ hiển thị của các nhiệm vụ đang mở trên xe

Giao diện TaskTrackingInfo cung cấp một số phần tử dữ liệu tác vụ có thể hiển thị bằng SDK dành cho người dùng.

Các phần tử dữ liệu công việc có thể tuỳ chỉnh

Hình nhiều đường

Thời gian đến dự kiến

Thời gian hoàn thành việc cần làm ước tính

Quãng đường lái xe còn lại đến nhiệm vụ

Số điểm dừng còn lại

Vị trí xe

Tuỳ chọn hiển thị cho mỗi việc cần làm

Bạn có thể tuỳ chỉnh cấu hình chế độ hiển thị theo từng tác vụ bằng cách cài đặt TaskTrackingViewConfig khi tạo hoặc cập nhật một công việc trong Fleet Engine. Sử dụng các tuỳ chọn chế độ hiển thị sau đây để tạo tiêu chí xác định chế độ hiển thị của một phần tử công việc:

Tuỳ chọn hiển thị

Số lượng trạm dừng còn lại

Thời gian cho đến thời gian đến ước tính

Quãng đường lái xe còn lại

Luôn hiển thị

Không bao giờ hiển thị

Để minh hoạ, giả sử một ví dụ về tuỳ chỉnh điều chỉnh chế độ hiển thị cho ba phần tử dữ liệu bằng cách sử dụng các tiêu chí trong bảng sau. Tất cả giá trị khác tuân theo các quy tắc hiển thị mặc định.

Phần tử dữ liệu cần điều chỉnh Chế độ hiển thị Tiêu chí
Hình nhiều đường của tuyến đường Chương trình Xe cách 3 trạm dừng.
ETA Chương trình Quãng đường còn lại ngắn hơn 5.000 mét.
Số lượng trạm dừng còn lại Không bao giờ hiển thị Xe cách 3 trạm dừng.

Ví dụ sau đây minh hoạ cấu hình này:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Quy tắc về chế độ hiển thị hình nhiều đường và vị trí của xe

Bạn không thể thấy đường đa tuyến của tuyến đường trừ phi vị trí của xe cũng hiển thị; nếu không, bạn có thể suy ra vị trí của xe bằng điểm cuối của đường đa tuyến.

Những nguyên tắc này giúp bạn cung cấp một tổ hợp hợp lệ cho các tuỳ chọn hiển thị vị trí xe và đường đa tuyến.

Các chế độ hiển thị giống nhau Tiêu chí mức độ hiển thị Hướng dẫn
Các tuỳ chọn hình nhiều đường tuyến đường được đặt thành luôn hiển thị. Đặt vị trí của xe ở chế độ luôn hiển thị.
Thông tin vị trí của xe được đặt thành không bao giờ hiển thị. Đặt đường đa tuyến của tuyến đường thành không bao giờ hiển thị.
Chế độ hiển thị là bất kỳ lựa chọn nào sau đây:
  • số điểm dừng còn lại
  • thời lượng cho đến ETA
  • quãng đường lái xe còn lại

Đặt các tuỳ chọn đường đa tuyến của tuyến đường thành một giá trị nhỏ hơn hoặc bằng giá trị được đặt cho vị trí của xe. Ví dụ:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    
Các chế độ hiển thị Tiêu chí về khả năng hiển thị Hướng dẫn
Người xem có thể nhìn thấy vị trí của xe

Điều này chỉ xảy ra khi cả vị trí của xe và đã đáp ứng các tuỳ chọn hiển thị hình nhiều đường. Ví dụ:

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

Trong ví dụ này, vị trí của xe chỉ hiển thị nếu số lượng điểm dừng còn lại ít nhất là 3 quãng đường lái xe còn lại ít nhất là 3.000 mét.

Tắt tính năng điều chỉnh tự động

Bạn có thể ngăn bản đồ tự động điều chỉnh khung nhìn vừa với xe và tuyến đường dự kiến bằng cách tắt tính năng điều chỉnh tự động. Ví dụ sau đây cho biết cách tắt tính năng tự động điều chỉnh khi bạn thiết lập chế độ chia sẻ hành trình chế độ xem bản đồ.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Các bước tiếp theo