JavaScript Filosu İzleme Kitaplığı ile filonuzu takip edin

Bu ürün veya özellik Önizleme aşamasındadır (GKST öncesi). GKST öncesi ürün ve özelliklere verilen destek sınırlı olabilir ve bu ürün ve özelliklerde yapılan değişiklikler, GKST öncesi diğer sürümlerle uyumlu olmayabilir. GKST Öncesi Teklifler, Google Haritalar Platformu Hizmetine Özel Şartlar'ın kapsamındadır. Daha fazla bilgi için lansman aşamalarının açıklamalarını inceleyin.

JavaScript Filosu İzleme Kitaplığı, filolarınızdaki araçların konumlarını neredeyse gerçek zamanlı olarak görselleştirmenize olanak tanır. Kitaplık, araçların yanı sıra seyahatlerin de görselleştirilmesini sağlamak için İsteğe Bağlı Yolculuklar ve Teslimatlar API'sini kullanır. JavaScript Filosu İzleme Kitaplığı, standart bir google.maps.Map varlığının yerini alan bir JavaScript harita bileşeni ve Fleet Engine'e bağlanmak için veri bileşenleri içerir.

Bileşenler

JavaScript Filosu İzleme Kitaplığı, araçların ve yolculuk ara noktalarının görselleştirilmesini sağlayan bileşenlerin yanı sıra, varış süresi veya bir yolculuğa kalan mesafeyi gösteren ham veri feed'leri de sağlar.

Filo İzleme harita görünümü

Filo İzleme harita görünümü bileşeni, araçların konumunu ve gezi ara noktalarını görselleştirir. Bir aracın rotası biliniyorsa harita görünümü bileşeni, tahmin edilen yolu boyunca hareket ederken söz konusu aracı canlandırır.

Konum sağlayıcılar

Konum sağlayıcıları, takip edilen nesnelerin konum bilgilerini yolculuk paylaşım haritasına göndermek için Fleet Engine'de depolanan bilgilerle çalışır.

Araç konum sağlayıcı

Araç konum sağlayıcı, tek bir aracın konum bilgilerini gösterir. Araç, aracın konumu ve araca atanmış geçerli geziyle ilgili bilgileri içerir.

Filo konumu sağlayıcı

Filo konum sağlayıcısı, birden fazla aracın konum bilgilerini gösterir. Belirli bir aracı ve konumunu görüntülemek için filtre uygulayabilir veya filonun tamamı için araç konumlarını görüntüleyebilirsiniz.

Takip edilen konumların görünürlüğünü kontrol edin

Görünürlük kuralları, takip edilen bir konum nesnesinin bir Fleet Engine konum sağlayıcı için Harita'da ne zaman görüneceğini belirler. Not - Özel veya türetilmiş bir konum sağlayıcı kullanmak görünürlük kurallarını değiştirebilir.

Araçlar

Araç, Fleet Engine'de oluşturulduğu anda görünür ve tool_state Online olduğunda görünür. Bu sayede, araca geçerli bir gezi olmasa bile araç görünür durumda olur.

Referans noktası konum işaretçileri

Ara nokta konumu işaretçisi, bir aracın yolculuğundaki başlangıç noktasından başlayıp son varış noktasıyla sona eren noktaları gösterir. Ara nokta konumu işaretçileri aşağıdaki şekilde tanımlanabilir:

• Kalkış noktası - araç seyahatinin başlangıç konumunu gösterir
• Orta - Araç yolculuğu için duraklamaları gösterir
• Varış noktası - araç yolculuğu için son konumu gösterir

Planlanmış araç ara noktaları haritada kalkış, ara ve hedef işaretleri olarak gösterilir.

JavaScript Filo İzleme Kitaplığı'nı kullanmaya başlayın

JavaScript Filo İzleme Kitaplığı'nı kullanmadan önce Fleet Engine ve API anahtarı alma hakkında bilgi sahibi olduğunuzdan emin olun. Ardından, gezi kimliği ve araç kimliği hak talebi oluşturun.

Gezi kimliği ve araç kimliği hak talebi oluştur

Araç konumu sağlayıcı'yı kullanarak araçları izlemek için seyahat kimliği ve araç kimliği talebi içeren bir JSON Web Token (JWT) oluşturun.

JWT yükünü oluşturmak için yetkilendirme bölümünde tripid ve vehicleid anahtarlarıyla ek bir talep ekleyin ve her anahtarın value değerini * olarak ayarlayın. Jeton, Fleet Engine Hizmeti Süper Kullanıcısı Cloud IAM rolü kullanılarak oluşturulmalıdır. Bunun Fleet Engine varlıklarını oluşturmak, okumak ve değiştirmek için geniş kapsamlı erişim verdiğini ve yalnızca güvenilir kullanıcılarla paylaşılması gerektiğini unutmayın.

Aşağıdaki örnekte, araca ve göreve göre izleme için nasıl jeton oluşturulacağı gösterilmektedir:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

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

JavaScript Filosu İzleme Kitaplığı, aşağıdakilerden herhangi biri doğru olduğunda kimlik doğrulama jetonu alıcısını kullanarak bir jeton ister:

• Geçerli bir jetonu yoktur (ör. yeni bir sayfa yüklemesinde alıcıyı çağrılmadığında veya alıcı bir jetonla geri dönmediğinde).
• Daha önce getirdiği jetonun süresi doldu.
• Daha önce getirilen jetonun geçerlilik süresi dolduktan sonra bir dakika içinde.

Aksi takdirde, kitaplık daha önce yayınlanmış ve halen geçerli olan jetonu kullanır ve alıcıyı çağırmaz.

Projeniz için bir hizmet hesabı sertifikası kullanarak sunucularınızda uygun hak talepleriyle oluşturulmuş bir jetonu almak için kimlik doğrulama jetonu alıcısı oluşturabilirsiniz. Yalnızca sunucularınızda jeton oluşturmanız ve sertifikalarınızı hiçbir istemcide paylaşmamanız önemlidir. Aksi takdirde, sisteminizin güvenliğini tehlikeye atabilirsiniz.

Alıcı, Promise içine sarmalanmış iki alana sahip bir veri yapısı döndürmelidir:

• token dizesi.
• Sayı expiresInSeconds. Bir jetonun süresi, getirildikten sonra bu süre içinde dolar.

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

JavaScript

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.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

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

• Uç nokta, jeton için bir süre sonu zamanı döndürmelidir. Yukarıdaki örnekte, data.ExpiresInSeconds olarak verilmiştir.
• Kimlik doğrulama jetonu alıcısı, örnekte gösterildiği gibi süre sonu zamanını (saniye cinsinden) kitaplığa iletmelidir.
• SERVER_TOKEN_URL, arka uç uygulamanıza bağlıdır. Örnek URL'ler şunlardır:
  • https://SERVER_URL/token/driver/VEHICLE_ID
  • https://SERVER_URL/token/consumer/TRIP_ID
  • https://SERVER_URL/token/fleet_reader

HTML'den harita yükleme

Aşağıdaki örnekte, belirli bir URL'den JavaScript Journey Paylaşım kitaplığının nasıl yükleneceği gösterilmektedir. callback parametresi, API yüklendikten sonra initMap işlevini yürütür. defer özelliği, API yüklenirken tarayıcının sayfanızın geri kalanını oluşturmaya devam etmesini sağlar.

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

Araç takip etme

Bu bölümde, bir aracı takip etmek için JavaScript Filosu İzleme Kitaplığı'nın nasıl kullanılacağı gösterilmektedir. Kodunuzu çalıştırmadan önce komut dosyası etiketinde belirtilen geri çağırma işlevinden kitaplığı yüklediğinizden emin olun.

Araç konumu sağlayıcı gösterme

JavaScript Filo İzleme Kitaplığı, İsteğe Bağlı Oyuncaklar ve Teslimatlar API'si için bir konum sağlayıcısını önceden tanımlar. Jeton fabrikanızı somutlaştırmak için proje kimliğinizi ve bir referans kullanın.

JavaScript

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

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

JavaScript Journey Paylaşım kitaplığını yükledikten sonra harita görünümünü başlatın ve HTML sayfasına ekleyin. Sayfanızda, harita görünümünü barındıran bir <div> öğesi bulunmalıdır. <div> öğesi, aşağıdaki örnekte map_canvas olarak adlandırılmıştır.

JavaScript

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

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-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('Times Square, New York, NY');
mapView.map.setZoom(14);

Değişiklik etkinliklerini dinle

Konum sağlayıcıyı kullanarak vehicle nesnesinden araçla ilgili meta bilgileri alabilirsiniz. Meta bilgiler, tahmini varış süresini ve aracın bir sonraki alış veya bırakmasından önce kalan mesafeyi içerir. Meta bilgilerde yapılan değişiklikler bir update etkinliğini tetikler. Aşağıdaki örnekte bu değişiklik etkinliklerinin nasıl dinleneceği gösterilmektedir.

JavaScript

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

TypeScript

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

Hataları dinleme

Araç bilgileri istenirken eşzamansız olarak ortaya çıkan hatalar hata etkinliklerini tetikler. Aşağıdaki örnekte, hataları işlemek için bu etkinliklerin nasıl dinleneceği gösterilmektedir.

JavaScript

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

TypeScript

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

İzlemeyi durdur

Konum sağlayıcının aracı izlemesini durdurmak için araç kimliğini konum sağlayıcıdan kaldırın.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

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

Araç filosunu görüntüleme

Bu bölümde, araç filosunu görüntülemek için JavaScript Journey Paylaşım kitaplığının nasıl kullanılacağı gösterilmektedir. Kodunuzu çalıştırmadan önce komut dosyası etiketinde belirtilen geri çağırma işlevinden kitaplığı yüklediğinizden emin olun.

Bir araç filosu konum sağlayıcısı örneği verme

JavaScript Filo İzleme Kitaplığı, On Demand Rides and Deliveries API'den birden fazla aracı getiren bir konum sağlayıcıyı önceden tanımlar. Proje kimliğinizi ve jeton alıcınızı örneklendirmek için bir referans kullanın.

JavaScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

vehicleFilter, haritada gösterilen araçları filtrelemek için kullanılan bir sorguyu belirtir. Bu filtre doğrudan Fleet Engine'e iletilir. Desteklenen biçimler için ListVehiclesRequest bölümüne bakın.

locationRestriction, araçların haritada gösterileceği alanı sınırlandırır. Ayrıca, konum izlemenin etkin olup olmadığını da kontrol eder. Bu ayarlanana kadar konum izleme başlamaz.

Konum sağlayıcı oluşturulduğunda harita görünümünü başlatın.

Harita görünümünü kullanarak konum kısıtlaması ayarlama

locationRestriction sınırları, harita görünümünde görünen alanla eşleşecek şekilde yapılandırılabilir.

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Değişiklik etkinliklerini dinle

Konum sağlayıcıyı kullanarak filoyla ilgili meta bilgileri vehicles nesnesinden alabilirsiniz. Meta bilgiler; navigasyon durumu, sonraki ara noktaya mesafe ve özel özellikler gibi araç özelliklerini içerir. Daha fazla ayrıntı için referans belgelerine bakın. Meta bilgilerde yapılan değişiklikler bir güncelleme etkinliğini tetikler. Aşağıdaki örnek, bu değişiklik etkinliklerinin nasıl dinleneceğini gösterir.

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

Hataları dinleme

Araç filosu bilgileri istenirken eşzamansız olarak ortaya çıkan hatalar hata etkinliklerini tetikler. Bu etkinliklerin nasıl dinleneceğini gösteren örnekler için Hataları dinleme bölümüne bakın.

İzlemeyi durdur

Konum sağlayıcının filoyu izlemesini durdurmak için konum sağlayıcının sınırlarını null (boş) olarak ayarlayın.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

Esas 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 bulut tabanlı araçları kullanarak veya seçenekleri doğrudan kod içinde ayarlayarak haritanızı biçimlendirin.

Bulut tabanlı harita stili kullanma

Bulut tabanlı harita stilleri, Google Cloud Console'dan Google Haritalar'ı kullanan tüm uygulamalarınız için kodunuzda herhangi bir değişiklik yapmadan harita stilleri oluşturmanıza ve düzenlemenize olanak tanır. Harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. JavaScript Filo İzleme haritanıza stil uygulamak için, JourneySharingMapView oluştururken bir mapId belirtin. JourneySharingMapView örneklendikten sonra mapId alanı değiştirilemez veya eklenemez. Aşağıdaki örnekte, daha önce oluşturulmuş bir harita stilinin harita kimliğiyle nasıl etkinleştirileceği gösterilmektedir.

JavaScript

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

TypeScript

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

Kod tabanlı harita stili kullanma

Harita stilini özelleştirmenin bir başka yolu da, JourneySharingMapView oluştururken mapOptions ayarını yapmaktır.

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 kullan

JavaScript Filosu İzleme Kitaplığı ile, haritaya eklenen işaretçilerin görünümünü ve tarzını özelleştirebilirsiniz. İşaretçi özelleştirmelerini belirterek bunu yapabilirsiniz. Filo İzleme Kitaplığı, haritaya işaretçi eklemeden önce ve her işaretçi güncellemesinde bunları uygular.

Aynı türdeki tüm işaretçilere uygulanacak bir MarkerOptions nesnesi belirterek basit bir özelleştirme oluşturabilirsiniz. Nesnede belirtilen değişiklikler, her bir işaretçi oluşturulduktan sonra uygulanır ve varsayılan seçeneklerin üzerine yazılır.

Daha gelişmiş bir seçenek olarak özelleştirme işlevi belirtebilirsiniz. Özelleştirme işlevleri, işaretçilerin verilere dayalı olarak biçimlendirilmesini ve tıklama işleme gibi işaretçilere etkileşim özelliğinin eklenmesini sağlar. Filo Takip, özellikle de işaretçinin temsil ettiği nesne türüyle (araç, durak veya görev) ilgili verileri özelleştirme işlevine iletir. Bu şekilde işaretçi stilinin, işaretçi öğesinin mevcut durumuna (ör. kalan durak sayısı veya görev türü) göre değişmesi sağlanır. Hatta Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir ve işaretçinin stilini bu bilgilere göre belirleyebilirsiniz.

Ayrıca, işaretçi görünürlüğünü filtrelemek için özelleştirme işlevlerini kullanabilirsiniz. Bunu yapmak için işaretçiden setVisible(false) çağrısı yapın.

Ancak performans nedeniyle konum sağlayıcıda FleetEngineFleetLocationProvider.vehicleFilter gibi yerel filtrelemeyle filtreleme yapmanızı öneririz. Bununla birlikte, ek filtreleme işlevine ihtiyacınız olduğunda özelleştirme işlevini kullanarak filtreleme uygulayabilirsiniz.

Filo İzleme kitaplığı aşağıdaki özelleştirme parametrelerini sağlar:

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

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

Aşağıdaki örnekte, bir araç işaretçisinin stilinin bir MarkerOptions nesnesiyle nasıl yapılandırılacağı gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

Aşağıdaki örnekte, bir araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

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

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

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

Aşağıdaki örnekte, bir araç işaretçisine tıklama tutma yeri ekleme işlemi gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçiye tıklama işlemi eklemek için bu kalıbı uygulayın.

JavaScript

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

TypeScript

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

Görünür işaretçileri filtrele

Aşağıdaki örnekte, görünür araç işaretçilerinin nasıl filtreleneceği gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak tüm işaretçileri filtrelemek için bu kalıbı izleyin.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Bir aracı takip ederken çoklu çizgi özelleştirmelerini kullanın

Filo İzleme Kitaplığı ile, takip edilen aracın haritadaki rotasının görünümünü ve tarzını da özelleştirebilirsiniz. Kitaplık, aracın aktif veya kalan yolundaki her koordinat çifti için bir google.maps.Polyline nesnesi oluşturur. Çoklu çizgi özelleştirmeleri belirterek Polyline nesnelerinin stilini belirleyebilirsiniz. Daha sonra kitaplık, bu özelleştirmeleri iki durumda uygular: Nesneleri haritaya eklemeden önce ve nesneler için kullanılan veriler değiştiğinde.

İşaretçi özelleştirmeye benzer şekilde, oluşturulan veya güncellendiğinde eşleşen Polyline nesnelerinin tümüne uygulanacak bir PolylineOptions grubu belirtebilirsiniz.

Aynı şekilde, bir özelleştirme işlevi de belirtebilirsiniz. Özelleştirme işlevleri, Fleet Engine tarafından gönderilen verilere dayalı olarak nesnelerin stilini ayrı ayrı düzenlemenizi sağlar. Bu işlev, her bir nesnenin stilini aracın mevcut durumuna göre değiştirebilir. Örneğin, Polyline nesnesini daha koyu bir gölgeye boyayabilir veya araç yavaş hareket ederken nesneyi kalınlaştırabilir. Hatta Fleet Engine dışındaki kaynaklarla birleştirme yapabilir ve Polyline nesnesini bu bilgilere göre şekillendirebilirsiniz.

FleetEngineVehicleLocationProviderOptions bölümünde sağlanan parametreleri kullanarak özelleştirmeleri belirtebilirsiniz. Daha önce seyahat edilmiş, aktif olarak seyahatte veya henüz gidilmemiş araç yolculuğunda farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. Parametreler aşağıdaki gibidir:

• Daha önce katılmış olan bir yol için takenPolylineCustomization;
• Aktif olarak seyahat eden bir yol için activePolylineCustomization;
• remainingPolylineCustomization, henüz geçmemiş bir yol için.

PolylineOptions kullanarak Polyline nesnenin stilini değiştirin

Aşağıdaki örnekte, PolylineOptions ile bir Polyline nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen çoklu çizgi özelleştirmelerinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

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

TypeScript

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

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

Aşağıdaki örnekte, etkin bir Polyline nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir Polyline nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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 nesnelerin görünürlüğünü kontrol et

Varsayılan olarak Polyline nesnenin tümü görünürdür. Bir Polyline nesnesini görünmez yapmak için visible özelliğini ayarlayın:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Trafiğe duyarlı Polyline nesne oluştur

Fleet Engine, takip edilen araç için aktif ve kalan yollara ait trafik hızı verilerini döndürür. Bu bilgileri kullanarak Polyline nesnelerini trafik hızlarına göre biçimlendirebilirsiniz:

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 =
  FleetEngineVehicleLocationProvider.
      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) => {
    FleetEngineVehicleLocationProvider.
        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 =
  FleetEngineVehicleLocationProvider.
      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: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Bir araç veya konum işaretçisi için InfoWindow görüntüleyin

Bir araç veya konum işaretçisi hakkında ek bilgi görüntülemek için InfoWindow kullanabilirsiniz.

Aşağıdaki örnekte, InfoWindow öğesi oluşturma ve araç işaretçisine ekleme işlemi gösterilmektedir.

JavaScript

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 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});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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

Otomatik sığdırma özelliğini devre dışı bırakarak haritanın, görüntü alanını araca ve öngörülen rotaya otomatik olarak sığdırmasını durdurabilirsiniz. Aşağıdaki örnekte, yolculuk paylaşımı harita görünümünü yapılandırırken otomatik sığdırmanın nasıl devre dışı bırakılacağı gösterilmektedir.

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

İşaretçiler veya diğer özelleştirmeler içeren mevcut bir haritayı bu özelleştirmeleri kaybetmeden değiştirebilirsiniz.

Örneğin, üzerinde işaretçi bulunan standart google.maps.Map varlığına sahip bir web sayfanız olduğunu varsayalım:

<!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 Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // The map, initially centered at Mountain View, CA.
        var map = new google.maps.Map(document.getElementById("map"));
        map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });

        // The marker, now positioned at Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, 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>

Filo İzleme'yi içeren JavaScript Journey Paylaşım kitaplığını eklemek için:

1. Kimlik doğrulama jetonu fabrikası için kod ekleyin.
2. initMap() işlevinde bir konum sağlayıcıyı başlatın.
3. initMap() işlevinde harita görünümünü başlatın. Görünümde harita bulunur.
4. Harita görünümünü başlatma işlemi için özelleştirmenizi geri çağırma işlevine taşıyın.
5. Konum kitaplığını API yükleyicisine 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
      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. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          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
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // The map, initially centered at Mountain View, CA.
          var map = mapView.map;
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
          // The marker, now positioned at Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, 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 journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
    ></script>
  </body>
</html>

Belirtilen kimlikle Oracle Park yakınlarında bir araç kullanıyorsanız bu araç haritada oluşturulur.