يوضّح هذا الدليل طرقًا لتخصيص الخريطة التي تظهر في تطبيق Android عند تتبُّع رحلة. يمكنك تخصيص مظهر الخريطة بالطرق التالية:
- تصميم الخريطة باستخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية"
- ضبط الكاميرا للتركيز على الرحلة
- تخصيص العلامات
- تخصيص الخطوط المتعدّدة
تصميم الخريطة باستخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية"
يمكنك تخصيص شكل مكوّن الخرائط ومظهره باستخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية". يمكنك إنشاء أنماط الخرائط وتعديلها على Google Cloud Console لأي من تطبيقاتك التي تستخدم "خرائط Google"، بدون الحاجة إلى إجراء أي تغييرات على الرمز البرمجي. لمزيد من المعلومات، اختَر نظامك الأساسي في تصميم الخرائط باستخدام السحابة الإلكترونية.
تتيح كل من الفئتين
ConsumerMapView
و
ConsumerMapFragment
تصميم الخرائط باستخدام السحابة الإلكترونية.
لاستخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية"، تأكَّد من أنّ محرّك عرض الخرائط المحدّد هو LATEST. تعرض الأقسام التالية أمثلة على كيفية استخدام تصميم الخرائط باستخدام السحابة الإلكترونية مع مشروعك.
ConsumerMapView
لاستخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية" في ConsumerMapView، اضبط حقل
mapId على GoogleMapOptions وأرسِل GoogleMapOptions إلى
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
أو getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
مثال
جافا
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:
- بشكل ثابت باستخدام ملف 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. انظر المثال التالي:
جافا
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 التي يتم تفعيلها تلقائيًا
على زر موقعي الجغرافي المضمّن في حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google". تُكبِّر الكاميرا الصورة للتركيز على مسار الرحلة والنقطة التالية على المسار.
إذا أردت استخدام "AutoCamera"، تأكَّد من تفعيله. لمزيد من التفاصيل، يُرجى الاطّلاع على
isAutoCameraEnabled.
للحصول على تفاصيل حول زر موقعي الجغرافي، يُرجى الاطّلاع على زر "موقعي الجغرافي" في مستندات Maps JavaScript API.
تخصيص سلوك الكاميرا
لمزيد من التحكّم في سلوك الكاميرا، يُرجى اتّباع هذه الخطوات لإيقاف
"AutoCamera" وتخصيص سلوك الكاميرا يدويًا.
أوقِف
AutoCameraباستخدام ConsumerController.setAutoCameraEnabled().احصل على حدود الكاميرا المقترَحة باستخدام ConsumerController.getCameraUpdate().
قدِّم
CameraUpdateكوسيطة لإحدى دوال Android التالية: