تصميم خريطة

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

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

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

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

لتطبيق نمط خريطة على خريطة مشاركة رحلة المستهلك في 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 في مرجع Google Maps JavaScript API.

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

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

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