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

Chọn nền tảng: Android iOS JavaScript

Hướng dẫn này mô tả những cách bạn có thể định kiểu cho bản đồ hiển thị trong ứng dụng iOS khi theo dõi một chuyến đi.

Trước khi bắt đầu

Trước khi định kiểu cho bản đồ, bạn cần có một ứng dụng dành cho người tiêu dùng đã triển khai những nội dung sau:

Chế độ xem bản đồ. Xem phần Khởi chạy chế độ xem bản đồ.
Cách xử lý các sự kiện của chế độ xem bản đồ. Xem phần Xử lý các sự kiện của chế độ xem bản đồ

Bạn cũng cần thiết lập các dịch vụ phụ trợ mà SDK dành cho người tiêu dùng cần và thiết lập SDK dành cho người tiêu dùng. Để biết thông tin chi tiết, hãy xem phần Thiết lập SDK dành cho người tiêu dùng và Fleet Engine là gì?.

Tuỳ chỉnh bản đồ

Bạn có thể tuỳ chỉnh như sau:

Định kiểu cho bản đồ: Bạn có thể định kiểu cho màu sắc bản đồ, đường nhiều đoạn thẳng và các tính năng khác của bản đồ bằng cách định kiểu bản đồ dựa trên đám mây. Xem phần Định kiểu cho bản đồ.
Điều chỉnh mức thu phóng của camera: Bạn có thể sử dụng tính năng tích hợp sẵn hoặc đặt các lựa chọn của riêng mình cho camera để tập trung vào một hành trình. Xem phần Điều chỉnh mức thu phóng của camera để tập trung vào một chuyến đi.
Tuỳ chỉnh điểm đánh dấu và đường nhiều đoạn thẳng: Bạn có thể thêm điểm đánh dấu tuỳ chỉnh và đường nhiều đoạn thẳng của tuyến đường vào thiết kế ứng dụng. Các phần tử thiết kế này cho phép ứng dụng dành cho người tiêu dùng hiển thị bản xem trước động về tuyến đường của xe. Xem Tuỳ chỉnh điểm đánh dấu và Tuỳ chỉnh đường nhiều đoạn thẳng.

SDK cung cấp các lựa chọn này thông qua thuộc tính consumerMapStyleCoordinator. Thuộc tính này có sẵn thông qua lớp GMTCMapView.

Định kiểu cho bản đồ bằng cách định 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 bảng điều khiển Cloud cho bất kỳ ứng dụng nào sử dụng Google Maps mà không cần thay đổi mã. Để biết thêm thông tin, hãy chọn nền tảng của bạn tại phần Định kiểu bản đồ dựa trên đám mây.

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

`ConsumerMapView`

Để sử dụng tính năng định 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 để 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ó 2 cách để sử dụng tính năng định kiểu bản đồ dựa trên đám mây trong ConsumerMapFragments:

Tĩnh với XML.
Động với newInstance.

Tĩnh với XML

Để sử dụng tính năng định kiểu bản đồ dựa trên đám mây với XML trong ConsumerMapFragment, hãy thêm thuộc tính XML map:mapId với mapId đã 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"/>

Động với `newInstance`

Để sử dụng tính năng định kiểu bản đồ dựa trên đám mây với newInstance trong ConsumerMapFragment, hãy đặt trường mapId trên GoogleMapOptions và truyền GoogleMapOptions đến 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
  }
}

Điều chỉnh mức thu phóng của camera để tập trung vào một chuyến đi

Trong phiên chia sẻ chuyến đi đang hoạt động, người dùng sẽ thấy hữu ích khi xem chế độ xem lớn hơn về xe trong hành trình thay vì góc nhìn cận cảnh về xe trên một tuyến đường. Để thực hiện việc này, bạn có thể điều chỉnh mức thu phóng của camera bằng cách sử dụng AutoCamera tích hợp sẵn hoặc tự tuỳ chỉnh hành vi của camera như sau:

AutoCamera: Nếu muốn sử dụng AutoCamera, bạn không cần làm gì cả. Camera sẽ theo dõi chuyến đi theo mặc định.
Tuỳ chỉnh hành vi của camera: Để tuỳ chỉnh hành vi của camera, bạn phải tắt AutoCamera sau đó thực hiện các tuỳ chỉnh.

`AutoCamera` căn giữa camera theo mặc định

SDK dành cho người tiêu dùng cung cấp tính năng AutoCamera được bật theo mặc định trên nút Vị trí của tôi tích hợp sẵn cho Maps SDK. Camera sẽ thu phóng để tập trung vào tuyến đường của chuyến đi và điểm tham chiếu tiếp theo của chuyến đi.

Nếu muốn sử dụng AutoCamera, hãy đảm bảo rằng tính năng này đã được bật. Để biết thêm thông tin chi tiết, hãy xem allowCameraAutoUpdate.

`AutoCamera`

Để biết thông tin chi tiết về nút Vị trí của tôi cho Maps SDK, hãy xem Nút Vị trí của tôi trong tài liệu về Maps SDK cho iOS.

Tuỳ chỉnh hành vi của camera

Để kiểm soát hành vi của camera nhiều hơn, bạn có thể tắt AutoCamera và tuỳ chỉnh hành vi của camera.

Tắt hoặc bật AutoCamera bằng thuộc tính AllowCameraAutoUpdate.

Để biết thêm thông tin về cách tuỳ chỉnh camera, hãy xem Di chuyển camera trong tài liệu về Maps SDK cho iOS.

Bước tiếp theo

Theo dõi một chuyến đi trong iOS

Tạo kiểu cho bản đồ Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Trước khi bắt đầu

Tuỳ chỉnh bản đồ

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

ConsumerMapView

Ví dụ:

Java

Kotlin

ConsumerMapFragment

Tĩnh với XML

Động với newInstance

Java

Kotlin

Điều chỉnh mức thu phóng của camera để tập trung vào một chuyến đi

AutoCamera căn giữa camera theo mặc định

Tuỳ chỉnh hành vi của camera

Bước tiếp theo

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

`ConsumerMapView`

`ConsumerMapFragment`

Động với `newInstance`

`AutoCamera` căn giữa camera theo mặc định