Bu bölümde, JavaScript filo izleme kitaplığının nasıl kullanılacağı gösterilmektedir bir filoyu görüntüleyebilirsiniz. Bu prosedürlerde, araç filosunu oluşturduğunuz ve izleme kitaplığını açıp bir harita yükledi. Ayrıntılar için bkz. JavaScript filo izleme kitaplığını ayarlama.
Bu dokümanda, bir projeyi görüntülerken aşağıdaki işlemleri yapabilirsiniz: filo:
- Filoyu takip etmeye başlayın.
- Etkinlikleri dinleyin ve hataları işleyin.
- İzlemeyi durdurma.
- Filoyu görüntülerken tek bir aracı takip etme.
Filoyu takip etmeye başla
Bir filoyu takip etmek için bir filo konum sağlayıcıyı örneklendirmeniz ve aşağıda açıklandığı gibi harita görünümü için konum kısıtlamalarını ayarlayın bölümlerini kontrol edin.
Filo konum sağlayıcı örneği göster
JavaScript filo izleme kitaplığı, şunları sağlayan bir konum sağlayıcı içerir: Fleet Engine'den birden fazla araç getirir.
Bunu örneklendirmek için şu adımları uygulayın:
Jeton alıcınıza bir referansla birlikte proje kimliğinizi kullanın.
Araç filtresi sorgusu kullanma Araç filtresi sorgusu, haritadaki araçlar. Filtre Fleet Engine'e iletilir.
- İsteğe bağlı hizmetler için
vehicleFilter
kullanın veListVehiclesRequest.filter
bölümünü inceleyin - Planlanmış görevler için
deliveryVehicleFilter
uygulamasını kullanın ve görevleri inceleyinListDeliveryVehiclesRequest.filter
- İsteğe bağlı hizmetler için
Sınırları araç ekranı içindir.
locationRestriction
hesabını kullanarak haritada araçların görüntüleneceği alanı sınırlandırın. Konum Bu ayar ayarlanana kadar sağlayıcı etkin değildir. Konum sınırlarını şu yöntemlerden birini kullanarak ayarlayabilirsiniz: oluşturucuya eklemeniz gerekir.Harita görünümünü başlatın.
Aşağıdaki örnekler, bir filo konum sağlayıcısının nasıl örneklendirileceğine dair
üzerine konuşacağız. Bu örneklerde, dönüşüm hunisinin orta kısmındaki
konum sağlayıcıyı yapmak için oluşturucudaki locationRestriction
etkin.
İstek üzerine geziler
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"',
});
Planlanmış görevler
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately make the location provider active.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately make the location provider active.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
Yapıcıdan sonra locationRestriction
ayarını yapmak için
locationProvider.locationRestriction
öğesini,
aşağıdaki JavaScript örneğinde gösterilmiştir.
// You can choose to not set locationRestriction in the constructor.
// In this case, the location provider *DOES NOT START* after this line, because
// no locationRestriction is set.
locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
... // not setting locationRestriction here
});
// You can then set the locationRestriction *after* the constructor.
// After this line, the location provider is active.
locationProvider.locationRestriction = {
north: 1,
east: 2,
south: 0,
west: 1,
};
Harita görünümünü kullanarak konum kısıtlaması ayarlama
Şu anki alanla eşleşecek şekilde locationRestriction
sınırları da ayarlayabilirsiniz
görebilirsiniz.
İstek üzerine geziler
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;
}
});
Planlanmış görevler
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 provider 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 provider will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
Harita görünümünü başlatma
Konum sağlayıcıyı oluşturduktan sonra, aynı şekilde takip edebilirsiniz.
JavaScript Yolculuğu Paylaşımı kitaplığını yükledikten sonra ilk kullanıma hazırla görüntüleyin ve bunu HTML sayfasına ekleyin. Sayfanızda bulunmalı harita görünümünü barındıran bir <div> öğesi. <div> öğesi aşağıdaki örneklerde map_canvas olarak adlandırılmıştır.=
İstek üzerine geziler
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
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],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Planlanmış görevler
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
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],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Etkinlikleri dinleme ve hataları işleme
Filoyu takip etmeye başladıktan sonra, etkinlik değişikliklerini izlemeniz gerekir ve ortaya çıkan hataları aşağıdaki bölümlerde açıklandığı şekilde ele almanız gerekir.
Değişim etkinliklerini izleyin
Araç nesnesinden filoyla ilgili meta bilgileri almak için konum sağlayıcı. Meta bilgilerde yapılan değişiklikler güncellemeyi tetikler. unutmayın. Meta bilgiler, navigasyon gibi araç özelliklerini içerir. durum, kalan mesafe ve özel özellikler.
Ayrıntılar için aşağıdaki kaynakları inceleyin:
Aşağıdaki örneklerde bu değişiklik etkinliklerinin nasıl dinleneceği gösterilmektedir.
İstek üzerine geziler
JavaScript
locationProvider.addListener('update', e => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
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);
}
}
});
Planlanmış görevler
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
Hataları bekleyin
Ayrıca, aşağıdaki adımları uygularken ortaya çıkan hataları dinlemek ve kullanabilirsiniz. Araç isteğinden eşzamansız olarak ortaya çıkan hatalar hata etkinliklerini tetikler.
Aşağıdaki örnekte şu sesi nasıl dinleyeceğiniz gösterilmektedir: bu etkinlikleri gözden geçirmeniz gerekir.
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);
});
Filoyu takip etmeyi durdur
Filoyu izlemeyi durdurmak için konum sağlayıcısının sınırlarını null, ve ardından, bu bölümde bulabilirsiniz.
Konum sağlayıcı sınırlarını null olarak ayarla
Konum sağlayıcının filoyu izlemesini durdurmak için sınırları belirleyin konum sağlayıcıyı null olarak ayarlayın.
İstek üzerine geziler
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
Planlanmış görevler
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);
Teslimat filosunu görüntülerken teslimat aracını izleme
Planlanmış görevler için Mobilite hizmetlerini kullanıyorsanız her ikiniz de belirli bir teslimat aracı için rotayı ve yaklaşan görevleri görüntüler aynı harita görünümünde yer alır. Bunu yapmak için hem bir Teslimat Filosu Konumu hem de Teslimat Aracı Konum Sağlayıcısı ve her ikisini de haritaya ekleyerek görünüm. Örneklendirildikten sonra, teslimat filosu konum sağlayıcı teslimat araçlarını haritada görebilirsiniz. Aşağıdaki örneklerde, örnek oluşturma için her iki konum sağlayıcısı:
JavaScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery 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 delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
TypeScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery 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 delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
Bir teslimat aracını takip etmek için işaretçi özelleştirmeyi kullanma
Teslimat aracının konum sağlayıcısının bir teslimat aracını takip etmesini etkinleştirmek için tıkladığınızda, aşağıdaki adımları izleyin:
Bir işaretçiyi özelleştirin ve bir tıklama işlemi ekleyin.
Yinelenen işaretçileri önlemek için işaretçiyi gizleyin.
Bu adımlarla ilgili örnekleri aşağıdaki bölümlerde bulabilirsiniz.
İşaretçiyi özelleştirme ve tıklama işlemi ekleme
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
İşaretçilerin yinelenmesini önlemek için işaretçiyi gizleyin
Oluşturmayı önlemek için işaretçiyi teslimat aracının konum sağlayıcısından gizleyin aynı araç için iki işaretçi vardır:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params: deliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};