JavaScript Gönderi İzleme Kitaplığı, Fleet Engine'de izlenen araçların ve önemli yerlerin konumlarını görselleştirmenize olanak tanır. Kitaplık, standart bir google.maps.Map
varlığı ve Fleet Engine'e bağlanmak için veri bileşenlerinin yerine kullanılabilen bir JavaScript harita bileşeni içerir. JavaScript Gönderim İzleme Kitaplığı'nı kullanarak, web uygulamanızdan özelleştirilebilir, animasyonlu gönderim takibi deneyimi sunabilirsiniz.
Bileşenler
JavaScript Gönderim İzleme Kitaplığı, bir hedefe doğru ilerlerken araç ve rotanın görselleştirilmesini sağlayan bileşenlerin yanı sıra, sürücünün tahmini varış süresi veya sürüş için kalan mesafe için ham veri feed'leri de sağlar.
Gönderim Takibi harita görünümü
Harita görünümü bileşeni, araçların ve varış noktalarının konumunu görselleştirir. Bir aracın rotası biliniyorsa harita görünümü bileşeni tahmin edilen yol boyunca hareket ederken aracı canlandırır.
Gönderim konumu sağlayıcı
Bir gönderim konumu sağlayıcısı, ilk ve son kilometre gönderi takibi için, takip edilen nesnelerin konum bilgilerini gönderim izleme haritasına iletir.
Aşağıdakileri takip etmek için gönderim konumu sağlayıcısını kullanabilirsiniz:
- Bir gönderinin 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 bittiği konumdur. Sevkiyat takibi için bu, planlanan görev konumudur.
Araç konumu
Aracın konumu, aracın izlenen konumudur. İsteğe bağlı olarak araç için bir rota içerebilir.
Kimlik doğrulama jetonu alıcısı
Fleet Engine'de depolanan konum verilerine erişimi kontrol etmek için sunucunuzda Fleet Engine için bir JSON Web Token (JWT) madencilik hizmeti uygulamanız gerekir. Ardından, konum verilerine erişim kimliğini doğrulamak için JavaScript Yolculuğu Paylaşım Kitaplığı'nı kullanarak web uygulamanızın parçası olarak bir kimlik doğrulama jetonu alıcısı uygulayın.
Stil seçenekleri
İşaretçi ve çoklu çizgi stilleri, harita üzerinde 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 edin
Bu bölümde, harita üzerinde izlenen nesneler için 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ış noktaları için tüm konum işaretçileri her zaman haritada gösterilir. Örneğin, teslimatın durumundan bağımsız olarak gönderimin teslimat konumu her zaman harita üzerinde 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 değil:
- 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.
Görevlerin kullanılamaması
Takip edilen göreve giden rotada en az bir kullanılamama görevi varsa (örneğin, sürücü mola veriyor veya araç yakıt kazanıyorsa) araç görünmez. Tahmini varış saati ve tahmini görev tamamlanma süresi hâlâ mevcuttur.
Etkin araç görevleri
TaskTrackingInfo
nesnesi, Kargo İzleme Kitaplığı'nda gösterilebilecek çeşitli veri öğeleri sağlar. Varsayılan olarak bu alanlar, görev araca atandığında ve araç görevin 5 durak yakınında olduğunda görünür. Görev tamamlandığında veya iptal edildiğinde görünürlük sona erer. Alanlar aşağıdaki gibidir:
- Rota çoklu çizgileri
- Tahmini varış süresi
- Tahmini görev tamamlanma süresi
- Görev için 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
özelliğini ayarlayarak görünürlük yapılandırmasını görev bazında özelleştirebilirsiniz. Bu, aşağıdaki ölçütlere (aşağıdaki görünürlük seçeneği olarak atıfta bulunulmuştur) dayalı olabilecek bağımsız veri öğelerinin ne zaman kullanılabilir olacağına dair kurallar oluşturur:
- Kalan durak sayısı
- Tahmini varış saatine kadar geçen süre
- Kalan sürüş mesafesi
- Her zaman görünür
- Hiçbir zaman görünür değil
Her veri öğesinin yalnızca bir görünürlük seçeneğiyle ilişkilendirilebileceğini unutmayın. OR veya VE VE kullanılarak ölçütler birleştirilemez.
Aşağıda bir özelleştirme örneği verilmiştir. Bu özelleştirmenin 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 durdurma sayısını hiçbir zaman gösterme.
- Diğer her alan, araç görevin 5 durak yakınında olduğunda gösterilme varsayılan görünürlüğünü korur.
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Projenizin varsayılan görünürlük yapılandırmasını destek ekibiyle iletişime geçerek de ö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ünür olmalıdır. Aksi takdirde, araç konumu çoklu çizgilerin sonu ile belirtilebilir. 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ği kalan durma sayısı, TVS'ye kadar geçen süre veya kalan sürüş mesafesi ise rota çoklu çizgileri, araç konumuna yönelik bu görünürlük seçeneği için ayarlanan değerden küçük veya bu değere eşit bir değer sağlamalıdır. Aşağıda bir örnek verilmiştir:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
- Rota çoklu çizgilerinin her zaman görünür olma seçeneği varsa araç konumu da her zaman görünür bir görünürlük seçeneği sağlamalıdır.
- Araç konumunun asla görünür olmayan bir görünürlük seçeneği varsa rota çoklu çizgilerinin de asla görünür olmayan bir görünürlük seçeneği sağlaması gerekir.
Rota çoklu çizgileri ve araç konumu farklı görünürlük seçeneğine sahip olduğunda, araç konumu yalnızca görünürlük seçeneklerinin her ikisi de karşılandığında görünür olur.
Aşağıda 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österilir.
JavaScript Yolculuğu Paylaşım Kitaplığı'nı kullanmaya başlama
JavaScript Yolculuğu Paylaşım Kitaplığı'nı kullanmadan önce Fleet Engine hakkında bilgi sahibi olduğunuzdan ve API anahtarı alma hakkında bilgi sahibi olduğunuzdan emin olun.
Teslimatı takip etmek için önce takip kimliği hak talebi oluşturun.
İzleme kimliği hak talebi oluştur
Gönderim konumu sağlayıcısını kullanarak bir gönderimi takip etmek için izleme kimliği talebiyle bir JSON Web Token (JWT) oluşturun.
JWT yükünü oluşturmak için trackingid anahtarıyla yetkilendirme bölümüne ek bir hak talebi ekleyin. Parametre değerini gönderim izleme kimliğine ayarlayın.
Aşağıdaki örnekte, izleme kimliğine göre izleme için nasıl jeton oluşturulacağı gösterilmektedir:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "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 taleplere sahip bir jetonu almak için kimlik doğrulama jetonu alıcısı oluşturabilirsiniz. Sunucularınızda yalnızca jeton basmanız ve sertifikalarınızı hiçbir zaman hiçbir istemcide paylaşmamanız önemlidir. Aksi takdirde, sisteminizin güvenliğini tehlikeye atarsınız.
Alıcı, Promise içine sarmalanmış iki alanlı bir veri yapısı döndürmelidir:
token
dizesi.- Sayı
expiresInSeconds
. Bir jetonun süresi, getirildikten sonra bu süre içinde 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:
- Geçerli bir jetonu yoktur (ör. yeni bir sayfa yüklemesinde alıcıyı çağrılmadığında veya alıcı bir jetonla geri dönmediğinde).
- Daha önce getirdiği jetonun süresi doldu.
- Daha önce getirilen jetonun geçerlilik süresi dolduktan sonra bir dakika içinde.
Aksi takdirde, kitaplık daha önce yayınlanmış ve halen geçerli olan jetonu kullanır ve alıcıyı çağırmaz.
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 süresi döndürmelidir. Yukarıdaki örnekte
data.ExpiresInSeconds
olarak verilmiştir. - Kimlik doğrulama jetonu alıcısı, örnekte gösterildiği gibi süre sonu zamanını (saniye cinsinden) kitaplığa geçirmelidir.
- SERVER_TOKEN_URL, arka uç uygulamanıza bağlıdır. Örnek uygulama arka ucunun URL'leri aşağıda verilmiştir:
- 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, API yüklendikten sonra initMap
işlevini yürütür. defer özelliği, tarayıcının API yüklenirken 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>
Bir gönderiyi takip et
Bu bölümde, bir gönderimin teslim alınmasını veya teslimatını takip etmek 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ıyı gösterme
JavaScript Gönderim İzleme Kitaplığı, Fleet Engine Deliveries API için bir konum sağlayıcısını önceden tanımlar. Jeton fabrikanızı örneklendirmek için proje kimliğinizi ve 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 Journey Paylaşım kitaplığını yükledikten sonra harita görünümünü başlatın ve HTML sayfasına ekleyin. Sayfanızda, harita görünümünü barındıran bir <div> öğesi bulunmalıdır. 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ğırmadaki konum sağlayıcısı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 izleme kimliği, aynı kargo için bir teslim alma ve teslimat görevi ya da birkaç başarısız teslimat girişimi gibi çeşitli görevlere karşılık gelebilir. Sevkiyat takip haritasında gösterilmek üzere bir görev seçilir. Gösterilecek görev şu şekilde belirlenmiştir:
- Tam olarak bir tane açık teslim alma görevi varsa bu görev gösterilir. Birden fazla açık teslim alma görevi varsa bir hata oluşur.
- Tam olarak bir tane açık teslim görevi varsa bu görev gösterilir. Birden fazla açık teslimat görevi varsa bir hata oluşur.
- Kapalı teslim görevleri varsa:
- Tam olarak bir adet kapalı teslim görevi varsa bu görev gösterilir.
- Birden fazla kapalı teslimat görevi varsa teslimat zamanı en yeni olan görev gösterilir.
- Hiçbirisinin sonuç zamanı olmayan birden fazla kapalı teslim görevi varsa bir hata oluşur.
- Kapalı teslim alma görevleri varsa:
- Tam olarak bir tane kapalı teslim alma görevi varsa bu görev gösterilir.
- Birden fazla kapalı teslim alma görevi varsa en güncel teslim zamanı olan görev gösterilir.
- Hiçbirisinin sonuç zamanı olmayan birden fazla kapalı teslim alma görevi varsa bir hata oluşur.
- Aksi takdirde hiçbir görev gösterilmez.
Değişiklik etkinliklerini dinle
Konum sağlayıcıyı kullanarak görev izleme bilgi nesnesinden bir görevle ilgili meta bilgileri alabilirsiniz. Bu meta bilgiler arasında TVS, kalan durak sayısı ve araç teslim alınmadan ya da 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 istenirken eşzamansız olarak oluşan hatalar hata etkinliklerini tetikler. Aşağıdaki örnekte, hataları işlemek için bu etkinliklerin nasıl dinleneceği gösterilmektedir.
JavaScript
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
Not: İstenmeyen hataları işlemek için kitaplık çağrılarını try...catch
bloklarına sığdırdığınızdan emin olun.
İzlemeyi durdur
Konum sağlayıcının gönderimi 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);
Esas haritanın görünümünü ve tarzını özelleştirme
Haritalar bileşeninin görünüm ve tarzını özelleştirmek için bulut tabanlı araçları kullanarak veya seçenekleri doğrudan kod içinde ayarlayarak haritanızı biçimlendirin.
Bulut tabanlı harita stili kullanma
Bulut tabanlı harita stilleri, Google Cloud Console'dan Google Haritalar'ı kullanan tüm uygulamalarınız için kodunuzda herhangi bir değişiklik yapmadan harita stilleri oluşturmanıza ve düzenlemenize olanak tanır.
Harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. JavaScript Gönderim İzleme haritanıza bir stil uygulamak için JourneySharingMapView
oluştururken bir mapId
belirtin. JourneySharingMapView
örneklendikten sonra mapId
alanı değiştirilemez veya eklenemez. Aşağıdaki örnekte, daha önce oluşturulmuş bir harita stilinin harita kimliğiyle nasıl etkinleştirileceği gösterilmektedir.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// 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
değerini 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 kullan
JavaScript Gönderim İzleme Kitaplığı ile, haritaya eklenen işaretçilerin görünümünü ve tarzını özelleştirebilirsiniz. Bunu, işaretçileri haritaya eklemeden önce ve her işaretçi güncellemesinde, Gönderim İzleme Kitaplığı'nın uyguladığı işaretçi özelleştirmeleri belirleyerek yapabilirsiniz.
En basit özelleştirme, 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 uygulanır ve varsayılan seçeneklerin üzerine yazılır.
Daha gelişmiş bir seçenek de özelleştirme işlevi belirtmektir. Özelleştirme işlevleri, işaretçilerin verilere dayalı olarak şekillendirilmesinin yanı sıra tıklama işleme gibi işaretçilere etkileşim eklenmesine olanak tanır. Gönderim İzleme özellikle, işaretçinin temsil ettiği nesne türüyle (araç veya hedef) ilgili verileri özelleştirme işlevine iletir. Bu şekilde işaretçi stilinin, işaretçi öğesinin mevcut durumuna (örneğin, hedefe kadar kalan planlanan durak sayısı) göre değişmesine izin verilir. Hatta Fleet Engine dışındaki kaynaklardan gelen verilerle birleştirebilir ve işaretçinin stilini bu bilgilere göre belirleyebilirsiniz.
Kargo İzleme kitaplığı, FleetEngineShipmentLocationProviderOptions
'te 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 bir 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ştirin
Aşağıdaki örnekte, bir araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.
JavaScript
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, bir araç işaretçisine tıklama tutma yeri ekleme işlemi gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir işaretçiye tıklama işlemi eklemek için bu kalıbı uygulayın.
JavaScript
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
Gönderim İzleme Kitaplığı ile gönderim rotasının görünümünü ve tarzını harita üzerinde de özelleştirebilirsiniz. Kitaplık, gönderinin aktif veya kalan yolundaki her koordinat çifti için bir google.maps.Polyline
nesnesi oluşturur.
Çoklu çizgi özelleştirmeleri belirterek Polyline
nesnelerinin stilini belirleyebilirsiniz. Daha sonra kitaplık, bu özelleştirmeleri iki durumda uygular: Nesneleri haritaya eklemeden önce ve nesneler için kullanılan veriler değiştiğinde.
İşaretçi özelleştirmeye benzer şekilde, oluşturulduğunda veya güncellendiğinde eşleşen tüm Polyline
nesnelerine uygulanacak bir PolylineOptions
grubu belirtebilirsiniz.
Aynı şekilde, bir özelleştirme işlevi de belirtebilirsiniz. Özelleştirme işlevleri, Fleet Engine tarafından gönderilen verilere dayalı olarak nesnelerin stilini ayrı ayrı düzenlemenizi sağlar.
Bu işlev, gönderimin mevcut durumuna göre her bir nesnenin stilini değiştirebilir. Örneğin, Polyline
nesnesini daha koyu bir gölgeye boyayabilir veya araç yavaş hareket ederken nesneyi kalınlaştırabilir. Hatta Fleet Engine dışındaki kaynaklarla birleştirme yapabilir ve Polyline
nesnesini bu bilgilere göre şekillendirebilirsiniz.
FleetEngineShipmentLocationProviderOptions
bölümünde sağlanan parametreleri kullanarak özelleştirmeleri belirtebilirsiniz.
Daha önce seyahat edilmiş, aktif olarak seyahatte veya henüz gidilmemiş araç yolculuğunda farklı yol durumları için özelleştirmeler ayarlayabilirsiniz. Parametreler aşağıdaki gibidir:
- Daha önce katılmış olan bir yol için
takenPolylineCustomization
; - Aktif olarak seyahat eden bir yol için
activePolylineCustomization
; remainingPolylineCustomization
, henüz geçmemiş bir yol için.
PolylineOptions
kullanarak Polyline
nesnenin stilini değiştirin
Aşağıdaki örnekte, PolylineOptions
ile bir Polyline
nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir.
Daha önce listelenen çoklu çizgi özelleştirmelerinden herhangi birini kullanarak herhangi bir Polyline
nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Özelleştirme işlevlerini kullanarak Polyline
nesnelerin stilini değiştirin
Aşağıdaki örnekte, etkin bir Polyline
nesnesinin stilinin nasıl yapılandırılacağı gösterilmektedir. Daha önce listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanarak herhangi bir Polyline
nesnesinin stilini özelleştirmek için bu kalıbı uygulayın.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.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
nesnelerin görünürlüğünü kontrol et
Varsayılan olarak Polyline
nesnenin tümü görünürdür. Bir Polyline
nesnesini görünmez yapmak için visible
özelliğini ayarlayın:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Bir araç veya konum işaretçisi için InfoWindow
görüntüleyin
Bir araç veya konum işaretçisi hakkında ek bilgi görüntülemek için InfoWindow
kullanabilirsiniz.
Aşağıdaki örnekte, InfoWindow
öğesi oluşturma ve araç işaretçisine ekleme işlemi gösterilmektedir:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
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ırma özelliğini devre dışı bırakarak haritanın, görüntü alanını araca ve öngörülen rotaya otomatik olarak sığdırmasını durdurabilirsiniz. Aşağıdaki örnekte, yolculuk paylaşımı harita görünümünü yapılandırdığınızda otomatik sığdırmanın nasıl devre dışı bırakılacağı gösterilmektedir.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
// 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
Bu özelleştirmeleri kaybetmeden, işaretçiler veya diğer özelleştirmeler içeren mevcut bir haritayı değiştirmek için JavaScript Gönderim İzleme Kitaplığı'nı kullanabilirsiniz.
Örneğin, üzerinde işaretçi bulunan standart google.maps.Map
varlığına sahip bir web sayfanız olduğunu varsayalım:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of 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 Journey Paylaşım kitaplığını eklemek için:
- Kimlik doğrulama jetonu fabrikası için kod ekleyin.
initMap()
işlevinde bir konum sağlayıcıyı 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ünü başlatma için geri çağırma işlevine taşıyın.
- Konum kitaplığını API yükleyicisine ekleyin.
Aşağıdaki örnekte, yapılacak değişiklikler gösterilmektedir:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider.
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 artık haritada oluşturulur.