Trang này được dịch bởi Cloud Translation API.

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

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

Hướng dẫn này mô tả các cách bạn có thể tạo 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 tạo kiểu cho bản đồ, bạn cần có một ứng dụng dành cho người tiêu dùng với đã triển khai những điều sau:

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

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

Tuỳ chỉnh bản đồ

Các lựa chọn tuỳ chỉnh có sẵn như sau:

Định kiểu bản đồ: Bạn có thể định kiểu màu bản đồ, đường đa tuyến và các đối tượng khác trên bản đồ bằng cách sử dụng tính năng định kiểu bản đồ dựa trên đám mây. Xem phần Tạo 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 sẵn hoặc đặt mức thu phóng của riêng mình các lựa chọn máy ảnh để tập trung vào một hành trình. Xem Đ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à hình nhiều đường: Bạn có thể thêm điểm đánh dấu và tuyến đường tuỳ chỉnh hình nhiều đường vào thiết kế ứng dụng của mình. Các phần tử thiết kế này cho phép 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 hình nhiều đường.

SDK cung cấp các tuỳ chọn này thông qua consumerMapStyleCoordinator thuộc tính này. Thuộc tính này được cung cấp thông qua lớp GMTCMapView.

Tạo kiểu cho 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 sử dụng bản đồ trên đám mây tạo kiểu. Bạn có thể tạo và chỉnh sửa kiểu bản đồ trên bảng điều khiển Google Cloud cho bất kỳ của ứng dụng sử dụng Google Maps mà không yêu cầu 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 giá trị 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 định kiểu bản đồ dựa trên đám mây trong ConsumerMapFragments:

Tĩnh với XML.
Linh hoạt nhờ newInstance.

Tĩnh với XML

Để sử dụng định 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 bằng thuộc tính được chỉ định mapId. 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
  }
}

Đ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 một phiên chia sẻ hành trình đang hoạt động, người dùng sẽ thấy rất hữu ích hình ảnh lớn hơn về chiếc xe trong suốt hành trình thay vì ảnh cận cảnh góc nhìn của chiếc xe trên một tuyến đường. Để thực hiện việc này, bạn đ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 sẵn 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ó để làm bất cứ việc gì. Theo mặc định, camera sẽ theo dõi chuyến đi.
Tuỳ chỉnh hoạt động của máy ảnh: Để tuỳ chỉnh hoạt động của máy ảnh, bạn phải tắt AutoCamera, sau đó tuỳ chỉnh.

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

SDK người tiêu dùng cung cấp một tính năng AutoCamera được bật theo mặc định trên nút Vị trí của tôi được tích hợp sẵn cho SDK bản đồ. Máy ảnh phóng to đến tập trung vào tuyến đường chia sẻ hành trình và điểm tham chiếu tiếp theo của chuyến đi.

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

"AutoCamera"

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

Tuỳ chỉnh hoạt động của máy ảnh

Để kiểm soát tốt hơn hành vi của máy ảnh, 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 các cách tuỳ chỉnh camera, hãy xem Di chuyển camera trong tài liệu SDK Maps dành cho iOS.

Các bước tiếp theo

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

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

Trước khi bắt đầu

Tuỳ chỉnh bản đồ

Tạo kiểu cho bản đồ bằng kiểu bản đồ dựa trên đám mây

ConsumerMapView

Ví dụ:

Java

Kotlin

ConsumerMapFragment

Tĩnh với XML

Linh hoạt nhờ newInstance

Java

Kotlin

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

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

Tuỳ chỉnh hoạt động của máy ảnh

Các bước tiếp theo

`ConsumerMapView`

`ConsumerMapFragment`

Linh hoạt nhờ `newInstance`

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