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

Tài liệu này đề cập đến cách tuỳ chỉnh giao diện của bản đồ và chức năng điều khiển các tuỳ chọn chế độ xem và chế độ hiển thị dữ liệu. Bạn có thể thực hiện việc này theo các cách sau:

Sử dụng kiểu bản đồ dựa trên đám mây
Đặt tùy chọn kiểu bản đồ trực tiếp trong mã của riêng bạn

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 thuộc tính 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
  }
}

Để áp dụng kiểu bản đồ cho bản đồ chia sẻ hành trình của người tiêu dùng sử dụng JavaScript, hãy chỉ định một mapId và bất kỳ loại nào khác mapOptions khi bạn tạo JourneySharingMapView.

Các ví dụ sau đây minh hoạ cách áp dụng kiểu bản đồ bằng mã bản đồ.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Tạo kiểu cho bản đồ ngay trong mã của riêng bạn

Bạn cũng có thể tuỳ chỉnh kiểu bản đồ bằng cách đặt tuỳ chọn bản đồ khi bạn tạo JourneySharingMapView. Các ví dụ sau đây minh hoạ cách tạo kiểu cho bản đồ bằng cách sử dụng tuỳ chọn bản đồ. Để biết thêm thông tin về những tùy chọn bản đồ mà bạn có thể đặt, hãy xem mapOptions trong tài liệu tham khảo API JavaScript của Google Maps.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Hiển thị thông tin trên bản đồ

Hiển thị thông tin bổ sung về điểm đánh dấu xe hoặc vị trí bằng một InfoWindow. Để biết thêm thông tin, hãy xem InfoWindow.

Ví dụ sau đây cho biết cách tạo và đính kèm InfoWindow vào điểm đánh dấu xe:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Tắt tính năng điều chỉnh tự động

Bạn có thể ngăn bản đồ tự động điều chỉnh khung nhìn vừa với xe và tuyến đường dự kiến bằng cách tắt tính năng điều chỉnh tự động. Ví dụ sau đây cho biết cách tắt tính năng tự động điều chỉnh khi bạn thiết lập chế độ chia sẻ hành trình chế độ xem bản đồ.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Các bước tiếp theo

Tuỳ chỉnh điểm đánh dấu

Tạo kiểu cho 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

JavaScript

TypeScript

Tạo kiểu cho bản đồ ngay trong mã của riêng bạn

JavaScript

TypeScript

Hiển thị thông tin trên bản đồ

JavaScript

TypeScript

Tắt tính năng điều chỉnh tự động

JavaScript

TypeScript

Các bước tiếp theo

`ConsumerMapView`

`ConsumerMapFragment`

Linh hoạt nhờ `newInstance`