คู่มือนี้อธิบายวิธีปรับแต่งแผนที่ที่แสดงในแอป Android เมื่อคุณติดตามการเดินทาง คุณสามารถปรับแต่งรูปลักษณ์ของแผนที่ได้ดังนี้
- จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
- ปรับกล้องให้โฟกัสที่การเดินทาง
- ปรับแต่งมาร์กเกอร์
- ปรับแต่งเส้นหลายเส้น
จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
ปรับแต่งรูปลักษณ์ของคอมโพเนนต์แผนที่โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ คุณสร้างและแก้ไขรูปแบบแผนที่ในคอนโซล Google Cloud สำหรับแอปใดก็ได้ที่ใช้ 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 อย่างใดอย่างหนึ่งต่อไปนี้