עיצוב מפה

בחירת פלטפורמה: 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 במאמרי העזרה של ממשק ה-API של 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,
  ...
});

המאמרים הבאים

התאמה אישית של סמנים