คู่มือนี้จะอธิบายวิธีที่คุณสามารถจัดรูปแบบแผนที่ที่ จะแสดงในแอป iOS เมื่อติดตามการเดินทาง
ก่อนเริ่มต้น
ก่อนที่จะจัดรูปแบบแผนที่ คุณต้องมีแอปสำหรับผู้บริโภคที่มี มีการใช้งานดังต่อไปนี้
มุมมองแผนที่ ดูเริ่มต้นมุมมองแผนที่
วิธีจัดการเหตุการณ์ในมุมมองแผนที่ โปรดดู จัดการเหตุการณ์ในมุมมองแผนที่
คุณยังต้องตั้งค่าบริการแบ็กเอนด์ที่ SDK ของผู้บริโภคต้องการด้วย และตั้งค่า Consumer SDK โปรดดูรายละเอียดที่หัวข้อตั้งค่า SDK ของผู้บริโภค และ Fleet Engine คืออะไร
การปรับแต่งแผนที่
การปรับแต่งที่มีให้ใช้งานมีดังนี้
จัดรูปแบบแผนที่: คุณจัดรูปแบบสีแผนที่ เส้นประกอบ และฟีเจอร์อื่นๆ ของแผนที่ได้ โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ ดูจัดรูปแบบแผนที่
ปรับการซูมของกล้อง: คุณจะใช้ฟีเจอร์ในตัวหรือตั้งค่าการซูมของคุณเองก็ได้ ตัวเลือกกล้องเพื่อช่วยให้คุณโฟกัสกับการเดินทาง โปรดดู ปรับการซูมของกล้องเพื่อโฟกัสการเดินทาง
ปรับแต่งเครื่องหมายและเส้นประกอบ: คุณสามารถเพิ่มเครื่องหมายและเส้นทางที่กำหนดเอง เส้นประกอบของการออกแบบแอป องค์ประกอบการออกแบบเหล่านี้ช่วยให้ผู้บริโภค แอปเพื่อแสดงตัวอย่างเส้นทางของยานพาหนะแบบไดนามิก โปรดดู ปรับแต่งเครื่องหมายและ ปรับแต่งเส้นประกอบ
SDK ให้ตัวเลือกเหล่านี้ผ่านทาง
consumerMapStyleCoordinator
พร็อพเพอร์ตี้นี้พร้อมใช้งานผ่านคลาสGMTCMapView
จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
ปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่โดยใช้แผนที่ในระบบคลาวด์ การจัดรูปแบบ คุณสามารถสร้างและแก้ไขรูปแบบแผนที่ในคอนโซล Google Cloud สำหรับ ของแอปที่ใช้ Google Maps โดยไม่ต้องเปลี่ยนแปลงโค้ดใดๆ เลย สำหรับข้อมูลเพิ่มเติม โปรดดู การจัดรูปแบบแผนที่ในระบบคลาวด์
ทั้ง
ConsumerMapView
และ
ConsumerMapFragment
ชั้นเรียนจะรองรับการจัดรูปแบบแผนที่ในระบบคลาวด์
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ โปรดตรวจสอบว่าแผนที่ที่เลือก
โหมดแสดงภาพคือ LATEST
ส่วนต่อไปนี้จะแสดงตัวอย่างวิธีใช้
การจัดรูปแบบแผนที่ในระบบคลาวด์พร้อมกับโปรเจ็กต์ของคุณ
ConsumerMapView
หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ใน ConsumerMapView
ให้ตั้งค่า
ฟิลด์ mapId
บน GoogleMapOptions
และส่งต่อ GoogleMapOptions
ไปยัง
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or 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
สามารถใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ได้ 2 วิธีใน ConsumerMapFragments:
- แบบคงที่โดยใช้ 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
ปรับกล้องให้อยู่ตรงกลางโดยค่าเริ่มต้น
SDK ของผู้บริโภคมีฟีเจอร์ AutoCamera
ที่เปิดใช้โดยค่าเริ่มต้น
บนปุ่มตำแหน่งของฉันในตัวสำหรับ Maps SDK กล้องจะซูมไปที่
มุ่งเน้นที่การแชร์การเดินทางและจุดอ้างอิงของการเดินทางถัดไป
หากต้องการใช้ AutoCamera
โปรดตรวจสอบว่าเปิดใช้แล้ว ดูรายละเอียดเพิ่มเติมได้ที่
allowCameraAutoUpdate
สำหรับรายละเอียดเกี่ยวกับปุ่มตำแหน่งของฉันสำหรับ Maps SDK โปรดดูที่ ปุ่มตำแหน่งของฉัน ในเอกสาร Maps SDK สำหรับ iOS
ปรับแต่งลักษณะการทำงานของกล้อง
หากต้องการควบคุมลักษณะการทำงานของกล้องได้มากขึ้น คุณปิดใช้ AutoCamera
และ
ปรับแต่งลักษณะการทำงานของกล้อง
ปิดใช้หรือเปิดใช้ AutoCamera
ด้วย
AllowCameraAutoUpdate
สำหรับการปรับแต่งกล้องเพิ่มเติม โปรดดู การเคลื่อนไหวกล้อง ในเอกสาร Maps SDK สำหรับ iOS