JavaScript Filo İzleme Kitaplığı, filolarınızdaki araçların konumlarını neredeyse gerçek zamanlı olarak görselleştirmenizi sağlar. Kitaplık, araçların ve gezilerin görselleştirilmesine olanak tanımak için On DemandRides and Deliveries API'sini kullanır. JavaScript Filosu İzleme Kitaplığı, Fleet Engine'e bağlanmak için standart google.maps.Map
varlığının ve veri bileşenlerinin yerini alan bir JavaScript harita bileşeni içerir.
Bileşenler
JavaScript Filo İzleme Kitaplığı, araçların ve yolculuk ara noktalarının görselleştirilmesi için bileşenlerin yanı sıra TVS veya seyahat için kalan mesafe için ham veri feed'leri sunar.
Filo İzleme harita görünümü
Filo İzleme harita görünümü bileşeni, araçların konumunu ve yolculuk ara noktalarını görselleştirir. Bir aracın rotası biliniyorsa harita görünümü bileşeni, tahmin edilen yol boyunca hareket ederken bu aracı canlandırır.
Konum sağlayıcılar
Konum sağlayıcıları, izlenen nesnelerin konum bilgilerini yolculuk paylaşımı haritasına göndermek için Fleet Engine'de depolanan bilgilerle çalışır.
Araç konumu sağlayıcı
Araç konum sağlayıcısı tek bir aracın konum bilgilerini gösterir. Aracın konumu ve araca atanmış mevcut yolculukla ilgili bilgiler içerir.
Filo konumu sağlayıcısı
Filo konum sağlayıcı, birden fazla araç için konum bilgilerini gösterir. Belirli bir aracı ve konumunu görüntülemek için filtre uygulayabilir veya araç filosunun konumunun tamamını görüntüleyebilirsiniz.
Takip edilen konumların görünürlüğünü kontrol et
Görünürlük kuralları, izlenen bir konum nesnesinin Harita'da bir Fleet Engine konum sağlayıcısı için ne zaman görünür olacağını belirler. Not: Özel veya türetilmiş bir konum sağlayıcı kullanmak, görünürlük kurallarını değiştirebilir.
Araçlar
Bir araç, Fleet Engine'de oluşturulur oluşturulmaz görünür ve araç_durumu Online
olduğunda görünür. Bu, araca atanmış bir yolculuk olmasa bile
araçların görülebileceği anlamına gelir.
Ara nokta konum işaretçileri
Referans noktası konum işaretçisi, aracın yolculuğu boyunca başlangıç noktasından başlayıp son hedefle biten noktaları gösterir. Referans noktası konum işaretçileri aşağıdaki şekilde tanımlanabilir:
- Kalkış noktası - araç seyahatinin başlangıç konumunu gösterir
- Ara - Araç gezisinde duraklamaları gösterir
- Hedef: Araç yolculuğu için son konumu belirtir
Planlanan araç ara noktaları, haritada başlangıç, ara ve hedef işaretçileri olarak gösterilir.
JavaScript Filo İzleme Kitaplığı'nı kullanmaya başlama
JavaScript Filo İzleme Kitaplığı'nı kullanmadan önce Fleet Engine ve API anahtarı alma hakkında bilgi sahibi olduğunuzdan emin olun. Ardından, gezi kimliği ve araç kimliği hak talebi oluşturun.
Gezi kimliği ve araç kimliği hak talebi oluşturun
Araç konumu sağlayıcısını kullanarak araçları izlemek için gezi kimliği ve araç kimliği talebiyle bir JSON Web Token (JWT) oluşturun.
JWT yükünü oluşturmak için yetkilendirme bölümüne tripid
ve vehicleid
anahtarlarıyla ek bir talep ekleyin ve her anahtarın value
değerini * olarak ayarlayın. Jeton, Fleet Engine Service Super User Cloud IAM rolü kullanılarak oluşturulmalıdır. Bunun Fleet Engine varlıklarını oluşturmak, okumak ve değiştirmek için geniş kapsamlı erişim izni verdiğini ve yalnızca güvenilir kullanıcılarla paylaşılması gerektiğini unutmayın.
Aşağıdaki örnekte, araç ve göreve göre izleme için bir jetonun nasıl oluşturulacağı gösterilmektedir:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"tripid": "*",
"vehicleid": "*",
}
}
Kimlik doğrulama jetonu alıcısı oluşturma
JavaScript Filo İzleme Kitaplığı, aşağıdakilerden herhangi biri doğru olduğunda kimlik doğrulama jetonu alıcısını kullanarak 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.
Projenizin hizmet hesabı sertifikasını kullanarak sunucularınızda uygun hak talepleriyle oluşturulan bir jetonu almak için kimlik doğrulama jetonu alıcısı oluşturabilirsiniz. Yalnızca sunucularınızda jeton oluşturmak ve sertifikalarınızı hiçbir istemcide paylaşmamak önemlidir. Aksi takdirde, sisteminizin güvenliğini ihlal edebilirsiniz.
Alıcı, bir Promise içinde sarmalanmış iki alan içeren bir veri yapısı döndürmelidir:
token
dizesi.expiresInSeconds
sayısı. Bir jetonun süresi, getirildikten bu süre sonra dolar.
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 (getirme zamanından itibaren saniye cinsinden) kitaplığa geçirmelidir.
- SERVER_TOKEN_URL, arka uç uygulamanıza bağlıdır. Örnek URL'ler şunlardır:
- https://
SERVER_URL
/token/driver/VEHICLE_ID
- https://
SERVER_URL
/token/consumer/TRIP_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
HTML'den harita yükleme
Aşağıdaki örnekte, JavaScript Yolculuğu Paylaşımı 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, 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&v=beta" defer></script>
Araç takip etme
Bu bölümde, bir taşıt izlemek için JavaScript Filo İ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.
Araç konum sağlayıcı örneği gösterme
JavaScript Filo İzleme Kitaplığı, İsteğe Bağlı Yolculuklar ve Teslimatlar API'si için önceden bir konum sağlayıcı tanımlar. Örneklendirmek için proje kimliğinizi ve jeton fabrikanıza bir referans kullanın.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
Harita görünümünü başlatma
JavaScript Yolculuğu Paylaşımı kitaplığını yükledikten sonra harita görünümünü başlatın ve HTML sayfasına ekleyin. Sayfanızda, harita görünümünü barındıran 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 vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Değişim etkinliklerini dinleme
Konum sağlayıcıyı kullanarak vehicle
nesnesinden bir araçla ilgili meta bilgileri alabilirsiniz. Meta bilgiler arasında TVS ve aracın bir sonraki teslim alma ya da bırakma işleminden önce kalan mesafesi 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.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
Hataları bekleyin
Araç bilgileri isteğinden eşzamansız olarak ortaya çıkan 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);
});
İzlemeyi durdur
Konum sağlayıcının aracı izlemesini durdurmak için konum sağlayıcıdan araç kimliğini kaldırın.
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
Konum sağlayıcıyı harita görünümünden kaldırma
Aşağıdaki örnekte, bir konum sağlayıcının harita görünümünden nasıl kaldırılacağı gösterilmektedir.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Araç filosunu görüntüleme
Bu bölümde, bir araç filosunu görüntülemek için JavaScript Yolculuk Paylaşımı 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.
Araç filosu konum sağlayıcı örneği gösterme
JavaScript Filo İzleme Kitaplığı, On Demand Rides and Deliveries API'sinden birden fazla araç getiren bir konum sağlayıcısını önceden tanımlar. Proje kimliğinizi ve jeton alıcınızı örneklendirmek için referans olarak kullanın.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
vehicleFilter
, haritada görüntülenen araçları filtrelemek için kullanılan bir sorguyu belirtir.
Bu filtre doğrudan Fleet Engine'e iletilir. Desteklenen biçimler için ListVehiclesRequest öğesine bakın.
locationRestriction
, araçların haritada gösterileceği alanı sınırlandırır.
Ayrıca konum izlemenin etkin olup olmadığını da kontrol eder. Bu ayar ayarlanana kadar konum izleme başlamaz.
Konum sağlayıcı oluşturulduktan sonra harita görünümünü başlatın.
Harita görünümünü kullanarak konum kısıtlaması ayarlama
locationRestriction
sınırları, harita görünümünde görünen alanla eşleşecek şekilde yapılandırılabilir.
JavaScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
TypeScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
Değişim etkinliklerini dinleme
Konum sağlayıcıyı kullanarak vehicles
nesnesinden filoyla ilgili meta bilgileri alabilirsiniz. Meta bilgiler; navigasyon durumu, sonraki ara noktaya mesafe ve özel özellikler gibi araç özelliklerini içerir. Daha ayrıntılı bilgi için referans belgelerine bakın. Meta bilgilerde yapılan değişiklik bir 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.vehicles contains data that may be
// useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
// e.vehicles contains data that may be useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
Hataları bekleyin
Araç filosu bilgileri tetikleyici hata etkinliklerini istemeden eşzamansız olarak ortaya çıkan hatalar. Bu etkinliklerin nasıl dinleneceğini gösteren örnekler için Hataları dinleme bölümüne bakın.
İzlemeyi durdur
Konum sağlayıcının filoyu izlemesini durdurmak için konum sağlayıcısının sınırlarını null olarak ayarlayın.
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
Konum sağlayıcıyı harita görünümünden kaldırma
Aşağıdaki örnekte, bir konum sağlayıcının harita görünümünden nasıl kaldırılacağı gösterilmektedir.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Temel haritanın görünümünü ve tarzını özelleştirin
Haritalar bileşeninin görünümünü ve tarzını özelleştirmek için bulut tabanlı araçlar kullanarak veya doğrudan kodda seçenekleri ayarlayarak haritanızın stilini belirleyin.
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 bunları Google Cloud konsolundan düzenlemenize olanak tanır. Harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. JavaScript Filo İ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, ö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'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
Kod tabanlı harita stili kullanma
Harita stilini özelleştirmenin diğer bir yolu da 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 Filo İzleme Kitaplığı ile, haritaya eklenen işaretçilerin görünümünü ve tarzını özelleştirebilirsiniz. Bunu, işaretçi özelleştirmelerini belirterek yaparsınız. Filo İzleme Kitaplığı, daha sonra bu özelleştirmeleri haritaya işaretçi eklemeden önce ve her işaretçi güncellemesinde uygular.
Aynı türdeki tüm işaretçilere uygulanacak bir MarkerOptions
nesnesi belirterek basit bir özelleştirme oluşturabilirsiniz. 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 olarak, bir özelleştirme işlevi belirtebilirsiniz. Özelleştirme işlevleri, işaretçilerin verilere göre biçimlendirilmesinin yanı sıra tıklama işleme gibi işaretçilere etkileşim ekleme olanağı sağlar. Özellikle, Filo İzleme, işaretçinin temsil ettiği nesne türüyle (araç, durak veya görev) ilgili verileri özelleştirme işlevine iletir. Bu şekilde işaretçi stilinin, işaretçi öğesinin mevcut durumuna (örneğin, kalan durak sayısı veya görev türü) göre değişmesi sağlanır. Hatta Fleet Engine dışındaki kaynaklardan gelen verileri birleştirebilir ve işaretçiyi bu bilgilere göre biçimlendirebilirsiniz.
Ayrıca, işaretçi görünürlüğünü filtrelemek için özelleştirme işlevlerini de kullanabilirsiniz.
Bunu yapmak için işaretçiden setVisible(false)
numaralı telefonu arayın.
Ancak, performansı artırmak için konum sağlayıcıdaki (ör. FleetEngineFleetLocationProvider.vehicleFilter
) yerel filtrelemeyle filtreleme yapmanızı öneririz.
Bununla birlikte, ek filtreleme işlevine ihtiyacınız olduğunda özelleştirme işlevini kullanarak filtreleme uygulayabilirsiniz.
Filo İzleme kitaplığı 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ştirme parametrelerinden birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu kalıbı uygulayın.
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Özelleştirme işlevlerini kullanarak işaretçilerin stilini değiştirme
Aşağıdaki örnekte, bir araç işaretçisinin stilinin nasıl yapılandırılacağı gösterilmektedir. 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
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
İşaretçilere tıklama işleme ekleme
Aşağıdaki örnekte, 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
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Görünür işaretçileri filtrele
Aşağıdaki örnekte, hangi araç işaretçilerinin görünür olduğunun nasıl filtreleneceği gösterilmektedir. Yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak işaretçileri filtrelemek için bu kalıbı uygulayın.
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
Bir aracı takip ederken çoklu çizgi özelleştirmelerini kullanın
Filo İzleme Kitaplığı ile takip edilen aracın rotasının haritadaki görünümünü ve tarzını da özelleştirebilirsiniz. Kitaplık, aracın 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, aracın mevcut durumuna göre her 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.
FleetEngineVehicleLocationProviderOptions
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.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Polyline
nesnenin görünürlüğünü kontrol edin
Varsayılan olarak tüm Polyline
nesneleri görünür. Bir Polyline
nesnesini görünmez yapmak için visible
özelliğini ayarlayın:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Trafiğe duyarlı Polyline
nesne oluştur
Fleet Engine, takip edilen aracın etkin ve kalan yolları için trafik hızı verilerini döndürür. Bu bilgileri kullanarak Polyline
nesnelerini trafik hızlarına göre biçimlendirebilirsiniz:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Araç veya konum işaretçisi için bir InfoWindow
görüntüleyin
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 araç işaretçisine ekleme işleminin nasıl yapılacağı gösterilmektedir.
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
Otomatik sığdırmayı devre dışı bırak
Otomatik sığdırmayı devre dışı bırakarak haritanın görüntü alanını otomatik olarak araca ve tahmin edilen 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
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
Mevcut bir haritayı değiştirme
İşaretçiler veya diğer özelleştirmeler içeren mevcut bir haritayı, bu özelleştirmeleri kaybetmeden değiştirebilirsiniz.
Ö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 Oracle Park Stadium
var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById("map"));
map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });
// The marker, now positioned at Oracle Park
var marker = new google.maps.Marker({ position: oraclePark, map: map });
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
></script>
</body>
</html>
Filo İzleme'yi içeren JavaScript Yolculuk Paylaşımı kitaplığını eklemek için:
- 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ünü 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. Use FleetEngineVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.vehicleId = VEHICLE_ID;
// (4) Add customizations like before.
// The location of Oracle Park
var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Oracle Park
var marker = new google.maps.Marker({position: oraclePark, map: map});
};
}
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
></script>
</body>
</html>
Oracle Park'ın yakınında belirtilen kimlikle bir araç kullanıyorsanız araç haritada oluşturulur.