تصميم خريطة

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

يتناول هذا المستند كيفية تخصيص مظهر ومظهر الخريطة والتحكم خيارات مستوى رؤية البيانات وإطار العرض. يمكنك إجراء ذلك بالطرق التالية:

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

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

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

يتم تحديث 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

هناك طريقتان لاستخدام تصميم الخرائط المستند إلى السحابة في 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.

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

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,
  ...
});

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

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