Bu sayfa, Cloud Translation API ile çevrilmiştir.

JavaScript'te gezi izleme

Platform seçin: Android iOS JavaScript

Bir geziyi takip ettiğinizde tüketici uygulamanız, tüketiciye uygun aracın konumunu gösterir. Bunu yapmak için uygulamanızın yolculuğu takip etmeye başlaması, yolculuk sırasında yolculuk ilerleme durumunu güncellemesi ve yolculuk tamamlandığında yolculuğu takip etmeyi bırakması gerekir.

Bu belgede, bu sürecin aşağıdaki temel adımları ele alınmaktadır:

Harita oluşturma
Haritayı başlatma ve paylaşılan yolculuğu görüntüleme
Güncellemeleri takip etme ve seyahat ilerleme durumunu izleme
Gezileri takip etmeyi bırakma
Seyahat hatalarını giderme

Harita oluşturma

Web uygulamanızda bir kargo alımını veya teslimatını takip etmek için bir harita yüklemeniz ve yolculuğunuzu izlemeye başlamak üzere Consumer SDK'yı başlatmanız gerekir. Yeni bir harita yükleyebilir veya mevcut bir haritayı kullanabilirsiniz. Ardından, harita görünümünün izlenen öğenin konumuna karşılık gelmesi için başlatma işlevini kullanarak Consumer SDK'yı oluşturursunuz.

Google Maps JavaScript API'yi kullanarak yeni bir harita yükleme

Yeni bir harita oluşturmak için web uygulamanıza Google Maps JavaScript API'yi yükleyin. Aşağıdaki örnekte, Google Maps JavaScript API'nin nasıl yükleneceği, SDK'nın nasıl etkinleştirileceği ve başlatma kontrolünün nasıl tetikleneceği gösterilmektedir.

callback parametresi, API yüklendikten sonra initMap işlevini çalıştırır.
defer özelliği, API yüklenirken tarayıcının sayfanızın geri kalanını oluşturmaya devam etmesini sağlar.

Consumer SDK'yı başlatmak için initMap işlevini kullanın. Örneğin:

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

Mevcut bir haritayı yükleme

Google Maps JavaScript API ile oluşturulmuş mevcut bir haritayı da (ör. halihazırda kullandığınız bir harita) yükleyebilirsiniz.

Örneğin, aşağıdaki HTML kodunda tanımlandığı şekilde bir işaretçinin gösterildiği standart bir google.maps.Map öğesi içeren bir web sayfanız olduğunu varsayalım. Bu, geri çağırmanın sonundaki aynı initMap işlevini kullanarak haritanızı gösterir:

    <!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 Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // 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 Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * 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>

Mevcut bir haritayı değiştirme

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

Örneğin, işaretçinin gösterildiği standart bir google.maps.Map varlığa sahip bir web sayfanız varsa haritayı değiştirebilir ve işaretçiyi koruyabilirsiniz. Bu bölümde, bu işlemin adımları açıklanmaktadır.

Haritayı değiştirmek ve özelleştirmeleri korumak için aşağıdaki adımları kullanarak HTML sayfanıza yolculuk paylaşımı ekleyin. Bu adımlar, aşağıdaki örnekte de numaralandırılmıştır:

Kimlik doğrulama jetonu fabrikası için kod ekleyin.
initMap() işlevinde bir konum sağlayıcı başlatın.
Harita görünümünü initMap() işlevinde başlatın. Görünümde harita var.
Özelleştirmenizi, harita görünümü başlatma için geri arama işlevine taşıyın.
Konum kitaplığını API yükleyiciye ekleyin.

Yapılacak değişiklikler aşağıdaki örnekte gösterilmiştir. Uluru yakınlarında belirtilen kimliğe sahip bir gezi düzenliyorsanız bu gezi artık haritada gösterilir:

    <!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 Pier 39 in San Francisco
        var pier39 = {lat: 37.809326, lng: -122.409981};
        // 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 Pier 39
        var marker = new google.maps.Marker({position: pier39, 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>

Haritayı başlatma ve seyahat ilerleme durumunu gösterme

Bir gezi başladığında uygulamanızın bir gezi konumu sağlayıcısı oluşturması ve ardından gezi ilerleme durumunu paylaşmaya başlamak için bir harita başlatması gerekir. Örnekler için aşağıdaki bölümlere bakın.

Seyahat konum sağlayıcısı oluşturma

JavaScript SDK'sında Fleet Engine Ridesharing API için önceden tanımlanmış bir konum sağlayıcı bulunur. Proje kimliğinizi ve jeton fabrikanıza bir referansı kullanarak jeton fabrikanızı oluşturun.

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

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

JavaScript SDK'sı yüklendikten sonra harita görünümünü başlatın ve HTML sayfasına ekleyin. Sayfanızda harita görünümünü içeren 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 trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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 choose.
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.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // 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 starts 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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Güncellemeleri takip etme ve seyahat ilerleme durumunu izleme

Uygulamanız etkinlikleri dinlemeli ve yolculuk ilerledikçe gezi ilerleme durumunu güncellemelidir. Konum sağlayıcıyı kullanarak görev nesnesinden bir geziyle ilgili meta bilgilerini alabilirsiniz. Meta bilgiler, tahmini varış zamanını ve teslim alma veya bırakma işleminden önceki kalan mesafeyi içerir. Meta bilgilerinde yapılan değişiklikler güncelleme etkinliğini 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);
});

Gezileri takip etmeyi bırakma

Gezi sona erdiğinde, konum sağlayıcının geziyi izlemesini durdurmanız gerekir. Bunu yapmak için gezi kimliğini ve konum sağlayıcıyı kaldırmanız gerekir. Örnekler için aşağıdaki bölümlere bakın.

Seyahat kimliğini konum sağlayıcıdan kaldırma

Aşağıdaki örnekte, gezi kimliğinin konum sağlayıcıdan nasıl kaldırılacağı gösterilmektedir.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

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

Aşağıdaki örnekte, 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);

Seyahat hatalarını giderme

Seyahat bilgisi isteğinde bulunmaktan kaynaklanan 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 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);
});

Sırada ne var?

Harita stilini belirleme

JavaScript'te gezi izleme Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Harita oluşturma

Google Maps JavaScript API'yi kullanarak yeni bir harita yükleme

Mevcut bir haritayı yükleme

Mevcut bir haritayı değiştirme

Haritayı başlatma ve seyahat ilerleme durumunu gösterme

Seyahat konum sağlayıcısı oluşturma

JavaScript

TypeScript

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

JavaScript

TypeScript

Güncellemeleri takip etme ve seyahat ilerleme durumunu izleme

JavaScript

TypeScript

Gezileri takip etmeyi bırakma

Seyahat kimliğini konum sağlayıcıdan kaldırma

JavaScript

TypeScript

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

JavaScript

TypeScript

Seyahat hatalarını giderme

JavaScript

TypeScript

Sırada ne var?

JavaScript'te gezi izleme