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ách bạn có thể tuỳ chỉnh bản đồ được hiển thị trong Ứng dụng Android khi bạn theo dõi một chuyến đi. Bạn có thể tuỳ chỉnh giao diện của bản đồ theo các cách sau:

• Tạo kiểu cho bản đồ bằng kiểu bản đồ dựa trên đám mây
• Điều chỉnh camera để tập trung vào chuyến đi
• Tuỳ chỉnh điểm đánh dấu
• Tuỳ chỉnh hình nhiều đường

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ả hai thuộc tính ConsumerMapView và ConsumerMapFragment các lớp hỗ trợ định kiểu bản đồ 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) or 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 phiên chia sẻ hành trình đang hoạt động, bạn có thể xử lý tính năng thu phóng của máy ảnh và tập trung theo một trong hai cách:

• AutoCamera: Nếu bạn muốn sử dụng AutoCamera, bạn không có để làm bất cứ việc gì. Camera theo dõi chuyến đi. Để biết thông tin chi tiết, hãy xem AutoCamera.

• Tuỳ chỉnh hoạt động của camera: Để tuỳ chỉnh hoạt động của camera, bạn phải tắt AutoCamera, sau đó tuỳ chỉnh. Để biết thông tin chi tiết, hãy xem phần Tuỳ chỉnh hoạt động của máy ảnh.

AutoCamera căn giữa camera

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 nhớ bật dịch vụ này. Để biết thêm thông tin, hãy xem isAutoCameraEnabled.

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

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, hãy làm theo các bước sau để tắt AutoCamera rồi tuỳ chỉnh hành vi của máy ảnh theo cách thủ công.

1. Tắt AutoCamera bằng ConsumerController.setAutoCameraEnabled().

2. Nhận các giới hạn máy ảnh được đề xuất bằng cách sử dụng ConsumerController.getCameraUpdate().

3. Cung cấp CameraUpdate làm đối số cho một trong các hàm Android sau:

   • GoogleMap.moveCamera()

   • GoogleMap.animateCamera().

Các bước tiếp theo

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