JavaScript için Tüketici SDK'sını Kullanmaya Başlama

JavaScript SDK, konumu görselleştirmenize olanak tanır. oranında araç ve önemli yer bulunuyor. Kitaplık JavaScript harita bileşeni içeriyor standart google.maps.Map varlığı ve veri bileşenlerinin bağlanması için ilk adımıdır. JavaScript SDK'sını kullanarak, web uygulamanızdan özelleştirilebilir, animasyonlu bir gezi ve sipariş ilerleme deneyimi sağlayabilirsiniz.

Bileşenler

JavaScript SDK, görselleştirme için bileşenler sağlar trafik verilerinin yanı sıra sürücünün tahmini varış süresi için ham veri kalan mesafeyi katlamanız gerekir.

Gezi ve Sipariş İlerlemesi harita görünümü

Harita görünümü bileşeni, araçların ve ara noktaların konumunu görselleştirir. Bir aracın rotası biliniyorsa harita görünümü bileşeni yol boyunca hareket etmesini sağlar.

Gezi konumu sağlayıcı

JavaScript SDK'sı bir gezi konumu içeriyor izlenen nesnelere ait konum bilgilerini sipariş ilerlemesi haritasını çıkarmalısınız.

Aşağıdakileri takip etmek için gezi konumu sağlayıcıyı kullanabilirsiniz:

  • Bir seyahatin alınacağı veya bırakılacağı konum.
  • Yolculuğa atanan aracın konumu ve rotası.

İzlenen konum nesneleri

Konum sağlayıcı, ara noktalar ve araçlar gibi nesnelerin konumunu izler.

Kalkış yeri

Kalkış konumu, yolculuğun başladığı konumdur. O da konumu belirler.

Hedef konumu

Varış konumu, yolculuğun sona erdiği konumdur. Teslimat konumunu belirtir.

Ara nokta konumu

Referans noktası konumu, takip edilen bir yolculuğun rotası üzerindeki herhangi bir konumdur. Örneğin, otobüs rotasındaki her durak bir ara nokta konumudur.

Araç konumu

Araç konumu, bir aracın takip edilen konumudur. İsteğe bağlı olarak araç için bir rota eklemek.

Kimlik doğrulama jetonu alıcısı

Fleet Engine'de depolanan konum verilerine erişimi kontrol etmek için Fleet Engine için bir JSON Web Token (JWT) para kazanma hizmeti uygulama . Ardından, isteğe bağlı olarak bir kimlik doğrulama jetonu alıcı JavaScript SDK'sını kullanarak web uygulamanızın konum verilerine erişim için kimlik doğrulaması yapmak zorundadır.

Stil seçenekleri

İşaretçi ve çoklu çizgi stilleri, izlenen konum nesnelerini görebilirsiniz. Tekliflerinizi otomatikleştirmek ve optimize etmek için varsayılan stili stile uyacak şekilde değiştirmek için özel stil seçenekleri bir yoludur.

İzlenen konumların görünürlüğünü kontrol etme

Bu bölümde, izlenen konum nesneleri için görünürlük kuralları açıklanmaktadır. haritasında, önceden tanımlanmış Fleet Engine konum sağlayıcıları için Özel veya türetilmiş konum sağlayıcılar görünürlük kurallarını değiştirebilir.

Araçlar

Araç paylaşım aracı, seyahate atandığı andan itibaren görünür kalan zamanı ifade eder. Yolculuk iptal edilirse araç artık görünür durumda olur.

Diğer tüm konum işaretçileri

Kalkış, varış ve ara noktalar için diğer tüm konum işaretçileri haritada her zaman gösterilir. Örneğin, araç paylaşımı için bir araç bırakma konumu veya bir gönderi teslim konumunun haritada gösterilmesinden bağımsız olarak, durumu hakkında bilgi edindiniz.

JavaScript SDK'sını kullanmaya başlama

JavaScript SDK'sını kullanmadan önce Fleet Engine hakkında bilgi sahibi olun ve API anahtarı alma işlemiyle yapılır.

Araç paylaşımı seyahatini takip etmek için önce gezi kimliği hak talebi oluşturun.

Gezi kimliği hak talebi oluşturun

Seyahat konumu sağlayıcısını kullanarak bir geziyi takip etmek için gezi kimliği talebi ile bir JSON Web Token (JWT) oluşturun.

JWT yükünü oluşturmak için yetkilendirme bölümüne bir talep daha ekleyin tripid anahtarıyla yazıp değerini gezi kimliğine ayarlayın.

Aşağıdaki örnekte, gezi kimliğine göre izleme için jetonun nasıl oluşturulacağı gösterilmektedir:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "tripid": "tid_12345",
   }
}

Kimlik doğrulama jetonu alıcısı oluşturma

basılan bir jetonu almak için kimlik doğrulama jetonu alıcısı oluşturabilirsiniz uygun hak talepleriyledağıtılır. hesap sertifikası. Yalnızca jetonları basmak önemlidir ve sertifikalarınızı hiçbir zaman istemcilerle paylaşmayın. Aksi halde sisteminizin güvenliğini tehlikeye atabilir.

Alıcı bir veri yapısı döndürmelidir. söz şeklinde sarmalanmış iki alanla:

  • token dizesi.
  • expiresInSeconds sayısı. Bir jetonun süresi, bu süre içinde sona erer getiriliyor.

JavaScript Tüketici SDK'sı, kimlik doğrulama jetonuyla bir jeton ister alıcısını tanımlar:

  • Geçerli bir jetonu yoksa (örneğin, alıcıyı başka bir zamanda çağırmadığında) yeni bir sayfa yüklemesinde veya alıcı bir jeton geri döndürmediğinde.
  • Daha önce getirdiği jetonun süresi dolmuş.
  • Daha önce getirilen jetonun süresinin dolmasından itibaren bir dakika içinde olması.

Aksi takdirde, SDK daha önce verilmiş olan geçerli jetonu kullanır ve son derece önemlidir.

Aşağıdaki örnekte kimlik doğrulama jetonu alıcısının nasıl oluşturulacağı gösterilmektedir:

JavaScript

async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

Jetonları basmak için sunucu tarafı uç noktasını uygularken şunları göz önünde bulundurun:

  • Uç nokta, jeton için bir geçerlilik bitiş zamanı döndürmelidir; aşağıdaki örnekte yukarıda data.ExpiresInSeconds olarak verilir.
  • Kimlik doğrulama jetonu alıcısının geçerlilik süresini (saniye cinsinden, zamanı gelene kadar) örnekte gösterildiği gibi kitaplığa eklenir.
  • SERVER_TOKEN_URL, sağlayıcı uygulamanıza bağlıdır. Örnek sağlayıcının URL'leri şunlardır:
    • https://SERVER_URL/token/driver/VEHICLEID
    • https://SERVER_URL/token/consumer/TRIPID

HTML'den harita yükleme

Aşağıdaki örnekte, JavaScript SDK'sının nasıl yükleneceği gösterilmektedir belirtir. callback parametresi, initMap komutunu yürütür işlevini kullanın. defer özelliği, tarayıcının API yüklenirken sayfanızın geri kalanını oluşturmaya devam edin.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Gezi takibi

Bu bölümde, JavaScript SDK'sının nasıl kullanılacağı gösterilmektedir araç paylaşma veya teslimat seyahatini takip etme. Şunları yaptığınızdan emin olun: komut dosyası etiketinde belirtilen geri çağırma işlevinden kitaplığı yükleyin inceleyin.

Bir gezi konumu sağlayıcıyı örneklendirme

JavaScript SDK'sı bir konum sağlayıcıyı önceden tanımlar kullanıma sunuyoruz. Proje kimliğinizi ve bunu örneklendirmek için jeton fabrikanıza bir referans.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

Harita görünümünü başlatma

JavaScript SDK'sını yükledikten sonra başlat görüntüleyin ve bunu HTML sayfasına ekleyin. Sayfanızda bulunmalı harita görünümünü barındıran bir &lt;div&gt; öğesi. &lt;div&gt; öğesi aşağıdaki örnekte map_canvas olarak adlandırılmıştır.

Yarış koşullarını önlemek için konum sağlayıcının gezi kimliğini ayarlayın harita başlatıldıktan sonra çağrılan geri çağırmada kullanılır.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise, the 'ready' event above may 
// not fire. The user also has access to the mapView 
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Değişim etkinliklerini dinleme

Görev nesnesinden bir geziyle ilgili meta bilgileri alabilirsiniz konum sağlayıcıyı kullanabilirsiniz. Meta bilgiler, ETA ve teslim alma veya bırakmadan önce kalan mesafe Meta bilgilerdeki değişiklikler Bir update etkinliği tetikler. Aşağıdaki örnekte bu değişiklik etkinliklerinin nasıl dinleneceği gösterilmektedir.

JavaScript

locationProvider.addListener('update', e => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

TypeScript

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

Hataları işleme

Yolculuk bilgileri tetikleyicisi isteğinden eşzamansız olarak ortaya çıkan hatalar hata olayları. Aşağıdaki örnekte bu etkinliklerin nasıl dinleneceği gösterilmektedir izin vermiş olursunuz.

JavaScript

locationProvider.addListener('error', e => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

Not: Kitaplık çağrılarını try...catch blok şeklinde sarmaladığınızdan emin olun birçok teknik bulunur.

İzlemeyi durdur

Konum sağlayıcının seyahati izlemesini durdurmak için seyahat kimliğini şuradan kaldırın: konum sağlayıcı.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

Konum sağlayıcıyı harita görünümünden kaldırma

Aşağıdaki örnekte, bir konum sağlayıcının harita görünümünden nasıl kaldırılacağı gösterilmektedir.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Temel haritanın görünümünü ve tarzını özelleştirme

Haritalar bileşeninin görünümünü ve tarzını özelleştirmek için haritanızın stilini belirleme veya doğrudan kodda seçenekleri ayarlayarak bu süreci kolayca yürütebilirsiniz.

Bulut tabanlı harita stilini kullanma

Bulut tabanlı harita stilleri Google Haritalar'ı kullanan uygulamalarınız için harita stilleri oluşturmanıza ve düzenlemenize olanak tanır Google Cloud Console'dan alabilirsiniz. Harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. Alıcı: JavaScript SDK'sı haritanıza bir stil uygulayın, bir mapId ve diğer mapOptions JourneySharingMapView öğesini oluşturduğunuzda. mapId alanı değiştirilemez veya JourneySharingMapView örneklendirildikten sonra eklenir. Aşağıdakiler örnek, daha önce oluşturulmuş bir harita stilinin harita kimliği.

JavaScript

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

TypeScript

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

Kod tabanlı harita stili kullanma

Harita stilini özelleştirmenin bir başka yolu da haritadaki Şunları yaptığınızda mapOptions: JourneySharingMapView oluşturun.

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" }
        ]
      }
    ]
  }
});

İşaretçi özelleştirmelerini kullanma

JavaScript SDK'sı ile tıklayın. Bunu, JavaScript SDK daha sonra haritaya işaretçi eklemeden önce ve her İşaretçi güncellemesi.

En basit özelleştirme yöntemi, MarkerOptions aynı türdeki tüm işaretçilere uygulanacak bir nesnedir. Değişiklikler nesnede belirtilen her bir işaretçi oluşturulduktan sonra uygulanır, varsayılan seçeneklerin üzerine yazılır.

Daha gelişmiş bir seçenek de, bir özelleştirme işlevi belirtmektir. Özelleştirme fonksiyonları, işaretçilerin verilere dayalı olarak biçimlendirilmesinin yanı sıra, daha fazla işaretçilerle etkileşimini (ör. tıklama işleme). Özellikle Gezi ve Sipariş İlerleme durumu, verilerin depolanacağı nesnenin türü hakkındaki özelleştirme işlevine İşaretçi aracı, kalkış, ara nokta veya hedefi temsil eder. Bu sayede İşaretçi öğesinin mevcut durumuna göre değişecek şekilde işaretçi stili kendisi; örneğin, araç tamamlanmayana kadar kalan ara nokta sayısı pek de iyi olmadığını unutmayın. Hatta Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir, işaretçiyi bu bilgilere göre biçimlendirin.

JavaScript SDK'sı, FleetEngineTripLocationProviderOptions içinde aşağıdaki özelleştirme parametrelerini sağlar:

MarkerOptions kullanarak işaretçilerin stilini değiştirin

Aşağıdaki örnekte, bir araç işaretçisinin stilinin MarkerOptions nesnesini ifade eder. Herhangi bir öğenin stilini özelleştirmek için bu kalıbı daha önce listelenen işaretçi özelleştirmelerinden herhangi birini kullanarak bir işaretleyici seçin.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Özelleştirme işlevlerini kullanarak işaretçilerin stilini değiştirme

Aşağıdaki örnekte, bir araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. Takip et işaretçilerden birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu deseni özelleştirme parametreleri içerir.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

İşaretçilere tıklama işleme ekleme

Aşağıdaki örnekte, araç işaretçisine tıklama işlemenin nasıl ekleneceği gösterilmektedir. İşaretçilerden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu kalıbı izleyin özelleştirme parametreleri içerir.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Çoklu çizgi özelleştirmelerini kullanma

JavaScript SDK ile gezinin görünümünü ve tarzını da özelleştirebilirsiniz. veya rotayı haritada görebilirsiniz. Kitaplık, google.maps.Polyline aracın aktif veya kalan koordinatlarındaki her bir koordinat çifti için nesne path'ı seçin. Çoklu çizgi özelleştirmelerini belirterek Polyline nesnelerini biçimlendirebilirsiniz. İlgili içeriği oluşturmak için kullanılan daha sonra, bu özelleştirmeleri iki durumda uygular: verilerin ne zaman değiştiğine dikkat edin.

İşaretçi özelleştirmeye benzer şekilde, her bir sütun için PolylineOptions şununla eşleşen tüm Polyline nesnelerine uygulanır: oluşturabilir veya güncelleyebilir.

Benzer şekilde, bir özelleştirme işlevi de belirtebilirsiniz. Özelleştirme işlevleri Fleet Engine tarafından gönderilen verilere dayalı olarak nesnelerin ayrı ayrı stillandırılmasına olanak tanır. Bu fonksiyon, her nesnenin stilini Araç; örneğin, Polyline nesnesini daha koyu bir gölgeyle renklendirme veya araç yavaş hareket ettiğinde kalındığını gösterir. İsterseniz ve Polyline nesnesini buna göre biçimlendirin ekleyebilirsiniz.

Özelleştirmeleri, FleetEngineTripLocationProviderOptions. Aracın farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. seyahat etmiş, aktif olarak seyahat etmiş veya henüz seyahat edilmemiştir. İlgili içeriği oluşturmak için kullanılan parametreleri aşağıdaki gibidir:

PolylineOptions kullanarak Polyline nesnenin stilini değiştirin

Aşağıdaki örnekte, bir Polyline nesnesi için stilin nasıl yapılandırılacağı gösterilmektedir şununla: PolylineOptions Herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı kullanarak kapsamlı bir görünümünü elde edebilirsiniz.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Özelleştirme işlevlerini kullanarak Polyline nesnenin stilini değiştirin

Aşağıdaki örnekte, etkin Polyline nesnesinin görünüm. Herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın önce listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanarak.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      });
    }
  };

Polyline nesnenin görünürlüğünü kontrol edin

Varsayılan olarak tüm Polyline nesneleri görünür. Polyline nesnesi oluşturmak için görünmez, visible mülk:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Trafiğe duyarlı Polyline nesne oluştur

Fleet Engine, Search Ads 360'ın etkin ve kalan yolları için takip edilen araç. Bu bilgileri, Polyline stilini belirlemek için kullanabilirsiniz nesnelere göre çalışır:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineTripLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Araç veya konum işaretçisi için bir InfoWindow görüntüleyin

InfoWindow kullanabilirsiniz bir araç veya konum işaretçisiyle ilgili ek bilgiler görüntüleyin.

Aşağıdaki örnekte, InfoWindow oluşturma ve ekleme işleminin nasıl yapılacağı gösterilmektedir bir araç işaretçisine ekleyin:

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();

Otomatik sığdırmayı devre dışı bırak

Haritanın görüntü alanını otomatik olarak araca sığdırmasını durdurabilirsiniz ve öngörülen rotayı otomatik olarak sığdırmayı devre dışı bırakır. Aşağıdaki örnek seyahati ve sırayı yapılandırdığınızda otomatik sığdırmanın nasıl devre dışı bırakılacağını gösterir görüntüleyin.

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

Mevcut bir haritayı değiştirme

Şunu değiştirmek için JavaScript SDK'sını kullanabilirsiniz: İşaretçiler veya başka özelleştirmeler içeren mevcut bir harita yapabilirsiniz.

Örneğin, standart google.maps.Map içeren bir web sayfanız olduğunu varsayalım. bir işaretçinin gösterildiği varlık:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

JavaScript SDK'sını eklemek için:

  1. Kimlik doğrulama jetonu fabrikası için kod ekleyin.
  2. initMap() işlevinde bir konum sağlayıcı başlatın.
  3. initMap() işlevinde harita görünümünü başlatın. Görünüm, haritayı içerir.
  4. Özelleştirmenizi, harita görünümü başlatma işlemi için geri çağırma işlevine taşıyın.
  5. API yükleyicisine konum kitaplığını ekleyin.

Aşağıdaki örnekte yapılacak değişiklikler gösterilmektedir:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
async function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
    projectId: "YOUR_PROVIDER_ID",
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the SDK to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Uluru yakınlarında belirtilen kimlik için şimdi haritada oluşturulacak.