تصميم خريطة

اختيار النظام الأساسي: Android iOS JavaScript

يتناول هذا المستند كيفية تخصيص شكل الخريطة وأسلوبها والتحكّم في خيارات viewport و visibility للبيانات. يمكنك إجراء ذلك بالطُرق التالية:

• استخدام ميزة تصميم الخرائط المستندة إلى السحابة الإلكترونية
• ضبط خيارات نمط الخريطة مباشرةً في الرمز الخاص بك

تصميم الخريطة باستخدام ميزة "تصميم الخرائط" المستندة إلى السحابة الإلكترونية

يمكنك تخصيص شكل مكوّن الخرائط ومظهره باستخدام ميزة "تصميم الخرائط" المستندة إلى السحابة الإلكترونية. يمكنك إنشاء أنماط الخرائط وتعديلها على Google Cloud Console لأي من تطبيقاتك التي تستخدم "خرائط Google"، بدون الحاجة إلى إجراء أي تغييرات على الرمز البرمجي. لمزيد من المعلومات، يُرجى الاطّلاع على تصميم الخرائط المستنِد إلى السحابة الإلكترونية.

تتيح كلتا الفئتَين ConsumerMapView و ConsumerMapFragment تصميم الخرائط المستنِد إلى السحابة الإلكترونية. لاستخدام ميزة تصميم الخرائط المستندة إلى السحابة الإلكترونية، تأكَّد من أنّ LATEST هو مُنشئ 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:

• بشكل ثابت مع ملف 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
  }
}

لتطبيق نمط خريطة على خريطة مشاركة رحلات المستهلكين المستندة إلى JavaScript، حدِّد mapId و أي mapOptions آخر عند إنشاء JourneySharingMapView.

ملاحظة: لا يمكنك تغيير mapId أو إضافته بعد إنشاء JourneySharingMapView.

توضّح الأمثلة التالية كيفية تطبيق أسلوب خريطة باستخدام معرّف خريطة.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

تصميم الخرائط مباشرةً في الرمز الخاص بك

يمكنك أيضًا تخصيص تصميم الخريطة من خلال ضبط خيارات الخريطة عند إنشاء JourneySharingMapView. توضّح الأمثلة التالية كيفية تنسيق خريطة باستخدام خيارات الخريطة. لمزيد من المعلومات عن خيارات الخريطة التي يمكنك ضبطها، اطّلِع على mapOptions في مرجع واجهة برمجة التطبيقات JavaScript لـ "خرائط Google".

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

عرض المعلومات على الخريطة

عرض معلومات إضافية عن مركبة أو علامة موقع باستخدام رمز InfoWindow لمزيد من المعلومات، يُرجى الاطّلاع على InfoWindow.

يوضّح المثال التالي كيفية إنشاء InfoWindow وإرفاقه بعلامة مركبة:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

إيقاف ميزة "الملاءمة التلقائية"

يمكنك إيقاف ملاءمة الخريطة تلقائيًا لإطار العرض مع المركبة والمسار المتوقّع من خلال إيقاف ميزة "الملاءمة التلقائية". يوضّح المثال التالي كيفية إيقاف ميزة "الملاءمة التلقائية" عند ضبط عرض "خريطة" لمشاركة الرحلة.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

الخطوات التالية

تخصيص العلامات