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

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

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

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

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

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

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

คุณยังต้องตั้งค่าบริการแบ็กเอนด์ที่ 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) หรือ get ConsumerGoogleMapAsync(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

สามารถใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ได้ 2 วิธีใน ConsumerMapFragments:

• แบบคงที่ที่มี XML
• แบบไดนามิกด้วย newInstance

แบบคงที่ที่มี XML

หากต้องการใช้การจัดสไตล์แผนที่แบบระบบคลาวด์กับ XML ใน ConsumerMapFragment ให้เพิ่มแอตทริบิวต์ map:mapId XML ที่มี 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 ปรับกล้องให้อยู่ตรงกลางโดยค่าเริ่มต้น

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

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

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

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

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

ปิดใช้หรือเปิดใช้ AutoCamera ด้วย AllowCameraAutoUpdate

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

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

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