Thiết lập bản đồ

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

Để theo dõi một chuyến đi trong ứng dụng dành cho người tiêu dùng, trước tiên, bạn cần xác định một bản đồ và thêm tính năng hỗ trợ cho bản đồ vectơ (nếu cần).

Để thiết lập bản đồ trong ứng dụng, hãy làm theo các bước sau:

  1. Xác định một mảnh bản đồ để theo dõi một chuyến đi.
  2. Thêm hỗ trợ cho lớp cơ sở của bản đồ và trình điều khiển chế độ xem.
  3. Thêm tính năng hỗ trợ đồ hoạ vectơ Android để hiển thị bản đồ vectơ, nếu cần.

Sau khi xác định bản đồ, bạn có thể thêm các chế độ xem và chế độ điều khiển camera khác mà bạn muốn để tuỳ chỉnh trải nghiệm hình ảnh. Để biết thêm thông tin chi tiết, hãy xem phần Định kiểu cho bản đồ.

Bước 1: Xác định mảnh bản đồ để theo dõi một chuyến đi

Bạn xác định bản đồ bằng cách thêm một mảnh hoặc chế độ xem bản đồ để tạo bản đồ tại nơi bạn chia sẻ chuyến đi theo yêu cầu trong ứng dụng cho người dùng thông thường. Để xác định bản đồ, hãy làm theo một trong các phương thức sau:

  • ConsumerMapFragment: Sử dụng để xác định bản đồ bằng Fragment.

  • ConsumerMapView: Dùng để xác định bản đồ bằng View.

Các tính năng của cả hai phương thức đều giống nhau, vì vậy, hãy chọn phương thức nào phù hợp hơn với ứng dụng của bạn.

Cả hai phương pháp này đều được giải thích chi tiết hơn trong phần sau.

Thêm mảnh hoặc thành phần hiển thị bản đồ

Để tạo bản đồ hiển thị tiến trình chuyến đi bằng một mảnh Android hoặc một thành phần hiển thị, hãy làm theo các bước sau và tham khảo các ví dụ về mã.

  1. Xác định một mảnh hoặc khung hiển thị trong tệp XML bố cục ứng dụng nằm trong /res/layout. Xác định bản đồ chuyến đi dưới dạng một mảnh bằng cách sử dụng ConsumerMapFragment hoặc dưới dạng một thành phần hiển thị bằng cách sử dụng ConsumerMapView.

    Sau đó, mảnh hoặc thành phần hiển thị sẽ cung cấp quyền truy cập vào bản đồ chuyến đi mà ứng dụng của bạn có thể truy cập và sửa đổi. Bản đồ này cũng cung cấp một handle cho ConsumerController, cho phép ứng dụng của bạn kiểm soát và tuỳ chỉnh trải nghiệm của người tiêu dùng.

  2. Từ phương thức onCreate(), hãy gọi getConsumerGoogleMapAsync(callback). Phương thức này sẽ trả về ConsumerGoogleMap một cách không đồng bộ trong lệnh gọi lại.

  3. Sử dụng ConsumerGoogleMap để hiển thị tiến trình chuyến đi và cập nhật nếu cần.

Ví dụ về cách thêm ConsumerMapFragment

  1. Xác định mảnh trong tệp XML bố cục ứng dụng, như minh hoạ trong ví dụ mã sau.

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

  2. Gọi getConsumerGoogleMapAsync() từ phương thức onCreate().

Java

 public class SampleAppActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     // Find the ConsumerMapFragment.
     ConsumerMapFragment consumerMapFragment =
         (ConsumerMapFragment) fragmentManager.findFragmentById(R.id.consumer_map_fragment);

     // Initiate the callback that returns the map.
     if (consumerMapFragment != null) {
       consumerMapFragment.getConsumerGoogleMapAsync(
           new ConsumerMapReadyCallback() {
             // The map returned in the callback is used to access the ConsumerController.
             @Override
             public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
               ConsumerController consumerController = consumerGoogleMap.getConsumerController();
             }
           });
     }
   }

 }

Kotlin

 class SampleAppActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     // Find the ConsumerMapFragment.
     val consumerMapFragment =
       fragmentManager.findFragmentById(R.id.consumer_map_fragment) as ConsumerMapFragment

     consumerMapFragment.getConsumerGoogleMapAsync(
       object : ConsumerMapReadyCallback() {
         override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
           val consumerController = consumerGoogleMap.getConsumerController()!!
         }
       }
     )
   }
 }

Ví dụ về cách thêm ConsumerMapView

  1. Sử dụng thành phần hiển thị trong một mảnh hoặc trong một hoạt động, như xác định trong tệp XML.

     <com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapView
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/consumer_map_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />

  2. Gọi điện đến getConsumerGoogleMapAsync() từ onCreate(). Ngoài tham số gọi lại, hãy thêm các thông tin chi tiết sau:

    • Hoạt động hoặc mảnh chứa. Lớp cơ sở của hoạt động hoặc mảnh phải là FragmentActivity hoặc Fragment hỗ trợ (tương ứng), vì các lớp này cung cấp quyền truy cập vào vòng đời của nó.

    • GoogleMapOptions (có thể là giá trị rỗng), chứa các thuộc tính cấu hình cho MapView.

Java

public class SampleAppActivity extends AppCompatActivity {

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

    if (mapView != null) {
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            // The map returned in the callback is used to access the ConsumerController.
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              ConsumerController consumerController = consumerGoogleMap.getConsumerController();
            }
          }, this, null);
    }
  }

}

Kotlin

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

    mapView.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        // The map returned in the callback is used to access the ConsumerController.
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          val consumerController = consumerGoogleMap.getConsumerController()!!
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ null,
    )
  }
}

MapView trong một mảnh giống như ví dụ trước cho MapView trong một hoạt động, ngoại trừ việc mảnh này tăng cường bố cục bao gồm MapView trong phương thức onCreateView() của mảnh.

Java

public class MapViewInFragment extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater layoutInflater,
      @Nullable ViewGroup viewGroup,
      @Nullable Bundle bundle) {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false);
  }

}

Kotlin

class MapViewInFragment : Fragment() {
  override fun onCreateView(
    layoutInflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
  ): View {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false)
  }
}

Bước 2: Thêm tính năng hỗ trợ cho lớp cơ sở của bản đồ và trình điều khiển chế độ xem

Để chia sẻ tiến trình chuyến đi trong ứng dụng của bạn, hãy thêm các lớp sau vào ứng dụng: ConsumerGoogleMap và ConsumerController.

  • Lấy ConsumerGoogleMap từ ConsumerMapFragment hoặc ConsumerMapView, cả hai đều trả về ConsumerGoogleMap không đồng bộ trong ConsumerMapReadyCallback.

    ConsumerGoogleMap là một lớp trình bao bọc cho lớp GoogleMap. Lớp này sử dụng một API tương đương với GoogleMap để ứng dụng của bạn có thể tương tác với bản đồ. Bằng cách này, ứng dụng của bạn có thể tương tác liền mạch với cùng một bản đồ cơ bản của Google. Ví dụ: GoogleMap chỉ cho phép đăng ký một lệnh gọi lại, nhưng ConsumerGoogleMap hỗ trợ các lệnh gọi lại được đăng ký kép. Các lệnh gọi lại này cho phép ứng dụng đăng ký các lệnh gọi lại được gọi tuần tự.

  • Nhận ConsumerController từ ConsumerGoogleMap trong getConsumerController().

    ConsumerController cung cấp quyền truy cập vào các tính năng chia sẻ chuyến đi, chẳng hạn như giám sát chuyến đi, kiểm soát trạng thái chuyến đi và đặt vị trí.

Để biết cách thêm ConsumerGoogleMap và ConsumerController vào ứng dụng của bạn trong Java và Kotlin, hãy xem các ví dụ sau.

Java

private ConsumerGoogleMap consumerGoogleMap;
private ConsumerController consumerController;
private ConsumerMapView consumerMapView;

consumerMapView.getConsumerGoogleMapAsync(
    new ConsumerMapReadyCallback() {
      @Override
      public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerMap) {
        consumerGoogleMap = consumerMap;
        consumerController = consumerMap.getConsumerController();
      }
    },
    this, null);

Kotlin

var consumerGoogleMap: ConsumerGoogleMap
var consumerController: ConsumerController
val consumerMapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

consumerMapView.getConsumerGoogleMapAsync(
  object : ConsumerMapReadyCallback() {
    override fun onConsumerMapReady(consumerMap: ConsumerGoogleMap) {
      consumerGoogleMap = consumerMap
      consumerController = consumerMap.getConsumerController()
    },
    /* fragmentActivity= */ this,
    /* googleMapOptions= */ null,
  }
)

Bước 3: Thêm tính năng hỗ trợ cho đồ hoạ vectơ trên Android

Nếu thiết kế ứng dụng của bạn yêu cầu hỗ trợ đồ hoạ vectơ, hãy thêm tính năng hỗ trợ cho thiết bị Android và vectơ có thể vẽ theo các bước sau:

  1. Thêm mã sau vào Hoạt động của bạn. Mã này mở rộng AppCompatActivity để sử dụng các vectơ có thể vẽ trong SDK dành cho người dùng.

Java

// ...
import android.support.v7.app.AppCompatActivity;

// ...

public class ConsumerTestActivity extends AppCompatActivity {
  // ...
}

Kotlin

// ...
import android.support.v7.app.AppCompatActivity

// ...

class ConsumerTestActivity : AppCompatActivity() {
  // ...
}

Bước tiếp theo

Theo dõi một chuyến đi trong Android Tạo kiểu cho bản đồ