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

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

คู่มือนี้อธิบายวิธีจัดรูปแบบแผนที่ที่แสดงในแอป iOS เมื่อติดตามการเดินทาง

ก่อนเริ่มต้น

ก่อนจัดรูปแบบแผนที่ คุณต้องมีแอปสำหรับผู้บริโภคที่ติดตั้งใช้งานสิ่งต่อไปนี้

• มุมมองแผนที่ ดูเริ่มต้นมุมมองแผนที่

• วิธีจัดการเหตุการณ์มุมมองแผนที่ ดู จัดการเหตุการณ์มุมมองแผนที่

นอกจากนี้ คุณยังต้องตั้งค่าบริการแบ็กเอนด์ที่ Consumer SDK ต้องการ และตั้งค่า Consumer SDK ด้วย โปรดดูรายละเอียดที่หัวข้อตั้งค่า SDK สำหรับผู้บริโภค และFleet Engine คืออะไร

การปรับแต่งแผนที่

การปรับแต่งที่ใช้ได้มีดังนี้

• จัดรูปแบบแผนที่: คุณจัดรูปแบบสีของแผนที่ เส้นหลายส่วน และองค์ประกอบอื่นๆ ของแผนที่ได้ โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ ดูจัดรูปแบบแผนที่

• ปรับการซูมกล้อง: คุณใช้ฟีเจอร์ในตัวหรือตั้งค่าตัวเลือกกล้องของคุณเองเพื่อโฟกัสที่เส้นทางได้ ดูปรับการซูมกล้องเพื่อโฟกัสที่การเดินทาง

• ปรับแต่งเครื่องหมายและเส้นหลายส่วน: คุณเพิ่มเครื่องหมายที่กำหนดเองและเส้นหลายส่วนของเส้นทางลงในการออกแบบแอปได้ องค์ประกอบการออกแบบเหล่านี้ช่วยให้แอปสำหรับผู้บริโภค แสดงตัวอย่างเส้นทางของยานพาหนะแบบไดนามิกได้ ดู ปรับแต่งเครื่องหมายและ ปรับแต่งเส้นหลายเส้น

  SDK มีตัวเลือกเหล่านี้ผ่านพร็อพเพอร์ตี้ consumerMapStyleCoordinator พร็อพเพอร์ตี้นี้พร้อมใช้งานผ่านคลาส GMTCMapView

จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์

ปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ คุณสร้างและแก้ไขรูปแบบแผนที่ใน 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
  }
}

ปรับการซูมกล้องเพื่อโฟกัสที่การเดินทาง

ในระหว่างเซสชันการแชร์การเดินทางที่ใช้งานอยู่ ผู้ใช้จะเห็นมุมมองที่กว้างขึ้นของยานพาหนะตลอดการเดินทางแทนที่จะเป็นมุมมองระยะใกล้ของยานพาหนะในเส้นทาง โดยคุณสามารถทำได้ด้วยการปรับระดับการซูมของกล้อง โดยใช้AutoCameraในตัว หรือปรับแต่งลักษณะการทำงานของกล้อง ด้วยตนเองดังนี้

• AutoCamera: หากต้องการใช้ AutoCamera คุณไม่จำเป็นต้องทำอะไร โดยค่าเริ่มต้น กล้องจะติดตามการเดินทาง

• ปรับแต่งลักษณะการทำงานของกล้อง: หากต้องการปรับแต่งลักษณะการทำงานของกล้อง คุณต้องปิดใช้ AutoCamera ก่อน แล้วจึงทำการปรับแต่ง

AutoCamera จะจัดกึ่งกลางกล้องโดยค่าเริ่มต้น

Consumer SDK มีฟีเจอร์ AutoCamera ที่เปิดใช้โดยค่าเริ่มต้น ในปุ่มตำแหน่งของฉันในตัวสำหรับ Maps SDK กล้องจะซูมเพื่อ โฟกัสเส้นทางการเดินทางและจุดแวะพักของการเดินทางครั้งถัดไป

หากต้องการใช้ AutoCamera โปรดตรวจสอบว่าได้เปิดใช้แล้ว ดูรายละเอียดเพิ่มเติมได้ที่ allowCameraAutoUpdate

ดูรายละเอียดเกี่ยวกับปุ่มตำแหน่งของฉันสำหรับ Maps SDK ได้ที่ ปุ่มตำแหน่งของฉัน ในเอกสาร Maps SDK สำหรับ iOS

ปรับแต่งลักษณะการทำงานของกล้อง

หากต้องการควบคุมลักษณะการทำงานของกล้องให้มากขึ้น คุณสามารถปิดใช้ AutoCamera และ ปรับแต่งลักษณะการทำงานของกล้องได้

ปิดหรือเปิดใช้ AutoCamera ด้วยพร็อพเพอร์ตี้ AllowCameraAutoUpdate

ดูการปรับแต่งกล้องเพิ่มเติมได้ที่ การย้ายกล้อง ในเอกสาร Maps SDK สำหรับ iOS

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

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