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

Bu ürün veya özellik önizleme aşamasındadır (GKST öncesi). GKST öncesi ürünlere ve özelliklere verilen destek sınırlı olabilir ve özellikleri, GKST öncesi diğer sürümlerle uyumlu olmayabilir. GKST Öncesi Teklifler, Google Haritalar Platformu Hizmetine Özel Şartlar. Daha fazla bilgi için lansman aşaması açıklamaları bölümüne gidin.

JavaScript Filo İzleme Kitaplığı, büyük ölçekli sistemlerin konumlarını görselleştirmenize anlık olarak kontrol edebilirsiniz. Kitaplık, İsteğe Bağlı Yolculuklar ve Teslimatlar API Böylece araçların ve seyahatlerin görselleştirilmesini sağlayabilirsiniz. JavaScript Filosu İzleme Kitaplığı, yerine standart google.maps.Map varlığının ve veri bileşenlerinin yerine ilgili başka bir şey yok.

Bileşenler

JavaScript Filo İzleme Kitaplığı, JavaScript Filo İzleme Kitaplığı, ve seyahat masrafları için ham veri feed'leri veya uzaklığı belirir.

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

Filo İzleme harita görünümü bileşeni, araçların konumunu görselleştirir ve ve ara noktaları belirlemeye çalışın. Bir aracın rotası biliniyorsa, harita görünümü bileşeni tahmin edilen yolunda hareket ederken bu araç için animasyon oluşturur.

Konum sağlayıcılar

Konum sağlayıcılar, konum göndermek için Fleet Engine'de depolanan bilgilerle çalışır izlenen nesnelere ait bilgileri yolculuk paylaşımı haritasına ekleyin.

Araç konumu sağlayıcı

Araç konum sağlayıcısı tek bir aracın konum bilgilerini gösterir. Aracın konumu ve araca atanmış mevcut yolculukla ilgili bilgiler içeriyor kullanabilirsiniz.

Filo konumu sağlayıcısı

Filo konum sağlayıcı, birden fazla araç için 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östermek.

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

Görünürlük kuralları, izlenen bir konum nesnesinin Harita'da ne zaman görüneceğini belirler bir konum sağlayıcım var. Not - Özel veya türetilmiş bir konum kullanma sağlayıcı, görünürlük kurallarını değiştirebilir.

Araçlar

Araç, Fleet Engine'de oluşturulur oluşturulmaz görünür durumda araç_durumu Online olduğunda. Yani araç, araç henüz şu anda araca atanmış bir yolculuk olmadığında.

Ara nokta konum işaretçileri

Ara nokta konum işaretçisi, bir aracın yolculuğuna başlayan noktaları gösterir varış noktasıyla ve nihai hedefle bitmelidir. Referans noktası konumu işaretçiler aşağıdaki şekilde tanımlanabilir:

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

Planlanan araç ara noktaları, haritada başlangıç, ara ve ara noktaları olarak gösterilir Hedef işaretçileri.

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

JavaScript Filo İzleme Kitaplığı'nı kullanmadan önce, sitenizin API almak için Fleet Engine ile tuşuna basın. Ardından, gezi kimliği ve araç kimliği hak talebi oluşturun.

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

Araç konumunu kullanarak araçları takip etmek için provider, ziyaretle bir JSON Web Token (JWT) oluşturun Kimlik ve araç kimliği hak talebi.

JWT yükünü oluşturmak için yetkilendirme bölümüne bir talep daha ekleyin tripid ve vehicleid tuşlarını kullanın ve her bir anahtarın value değerini * olarak ayarlayın. Jeton, Fleet Engine Service Süper Kullanıcısı Cloud kullanılarak oluşturulmalıdır IAM rolü. Bunun Filo oluşturma, okuma ve değiştirme için geniş kapsamlı erişim izni verdiğini unutmayın Motor varlıkları ve yalnızca güvenilir kullanıcılarla paylaşılmalıdır.

Aşağıdaki örnekte araç bazında takip için jetonun nasıl oluşturulacağı ve görev:

{
  "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 Filo İzleme Kitaplığı, jeton 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, kitaplık daha önce verilmiş olan geçerli jetonu kullanır ve alıcıyı çağırmaz.

bir hizmet hesabı kullanarak sunucularınızda doğru hak talepleriyle e-posta yazacaksınız. Yalnızca web sitenizde jeton oluşturmanız ve sertifikalarınızı hiçbir zaman istemcilerle paylaşmayın. Aksi takdirde sisteminizin güvenliğini tehlikeye atabilir.

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

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

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 şunları göz önünde bulundurun:

• Uç nokta, jeton için bir geçerlilik bitiş zamanı döndürmelidir; yukarıdaki örnekte data.ExpiresInSeconds olarak verilir.
• Kimlik doğrulama jetonu alıcısının geçerlilik süresini (saniye cinsinden, zamanı) örnekte gösterildiği gibi kitaplığa eklenir.
• SERVER_TOKEN_URL, arka uç uygulamanıza bağlıdır. Bunlar örnek URL'ler:
  • 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, JavaScript Yolculuk Paylaşımı kitaplığının nasıl yükleneceği gösterilmektedir belirtir. callback parametresi, initMap işlevini yürütür yapmanız gerekir. defer özelliği, tarayıcının oluşturmaya devam etmesini sağlar sayfanızın geri kalanı otomatik olarak eklenir.

 <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 hedefi takip etmek için JavaScript Filo İzleme Kitaplığı'nın kullanabilirsiniz. Kitaplığı, şurada belirtilen geri çağırma işlevinden yüklediğinizden emin olun: komut dosyası etiketini eklediğinizden emin olun.

Araç konum sağlayıcı örneği gösterme

JavaScript Filo İzleme Kitaplığı, Açık için bir konum sağlayıcıyı önceden Demand Rides and Deliveries API. Proje kimliğinizi ve bunu örneklendirmek için jeton fabrikasını kullanır.

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 Yolculuğu Paylaşımı kitaplığını yükledikten sonra harita görünümünü başlatın ve bunu HTML sayfasına ekleyin. Sayfanız bir <div> öğesi içermelidir harita görünümünü korur. <div> öğesi <div> aşağıdaki örneğe bakın.

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şim etkinliklerini dinleme

vehicle nesnesinden bir araçla ilgili meta bilgileri alabilirsiniz konum sağlayıcıyı kullanabilirsiniz. Meta bilgiler, TVS’yi ve aracın bir sonraki teslim alınmadan veya bırakmasından önceki mesafe Meta verilerdeki değişiklikler bilgileri bir güncelleme etkinliğini tetikler. Aşağıdaki örnekte nasıl dinleyeceğiniz gösterilmektedir uygulayacaksınız.

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ı bekleyin

Araç bilgilerini tetikleme isteğinden eşzamansız olarak ortaya çıkan hatalar hata olayları. Aşağıdaki örnekte, bu etkinliklerin dört temel adımı ele alacağız.

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 kaldırın konum sağlayıcıdan çıkarabilirsiniz.

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, bir görüntülemek için JavaScript Yolculuğu Paylaşımı kitaplığının araç filosuyla ilgilidir. Kitaplığı geri çağırma işlevinden yüklediğinizden emin olun komut dosyası etiketinde belirtildiğinden emin olun.

Araç filosu konum sağlayıcı örneği gösterme

JavaScript Filo İzleme Kitaplığı, müşteriye ait On Demand Rides and Deliveries API'sinden birden fazla araç getirir. Şunu kullanın: proje kimliği ve bunu örneklendirmek için jeton alıcınıza bir referans.

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örüntülenen araçları filtrelemek için kullanılan bir sorguyu belirtir. Bu filtre doğrudan Fleet Engine'e iletilir. Görüntüleyin ListVehiclesRequest .

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. Konum izleme başlamaz.

Konum sağlayıcı oluşturulduktan sonra haritayı başlatın görüntüleyin.

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

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

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şim etkinliklerini dinleme

vehicles nesnesinden filoyla ilgili meta bilgileri alabilirsiniz konum sağlayıcıyı kullanabilirsiniz. Meta bilgiler, araç özelliklerini içerir. Örneğin, navigasyon durumu, sonraki ara noktaya olan mesafe ve özel nitelikler; bkz. referans belgeleri inceleyebilirsiniz. Meta bilgilerde yapılan değişiklik bir güncelleme etkinliğini tetikler. İlgili içeriği oluşturmak için kullanılan aşağıdaki örnekte, bu değişiklik etkinliklerinin nasıl dinleneceği gösterilmektedir.

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ı bekleyin

Araç filosuyla ilgili bilgi isteğinden dolayı eşzamansız olarak ortaya çıkan hatalar hata etkinliklerini tetikler. Bu etkinlikleri nasıl dinleyeceğinizi gösteren örnekler için Hataları dinleme bölümüne geçin.

İzlemeyi durdur

Konum sağlayıcının filoyu izlemesini durdurmak için konum sağlayıcıyı null olarak ayarla.

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

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

Haritalar bileşeninin görünümünü ve tarzını özelleştirmek için kullanarak veya doğrudan kodda seçenekleri ayarlayarak onu mümkün kılar.

Bulut tabanlı harita stilleri kullanın

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. İlgili içeriği oluşturmak için kullanılan harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. Şu öğelere bir stil uygulamak için: JavaScript Filo İzleme haritası, bir mapId JourneySharingMapView ekleyebilirsiniz. mapId alanı değiştirilemez veya JourneySharingMapView örneklendirildikten sonra eklenir. Aşağıdakiler örnek, daha önce oluşturulmuş bir harita stilinin harita kimliğiyle nasıl etkinleştirileceğini gösterir.

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 haritadaki mapOptions JourneySharingMapView ekleyebilirsiniz.

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 Filo İzleme Kitaplığı ile, reklamlarınızın görünümünü ve tarzını haritaya eklendi. Bunu işaretçi özelleştirmeleri belirterek, Filo İzleme Kitaplığı'nın haritaya işaretçi eklemeden önce uyguladığı ve her işaretçi güncellemesiyle birlikte.

Bir MarkerOptions aynı türdeki tüm işaretçilere uygulanacak bir nesnedir. Şurada belirtilen değişiklikler: nesne her işaretçi oluşturulduktan sonra uygulanır. seçenekleri vardır.

Daha gelişmiş bir seçenek olarak, bir özelleştirme işlevi belirtebilirsiniz. Özelleştirme işlevleri, işaretçilerin verilere göre ayarlanmasının yanı sıra, Örneğin işaretçilere etkileşim eklemek gibi. Özellikle, Filo İzleme, çalıştırılacak nesnenin türü hakkındaki verileri özelleştirme işlevine İşaretçi aracı, durağı veya görevi temsil eder. Böylece işaretçi stilinin işaretçi öğenin mevcut durumuna göre değişir; örneğin görev türü veya kalan durak sayısı. İsterseniz dışındaki kaynakları kullanabilir ve işaretçiye bu bilgilere göre stil verebilirsiniz.

Ayrıca, işaretçi görünürlüğünü filtrelemek için özelleştirme işlevlerini de kullanabilirsiniz. Bunun için şu numarayı arayın: setVisible(false) tıklayın.

Ancak, performans nedeniyle, kaliteyi artırmak için yerel konum sağlayıcıdaki filtreleme gibi FleetEngineFleetLocationProvider.vehicleFilter. Bununla birlikte, ek filtreleme işlevine ihtiyaç duyduğunuzda, filtreleme işlevini kullanabilirsiniz.

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 MarkerOptions nesne algılandı. Herhangi bir dosyanın stilini özelleştirmek için bu kalıbı yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak bir işaretçi seçer.

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 aşağıda listelenen özelleştirme parametrelerini dahil eder.

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, tıklama işlemenin bir araç işaretçisine 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 aşağıda listelenen özelleştirme parametrelerini dahil eder.

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, hangi araç işaretçilerinin görünür olduğunun nasıl filtreleneceği gösterilmektedir. İşaretçi özelleştirmesinden herhangi birini kullanarak işaretçileri filtrelemek için bu kalıbı izleyin parametrelerini dikkate alır.

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, Fleet Takipler, Gereç, takip edilen aracın rotası haritada gösterilir. Kitaplık, google.maps.Polyline aracın aktif veya kalan koordinatlarındaki her bir koordinat çifti için nesne path değerleridir. Ç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 tonda renklendirme veya araç yavaş hareket ettiğinde kalındığını gösterir. İsterseniz ve Polyline nesnesini buna göre biçimlendirin ekleyebilirsiniz.

Özelleştirmeleri, FleetEngineVehicleLocationProviderOptions. 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:

• takenPolylineCustomization seyahat edilmiş bir yol için;
• activePolylineCustomization aktif olarak dolaşan bir yol için;
• remainingPolylineCustomization bir yol haritası oluşturabilirsiniz.

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

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

URL parametrelerinin Google tarafından nasıl ele alınmasını istediğinizi belirtmek için InfoWindow bir araç veya konum işaretçisiyle ilgili ek bilgiler görüntüleyin.

Aşağıdaki örnekte, InfoWindow oluşturma ve bunu bir araç işaretçisi.

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

Haritayı otomatik olarak görüntü alanını araca sığdırmayı durdurabilirsiniz öngörülen rotayı otomatik olarak sığdırmayı devre dışı bırakır. Aşağıdaki örnekte şunlar gösterilmektedir: yolculuk paylaşımı haritasını yapılandırırken otomatik sığdırmayı devre dışı bırakma görünüm.

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ı değiştirebilirsiniz. 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 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 Yolculuk 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ı başlatın.
3. initMap() işlevinde harita görünümünü başlatın. Görünüm, haritası.
4. Özelleştirmenizi harita görünümü için geri çağırma işlevine taşıyın başlatma.
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
      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>

Oracle Park yakınında belirtilen kimlikle bir araç çalıştırıyorsanız bu araç haritası.