คู่มือนี้อธิบายวิธีปรับแต่งแผนที่ที่แสดงในแอป Android เมื่อคุณติดตามการเดินทาง คุณปรับแต่งรูปลักษณ์ของแผนที่ได้ด้วยวิธีต่อไปนี้
- จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
- ปรับกล้องให้โฟกัสที่การเดินทาง
- ปรับแต่งเครื่องหมาย
- ปรับแต่งเส้นหลายส่วน
จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
ปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ คุณสร้างและแก้ไขรูปแบบแผนที่ใน Google Cloud Console สำหรับแอปใดก็ได้ที่ใช้ Google Maps โดยไม่ต้องเปลี่ยนแปลงโค้ด ดูข้อมูลเพิ่มเติมได้โดยเลือกแพลตฟอร์มของคุณที่การจัดรูปแบบแผนที่ในระบบคลาวด์
ทั้งคลาส
ConsumerMapView
และคลาส
ConsumerMapFragment
รองรับการจัดรูปแบบแผนที่ในระบบคลาวด์
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ ให้ตรวจสอบว่าตัวแสดงผลแผนที่ที่เลือกเป็น LATEST ส่วนต่อไปนี้แสดงตัวอย่างวิธีใช้
การจัดรูปแบบแผนที่บนระบบคลาวด์กับโปรเจ็กต์
ConsumerMapView
หากต้องการใช้การจัดรูปแบบแผนที่บนระบบคลาวด์ใน ConsumerMapView ให้ตั้งค่าฟิลด์
mapId ใน GoogleMapOptions แล้วส่ง GoogleMapOptions ไปยัง
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
หรือ getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
ตัวอย่าง
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
คุณใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ใน ConsumerMapFragments ได้ 2 วิธี ดังนี้
- แบบคงที่ด้วย XML
- แบบไดนามิกด้วย newInstance
แบบคงที่ด้วย XML
หากต้องการใช้การจัดรูปแบบแผนที่บนระบบคลาวด์กับ XML ใน
ConsumerMapFragment ให้เพิ่มแอตทริบิวต์ XML map:mapId ที่มี
mapId ที่ระบุ โปรดดูตัวอย่างต่อไปนี้
<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"/>
แบบไดนามิกด้วย newInstance
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับ newInstance ใน
ConsumerMapFragment ให้ตั้งค่าฟิลด์ mapId ใน GoogleMapOptions แล้วส่ง GoogleMapOptions ไปยัง newInstance โปรดดูตัวอย่างต่อไปนี้
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
  }
}
ปรับการซูมกล้องเพื่อโฟกัสที่การเดินทาง
ในระหว่างเซสชันการแชร์การเดินทางที่ใช้งานอยู่ คุณสามารถจัดการการซูมกล้องและ โฟกัสได้ 2 วิธีดังนี้
- AutoCamera: หากต้องการใช้- AutoCameraคุณไม่จำเป็นต้องทำอะไร กล้องจะติดตามการเดินทาง ดูรายละเอียดได้ที่- AutoCamera
- ปรับแต่งลักษณะการทำงานของกล้อง: หากต้องการปรับแต่งลักษณะการทำงานของกล้อง คุณต้องปิดใช้ - AutoCameraก่อน แล้วจึงทำการปรับแต่ง โปรดดูรายละเอียดที่หัวข้อปรับแต่งลักษณะการทำงานของกล้อง
AutoCamera จัดกึ่งกลางกล้อง
Consumer SDK มีฟีเจอร์ AutoCamera ที่เปิดใช้โดยค่าเริ่มต้น
ในปุ่มตำแหน่งของฉันในตัวสำหรับ Maps SDK กล้องจะซูมเพื่อ
โฟกัสเส้นทางการเดินทางและจุดอ้างอิงการเดินทางถัดไป
หากต้องการใช้ AutoCamera โปรดตรวจสอบว่าได้เปิดใช้แล้ว ดูรายละเอียดเพิ่มเติมได้ที่
isAutoCameraEnabled

ดูรายละเอียดเกี่ยวกับปุ่มตำแหน่งของฉันได้ที่ ปุ่มตำแหน่งของฉัน ในเอกสารประกอบ Maps JavaScript API
ปรับแต่งลักษณะการทำงานของกล้อง
หากต้องการควบคุมลักษณะการทำงานของกล้องให้มากขึ้น ให้ทำตามขั้นตอนต่อไปนี้เพื่อปิดใช้
AutoCameraและปรับแต่งลักษณะการทำงานของกล้องด้วยตนเอง
- ปิดใช้ - AutoCameraโดยใช้ ConsumerController.setAutoCameraEnabled()
- รับขอบเขตกล้องที่แนะนำโดยใช้ ConsumerController.getCameraUpdate() 
- ระบุ - CameraUpdateเป็นอาร์กิวเมนต์ให้กับฟังก์ชัน Android อย่างใดอย่างหนึ่งต่อไปนี้