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

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 triển khai ứng dụng cho người dùng thông thường với những việc sau:

• Chế độ xem bản đồ. Hãy xem bài viết Khởi động chế độ xem bản đồ.

• Một cách để xử lý các sự kiện trong chế độ xem bản đồ. Xem nội dung Xử lý sự kiện chế độ xem bản đồ

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

Tuỳ chỉnh bản đồ

Sau đây là các tuỳ chọn tuỳ chỉnh có sẵn:

• Tạo kiểu cho bản đồ: Bạn có thể tạo kiểu cho màu bản đồ, hình nhiều đường và các đối tượng địa lý khác của bản đồ bằng cách sử dụng 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 các tuỳ chọn máy ảnh của riêng mình để tập trung vào một hành trình. Xem bài viết Đ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à đa tuyến: Bạn có thể thêm điểm đánh dấu tuỳ chỉnh và đa 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 Người tiêu dùng hiển thị bản xem trước động về tuyến đường của xe. Xem phần 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 thuộc tính consumerMapStyleCoordinator. Bạn có thể sử dụng thuộc tính này 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 kiểu bản đồ 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 phần Định kiểu bản đồ dựa trên đám mây.

Cả lớp ConsumerMapView và ConsumerMapFragment đều hỗ trợ tạo kiểu bản đồ trên đám mây. Để sử dụng kiểu bản đồ dựa trên đám mây, hãy đảm bảo 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 kiểu bản đồ dựa trên đám mây cho 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à chuyển GoogleMapOptions đến 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 đị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 kiểu bản đồ trên đám mây bằng XML trong ConsumerMapFragment, hãy thêm thuộc tính XML map:mapId bằng 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"/>

Động với newInstance

Để sử dụng kiểu bản đồ dựa trên đám mây bằng 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 diễn ra, sẽ giúp người dùng có được góc nhìn rộng hơn về xe trong suốt hành trình thay vì góc nhìn cận cảnh của xe trên tuyến đường. Để làm điều này, bạn cầ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 bằng cách 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 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 dành cho người 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 SDK Maps. Máy ảnh sẽ thu phóng để tập trung vào tuyến đường và điểm trung gian tiếp theo của chuyến đi.

Nếu bạn muốn sử dụng AutoCamera, hãy nhớ bật dịch vụ này. Để biết thêm thông tin, hãy xem allowCameraAutoUpdate.

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

Tuỳ chỉnh hành vi 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 máy ảnh.

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

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

Bước tiếp theo

Theo dõi chuyến đi trên iOS