JavaScript Gönderim İzleme Kitaplığı, Fleet Engine'de izlenen araçların ve ilgilenilen konumların konumlarını görselleştirmenizi sağlar. Kitaplık, standart bir google.maps.Map
varlığının ve Fleet Engine'e bağlanmak için veri bileşenlerinin yerini alan bir JavaScript harita bileşeni içerir. JavaScript Gönderim İzleme Kitaplığı'nı kullanarak, web uygulamanızdan özelleştirilebilir, animasyonlu bir gönderi takibi deneyimi sunabilirsiniz.
Bileşenler
JavaScript Gönderim İzleme Kitaplığı, bir hedefe giden araç ve rotanın görselleştirilmesi için bileşenlerin yanı sıra sürücünün TVS'si veya gidilmesi gereken kalan mesafe için ham veri feed'leri sağlar.
Gönderim İzleme harita görünümü
Harita görünümü bileşeni, araçların ve hedeflerin konumunu görselleştirir. Bir aracın rotası biliniyorsa harita görünümü bileşeni, tahmin edilen yol boyunca hareket eden aracı canlandırır.
Gönderim konumu sağlayıcı
Bir kargo konumu sağlayıcısı, takip edilen nesnelerin konum bilgilerini ilk ve son kilometre sevkiyatı takibi için kargo takip haritasına gönderir.
Aşağıdakileri takip etmek için kargo konumu sağlayıcısını kullanabilirsiniz:
- Bir gönderinin teslim alınma veya teslimat konumu.
- Teslimat aracının konumu ve rotası.
İzlenen konum nesneleri
Konum sağlayıcı, araçlar ve hedefler gibi nesnelerin konumunu izler.
Hedef konumu
Varış konumu, yolculuğun sona erdiği konumdur. Sevkiyat takibi için, planlanan görev konumudur.
Araç konumu
Araç konumu, bir aracın takip edilen konumudur. İsteğe bağlı olarak araç için bir rota da yer alabilir.
Kimlik doğrulama jetonu alıcısı
Fleet Engine'de depolanan konum verilerine erişimi kontrol etmek üzere sunucunuzda Fleet Engine için bir JSON Web Token (JWT) para kazanma hizmeti uygulamanız gerekir. Ardından, konum verilerine erişimin kimliğini doğrulamak için JavaScript Yolculuğu Paylaşım Kitaplığı'nı kullanarak web uygulamanızın bir parçası olarak bir kimlik doğrulama jetonu alıcısı uygulayın.
Stil seçenekleri
İşaretçi ve çoklu çizgi stilleri, haritadaki izlenen konum nesnelerinin görünümünü ve tarzını belirler. Varsayılan stili, web uygulamanızın stiline uyacak şekilde değiştirmek için özel stil seçeneklerini kullanabilirsiniz.
Takip edilen konumların görünürlüğünü kontrol et
Bu bölümde, harita üzerinde izlenen nesnelerin görünürlük denetimleri açıklanmaktadır. Bu kurallar iki nesne kategorisi için geçerlidir:
- Konum işaretçisi
- Görev verileri
Konum işaretçisinin görünürlüğü
Kalkış ve varış için tüm konum işaretçileri haritada her zaman gösterilir. Örneğin, teslimatın durumundan bağımsız olarak kargo teslimat konumu her zaman haritada gösterilir.
Görev verilerinin görünürlüğü
Bu bölümde, araç konumu ve kalan rota gibi görev verileri için geçerli olan varsayılan görünürlük kuralları açıklanmaktadır. Birçok görevi özelleştirebilirsiniz, ama hepsini özelleştiremezsiniz:
- Kullanılamayan görevler: Bu görevlerin görünürlüğünü özelleştiremezsiniz.
- Etkin araç görevleri: Bu tür görevleri özelleştirebilirsiniz.
- Etkin olmayan araç görevleri -- Bu görevlerin görünürlüğünü özelleştiremezsiniz.
Kullanılabilir olmayan görevler
Takip edilen göreve giden rotada en az bir "kullanılamayan" görev varsa (örneğin, sürücünün ara verdiği veya aracın yakıt doldurma işlemi yapılıyorsa) araç görünmez. Tahmini varış süresi ve tahmini görev tamamlanma süresi hala var.
Etkin araç görevleri
TaskTrackingInfo
nesnesi, Gönderim İzleme Kitaplığı'nda görünür hale getirilebilecek bir dizi veri öğesi sağlar. Varsayılan olarak bu alanlar, görev araca atandığında ve araç görevden 5 durak uzakta olduğunda görünür. Görünürlük, görev tamamlandığında veya iptal edildiğinde sona erer. Alanlar aşağıdaki gibidir:
- Rota çoklu çizgileri
- Tahmini varış süresi
- Tahmini görev tamamlanma süresi
- Göreve kalan sürüş mesafesi
- Kalan durak sayısı
- Araç konumu
Fleet Engine'de görev oluştururken veya güncellerken bir görev için TaskTrackingViewConfig
değerini ayarlayarak görünürlük yapılandırmasını göreve göre özelleştirebilirsiniz. Bu işlem, bağımsız veri öğelerinin ne zaman kullanılabilir olacağını belirleyen kurallar oluşturur. Bu kurallar, aşağıdaki ölçütlere (aşağıda görünürlük seçeneği olarak belirtilmiştir) dayalı olabilir:
- Kalan durak sayısı
- Tahmini varış saatine kadar olan süre
- Kalan sürüş mesafesi
- Her zaman görünür
- Hiçbir zaman görünür değil
Her bir veri öğesinin yalnızca bir görünürlük seçeneğiyle ilişkilendirilebileceğini unutmayın. VEYA ya da VE kullanarak ölçütleri birleştirmek mümkün değildir.
Aşağıda, bir özelleştirme örneği verilmiştir. Bu özelleştirme kuralları şunlardır:
- Araç 3 durak içindeyse rota çoklu çizgilerini gösterin.
- Kalan sürüş mesafesi 5.000 metreden kısaysa TVS'yi gösterin.
- Kalan aktarma sayısını hiçbir zaman gösterme.
- Diğer her bir alan, araç görevin 5 durağından uzakta olduğunda gösterilen varsayılan görünürlüğü korur.
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Ayrıca destek ekibiyle iletişime geçerek projenizin varsayılan görünürlük yapılandırmasını özelleştirebilirsiniz.
Rota çoklu çizgileri ve araç konumu görünürlük kuralları:
Rota çoklu çizgileri görünür olduğunda, araç konumu da görünmelidir. Aksi takdirde, araç konumu çoklu çizgilerin sonunda gösterilebilir. Bu, rota çoklu çizgilerinin daha az kısıtlayıcı bir görünürlük seçeneğine sahip olamayacağı anlamına gelir.
Geçerli bir rota çoklu çizgileri / araç konumu görünürlüğü kombinasyonu sağlamak için bu kurallara uyulması gerekir:
Rota çoklu çizgileri ve araç konumu aynı görünürlük seçeneği türüne sahip olduğunda:
- Görünürlük seçeneğinde kalan durak sayısı, TVS'ye kalan süre veya kalan sürüş mesafesi varsa rota çoklu çizgileri, araç konumu için bu görünürlük seçeneği için ayarlanan değerden düşük veya bu değere eşit bir değer sağlamalıdır. Aşağıda bununla ilgili bir örnek verilmiştir:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
- Rota çoklu çizgileri her zaman görünür bir görünürlük seçeneğine sahipse araç konumu da her zaman görünür bir görünürlük seçeneği sağlamalıdır.
- Araç konumunun hiçbir zaman görülemeyen bir görünürlük seçeneği varsa, rota çoklu çizgileri de hiçbir zaman görülmeyen bir görünürlük seçeneği de sunmalıdır.
Rota çoklu çizgileri ve araç konumu farklı görünürlük seçeneği türlerine sahipse, araç konumu yalnızca görünürlük seçeneklerinin her ikisi de sağlandığında görünür.
Aşağıda bununla ilgili bir örnek verilmiştir:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, }
Bu örnekte, araç konumu yalnızca kalan durak sayısı en az 3 VE kalan sürüş mesafesi en az 3.000 metreyse görünür.
JavaScript Yolculuk Paylaşımı Kitaplığı'nı kullanmaya başlama
JavaScript Yolculuğu Paylaşım Kitaplığı'nı kullanmadan önce Fleet Engine'e ve API anahtarı edinmeye aşina olduğunuzdan emin olun.
Bir yayını takip etmek için önce izleme kimliği hak talebi oluşturun.
İzleme kimliği hak talebi oluşturun
Gönderim konumu sağlayıcısını kullanarak bir gönderiyi takip etmek için izleme kimliği talebiyle bir JSON Web Token (JWT) oluşturun.
JWT yükünü oluşturmak için yetkilendirme bölümüne anahtar trackingid parametresini içeren ek bir talep ekleyin. Değerini kargo izleme kimliğine ayarlayın.
Aşağıdaki örnekte, izleme kimliğiyle izleme için jetonun nasıl oluşturulacağı gösterilmektedir:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
"sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"trackingid": "tid_54321",
}
}
Kimlik doğrulama jetonu alıcısı oluşturma
Projeniz için bir hizmet hesabı sertifikası kullanarak sunucularınızda uygun hak talepleriyle basılmış bir jetonu almak amacıyla kimlik doğrulama jetonu getirme aracı oluşturabilirsiniz. Sunucularınızda yalnızca jetonları bastırmanız ve sertifikalarınızı hiçbir istemcide paylaşmamanız önemlidir. Aksi takdirde, sisteminizin güvenliği tehlikeye girer.
Alıcı, iki alan içeren bir Vaat içinde sarmalanmış bir veri yapısı döndürmelidir:
token
dizesi.expiresInSeconds
sayısı. Bir jetonun süresi, getirildikten bu süre sonra dolar.
JavaScript Gönderim İzleme Kitaplığı, aşağıdakilerden herhangi biri doğru olduğunda kimlik doğrulama jetonu alıcısı aracılığıyla bir jeton ister:
- Yeni bir sayfa yüklemesinde alıcıyı çağırmadığı veya alıcının jeton döndürmediği durumlarda geçerli bir jetonu yoktur.
- 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.
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 geçerlilik bitiş zamanı döndürmelidir; yukarıdaki örnekte
data.ExpiresInSeconds
olarak verilmiştir. - Kimlik doğrulama jetonu alıcısı, örnekte gösterildiği gibi geçerlilik süresini (getirilme zamanından itibaren saniye cinsinden) kitaplığa geçirmelidir.
- SERVER_TOKEN_URL, arka uç uygulamanıza bağlıdır. Örnek uygulama arka ucunun URL'leri şunlardır:
- https://
SERVER_URL
/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://
SERVER_URL
/token/delivery_consumer/TRACKING_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
HTML'den harita yükleme
Aşağıdaki örnekte, JavaScript Gönderim İzleme Kitaplığı'nın belirtilen bir URL'den nasıl yükleneceği gösterilmektedir. callback parametresi, initMap
işlevini API yüklendikten sonra 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" defer></script>
Kargo takip etme
Bu bölümde, bir kargonun teslim alınması veya teslimatının takip edilmesi için JavaScript Gönderim İ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.
Bir gönderim konumu sağlayıcı örneği gösterme
JavaScript Gönderim İzleme Kitaplığı, Fleet Engine Deliveries API için önceden bir konum sağlayıcı tanımlar. Projenizi örneklendirmek için proje kimliğinizi ve jeton fabrikanıza bir referans kullanın.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-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 HTML sayfasına ekleyin. Sayfanızda harita görünümünü barındıran bir <div> öğesi bulunmalıdır. Aşağıdaki örnekte, <div> öğesi map_canvas olarak adlandırılmıştır.
Yarış koşullarını önlemek için harita başlatıldıktan sonra çağrılan geri çağırmada konum sağlayıcının izleme kimliğini ayarlayın.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
İzleme Kimliği
Konum sağlayıcıya sağlanan takip kimliği, birden fazla göreve karşılık gelebilir (örneğin, aynı paket için teslim alma ve teslimat görevi veya birkaç başarısız teslimat denemesi). Sevkiyat izleme haritasında gösterilmek üzere bir görev seçildi. Gösterilecek görev şu şekilde belirlenir:
- Tam olarak bir tane açık teslim alma görevi varsa gösterilir. Birden fazla açık teslim alma görevi varsa hata oluşur.
- Tam olarak bir tane açık teslim görevi varsa gösterilir. Birden fazla açık teslimat görevi varsa hata oluşur.
- Kapalı teslim görevleri varsa:
- Tam olarak bir tane kapalı teslim görevi varsa gösterilir.
- Birden fazla kapalı teslim görevi varsa en yakın sonuç zamanına sahip olan görev gösterilir.
- Birden fazla kapalı teslim görevi varsa ve bunların hiçbirinin sonuç zamanı yoksa bir hata oluşturulur.
- Kapalı teslim alma görevleri varsa:
- Tam olarak bir tane kapalı teslim alma görevi varsa gösterilir.
- Birden fazla kapalı teslim alma görevi varsa en yakın sonuç zamanına sahip olan görev gösterilir.
- Birden fazla kapalı teslim görevi varsa ve bunların hiçbirinin sonuç zamanı yoksa hata oluşturulur.
- Aksi takdirde herhangi bir görev gösterilmez.
Değişim etkinliklerini dinleme
Konum sağlayıcıyı kullanarak görev izleme bilgi nesnesinden bir görevle ilgili meta bilgileri alabilirsiniz. Meta bilgiler arasında TVS, kalan aktarma sayısı ve teslim alma veya teslimattan önce kalan mesafe yer alır. 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.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
Hataları işleme
Gönderim bilgileri isteğinden eşzamansız olarak kaynaklanan hatalar hata etkinliklerini tetikler. Aşağıdaki örnekte, hataların işlenmesi 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);
});
Not: Beklenmeyen hataları işlemek için kitaplık çağrılarını try...catch
bloklarında sarmaladığınızdan emin olun.
İzlemeyi durdur
Konum sağlayıcının kargoyu izlemesini durdurmak için konum sağlayıcıdan izleme kimliğini kaldırın.
JavaScript
locationProvider.trackingId = '';
TypeScript
locationProvider.trackingId = '';
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 bulut tabanlı araçlar kullanarak veya doğrudan kodda seçenekleri ayarlayarak haritanızın stilini ayarlayın.
Bulut tabanlı harita stilleri kullanın
Bulut tabanlı harita stilleri, Google Haritalar'ı kullanan tüm uygulamalarınız için kodunuzda herhangi bir değişiklik yapmanıza gerek kalmadan harita stilleri oluşturmanıza ve düzenlemenize olanak tanır.
Harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. JavaScript Gönderim İzleme haritanıza bir stil uygulamak için JourneySharingMapView
öğesini oluştururken bir mapId
belirtin. JourneySharingMapView
örneklendikten sonra mapId
alanı değiştirilemez veya eklenemez. Aşağıdaki örnekte, önceden 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'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
Kod tabanlı harita stili kullanma
Harita stilini özelleştirmenin diğer bir yolu, JourneySharingMapView
öğesini oluştururken mapOptions
ayarlamaktı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 kullanma
JavaScript Gönderim İ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. Gönderim İzleme Kitaplığı, işaretçileri haritaya eklemeden önce ve her işaretçi güncellemesinde uygulanır.
En basit özelleştirme işlemi, aynı türdeki tüm işaretçilere uygulanacak bir MarkerOptions
nesnesi belirtmektir. Nesnede belirtilen değişiklikler, her bir işaretçi oluşturulduktan sonra varsayılan seçeneklerin üzerine yazılarak uygulanır.
Daha gelişmiş bir seçenek de, bir özelleştirme işlevi belirtmektir. Özelleştirme işlevleri, işaretçilerin verilere göre stillandırılmasına ve tıklama işleme gibi işaretçilere etkileşim eklenmesine olanak tanır. Özellikle Gönderim İzleme, işaretçinin temsil ettiği nesne türüyle (araç veya hedef) ilgili verileri özelleştirme işlevine iletir. Bu daha sonra, işaretçi stilinin, işaretçi öğesinin mevcut durumuna (örneğin, hedefe kadar kalan planlanmış durak sayısı) göre değişmesine olanak tanır. Hatta Fleet Engine dışındaki kaynaklardan gelen verilerle birleşebilir ve işaretçinin stilini bu bilgilere göre belirleyebilirsiniz.
Gönderim İzleme kitaplığı, FleetEngineShipmentLocationProviderOptions
içinde aşağıdaki özelleştirme parametrelerini sağlar:
MarkerOptions
kullanarak işaretçilerin stilini değiştirin
Aşağıdaki örnekte, bir araç işaretçisinin stilinin MarkerOptions
nesnesiyle nasıl yapılandırılacağı gösterilmektedir. Yukarıda listelenen işaretçi özelleştirmelerinden herhangi birini kullanarak
herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
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. Yukarıda listelenen işaretçi özelleştirme parametrelerinden birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
İşaretçilere tıklama işleme ekleme
Aşağıdaki örnekte, araç işaretçisine tıklama işlemenin nasıl ekleneceği gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu kalıbı uygulayın.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Çoklu çizgi özelleştirmelerini kullanma
Kargo Takibi Kitaplığı ile kargonun haritadaki rotasının görünümünü ve tarzını da özelleştirebilirsiniz. Kitaplık, gönderinin etkin veya kalan yolundaki her bir koordinat çifti için bir google.maps.Polyline
nesnesi oluşturur.
Çoklu çizgi özelleştirmelerini belirterek Polyline
nesnelerini biçimlendirebilirsiniz. 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şturulduğunda veya güncellendiğinde eşleşen tüm Polyline
nesnelerine uygulanacak bir PolylineOptions
grubu belirtebilirsiniz.
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 işlev, gönderimin mevcut durumuna göre her bir nesnenin stilini değiştirebilir. Örneğin, Polyline
nesnesini daha derin bir gölgeyle renklendirebilir veya araç yavaş hareket ettiğinde kalınlaştırılabilir. Hatta Fleet Engine dışındaki kaynaklardan da
birleştirebilir ve Polyline
nesnesinin stilini bu bilgilere
göre belirleyebilirsiniz.
FleetEngineShipmentLocationProviderOptions
içinde sağlanan parametreleri kullanarak özelleştirmeleri belirtebilirsiniz.
Aracın seyahatinde zaten ilerlemiş, aktif olarak seyahat eden veya henüz seyahat edilmemiş olan farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. Parametreler aşağıdaki gibidir:
- Daha önce katılmış bir yol için
takenPolylineCustomization
; - Aktif olarak seyreden bir yol için
activePolylineCustomization
; remainingPolylineCustomization
, henüz seyahat edilmemiş bir yol için.
PolylineOptions
kullanarak Polyline
nesnenin stilini değiştirin
Aşağıdaki örnekte, PolylineOptions
ile Polyline
nesnesi için stilin 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
nesnenin 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 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.taskTrackingInfo.remainingDrivingDistanceMeters;
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: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
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. Bir Polyline
nesnesini görünmez yapmak için visible
özelliğini ayarlayın:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Araç veya konum işaretçisi için bir InfoWindow
görüntüleyin
Bir araç veya konum işaretçisiyle ilgili ek bilgileri görüntülemek için InfoWindow
kullanabilirsiniz.
Aşağıdaki örnekte InfoWindow
oluşturma ve bunu araç işaretçisine ekleme gösterilmektedir:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
Otomatik sığdırmayı devre dışı bırak
Otomatik sığdırmayı devre dışı bırakarak haritanın görüntü alanını otomatik olarak araca ve öngörülen rotaya sığdırmasını durdurabilirsiniz. Aşağıdaki örnekte, yolculuk paylaşımı harita görünümünü yapılandırdığınızda otomatik sığdırmayı nasıl devre dışı bırakacağınız gösterilmektedir.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
Mevcut bir haritayı değiştirme
İşaretçiler veya diğer özelleştirmeler içeren mevcut bir haritayı bu özelleştirmeleri kaybetmeden değiştirmek için JavaScript Gönderim İzleme Kitaplığı'nı kullanabilirsiniz.
Örneğin, işaretçinin gösterildiği standart bir google.maps.Map
varlığı içeren 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 Uluru
var uluru = {lat: -25.344, lng: 131.036};
// 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 Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
JavaScript Yolculuk Paylaşımı kitaplığını eklemek için:
- Kimlik doğrulama jetonu fabrikası için kod ekleyin.
initMap()
işlevinde bir konum sağlayıcı başlatın.initMap()
işlevinde harita görünümünü başlatın. Görünüm, haritayı içerir.- Özelleştirmenizi, harita görünümü başlatma işlemi için geri çağırma işlevine taşıyın.
- 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.
locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
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.trackingId = TRACKING_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// 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 Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Uluru yakınında belirtilen kimliğe sahip takip edilen bir paketiniz varsa bu paket artık haritada oluşturulur.