จัดรูปแบบแผนที่

เลือกแพลตฟอร์ม: Android iOS JavaScript

คู่มือนี้อธิบายวิธีปรับแต่งแผนที่ที่แสดงในแอป 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 และปรับแต่งลักษณะการทำงานของกล้องด้วยตนเอง

1. ปิดใช้ AutoCamera โดยใช้ ConsumerController.setAutoCameraEnabled()

2. รับขอบเขตกล้องที่แนะนำโดยใช้ ConsumerController.getCameraUpdate()

3. ระบุ CameraUpdate เป็นอาร์กิวเมนต์ให้กับฟังก์ชัน Android อย่างใดอย่างหนึ่งต่อไปนี้

   • GoogleMap.moveCamera()

   • GoogleMap.animateCamera()

ขั้นตอนถัดไป

ติดตามการเดินทางใน Android