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

Hướng dẫn này mô tả những cách bạn có thể định kiểu bản đồ xuất hiện 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 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 trong chế độ xem bản đồ. Xem phần Xử lý các sự kiện trong 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, đồng thời 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 bản đồ: Bạn có thể định kiểu màu bản đồ, đường nhiều đoạn 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 bản đồ.

• Điều chỉnh mức thu phóng của máy ảnh: Bạn có thể sử dụng tính năng tích hợp hoặc thiết lập các lựa chọn máy ảnh của riêng mình để 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 máy ảnh để tập trung vào một chuyến đi.

• Tuỳ chỉnh điểm đánh dấu và đường nhiều đoạn: Bạn có thể thêm điểm đánh dấu tuỳ chỉnh và đường nhiều đoạn tuyến đường vào thiết kế ứng dụng. Các thành phần 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.

  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 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 bả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ả 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 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ụ:

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

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:

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

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 máy ảnh để 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 nên xem chế độ xem lớn hơn về xe trong suốt hành trình thay vì chế độ xem 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 máy ảnh bằng cách sử dụng AutoCamera tích hợp hoặc tự tuỳ chỉnh hành vi của máy ảnh như sau:

• AutoCamera: Nếu muốn sử dụng AutoCamera, bạn không cần làm gì cả. Theo mặc định, máy ảnh sẽ theo dõi chuyến đi.

• Tuỳ chỉnh hành vi của máy ảnh: Để tuỳ chỉnh hành vi của máy ảnh, bạn phải tắt AutoCamera rồi tuỳ chỉnh.

AutoCamera căn giữa máy ảnh 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 cho SDK Maps. Máy ảnh 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.

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

Tuỳ chỉnh hành vi của máy ảnh

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

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 máy ảnh, hãy xem Di chuyển máy ảnh trong tài liệu về SDK Maps cho iOS.

Bước tiếp theo

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