JavaScript Filo İzleme Kitaplığı, büyük ölçekli sistemlerin konumlarını görselleştirmenize
anlık olarak kontrol edebilirsiniz. Kitaplık, İsteğe Bağlı
Yolculuklar ve Teslimatlar
API
Böylece araçların ve seyahatlerin görselleştirilmesini sağlayabilirsiniz. JavaScript Filosu
İzleme Kitaplığı,
yerine standart google.maps.Map
varlığının ve veri bileşenlerinin yerine
ilgili başka bir şey yok.
Bileşenler
JavaScript Filo İzleme Kitaplığı, JavaScript Filo İzleme Kitaplığı, ve seyahat masrafları için ham veri feed'leri veya uzaklığı belirir.
Filo İzleme harita görünümü
Filo İzleme harita görünümü bileşeni, araçların konumunu görselleştirir ve ve ara noktaları belirlemeye çalışın. Bir aracın rotası biliniyorsa, harita görünümü bileşeni tahmin edilen yolunda hareket ederken bu araç için animasyon oluşturur.
Konum sağlayıcılar
Konum sağlayıcılar, konum göndermek için Fleet Engine'de depolanan bilgilerle çalışır izlenen nesnelere ait bilgileri yolculuk paylaşımı haritasına ekleyin.
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çeriyor kullanabilirsiniz.
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 filonun tamamı için araç konumlarını göstermek.
Takip edilen konumların görünürlüğünü kontrol et
Görünürlük kuralları, izlenen bir konum nesnesinin Harita'da ne zaman görüneceğini belirler bir konum sağlayıcım var. Not - Özel veya türetilmiş bir konum kullanma sağlayıcı, görünürlük kurallarını değiştirebilir.
Araçlar
Araç, Fleet Engine'de oluşturulur oluşturulmaz görünür durumda
araç_durumu Online
olduğunda. Yani araç, araç henüz
şu anda araca atanmış bir yolculuk olmadığında.
Ara nokta konum işaretçileri
Ara nokta konum işaretçisi, bir aracın yolculuğuna başlayan noktaları gösterir varış noktasıyla ve nihai hedefle bitmelidir. Referans noktası konumu işaretçiler 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 ara noktaları olarak gösterilir Hedef işaretçileri.
JavaScript Filo İzleme Kitaplığı'nı kullanmaya başlama
JavaScript Filo İzleme Kitaplığı'nı kullanmadan önce, sitenizin API almak için Fleet Engine ile tuşuna basın. 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ç konumunu kullanarak araçları takip etmek için provider, ziyaretle bir JSON Web Token (JWT) oluşturun Kimlik ve araç kimliği hak talebi.
JWT yükünü oluşturmak için yetkilendirme bölümüne bir talep daha ekleyin
tripid
ve vehicleid
tuşlarını kullanın ve her bir anahtarın value
değerini * olarak ayarlayın.
Jeton, Fleet Engine Service Süper Kullanıcısı Cloud kullanılarak oluşturulmalıdır
IAM rolü. Bunun Filo oluşturma, okuma ve değiştirme için geniş kapsamlı erişim izni verdiğini unutmayın
Motor varlıkları ve yalnızca güvenilir kullanıcılarla paylaşılmalıdır.
Aşağıdaki örnekte araç bazında takip için jetonun nasıl oluşturulacağı ve görev:
{
"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ığı, jeton alıcısını tanımlar:
- Geçerli bir jetonu yoksa (örneğin, alıcı şurada çağrılmadığında) yeni bir sayfa yüklemesinde veya alıcı bir jeton geri döndürmediğinde.
- 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.
bir hizmet hesabı kullanarak sunucularınızda doğru hak talepleriyle e-posta yazacaksınız. Yalnızca web sitenizde jeton oluşturmanız ve sertifikalarınızı hiçbir zaman istemcilerle paylaşmayın. Aksi takdirde sisteminizin güvenliğini tehlikeye atabilir.
Alıcı, bir veri döndürmelidir yapın söz şeklinde sarmalanmış iki alanla:
token
dizesi.expiresInSeconds
sayısı. Bir jetonun süresi, bu süre içinde sona erer getiriliyor.
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 şunları göz önünde bulundurun:
- Uç nokta, jeton için bir geçerlilik bitiş zamanı döndürmelidir; yukarıdaki örnekte
data.ExpiresInSeconds
olarak verilir. - Kimlik doğrulama jetonu alıcısının geçerlilik süresini (saniye cinsinden, zamanı) örnekte gösterildiği gibi kitaplığa eklenir.
- SERVER_TOKEN_URL, arka uç uygulamanıza bağlıdır. Bunlar
örnek URL'ler:
- 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 Yolculuk Paylaşımı kitaplığının nasıl yükleneceği gösterilmektedir
belirtir. callback parametresi, initMap
işlevini yürütür
yapmanız gerekir. defer özelliği, tarayıcının oluşturmaya devam etmesini sağlar
sayfanızın geri kalanı otomatik olarak eklenir.
<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 hedefi takip etmek için JavaScript Filo İzleme Kitaplığı'nın kullanabilirsiniz. Kitaplığı, şurada belirtilen geri çağırma işlevinden yüklediğinizden emin olun: komut dosyası etiketine bakın.
Araç konum sağlayıcı örneği gösterme
JavaScript Filo İzleme Kitaplığı, Açık için bir konum sağlayıcıyı önceden Demand Rides and Deliveries API. Proje kimliğinizi ve bunu örneklendirmek için jeton fabrikasını kullanır.
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 bunu HTML sayfasına ekleyin. Sayfanız bir <div> öğesi içermelidir harita görünümünü korur. <div> öğesi <div> aşağıdaki örneğe bakın.
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
vehicle
nesnesinden bir araçla ilgili meta bilgileri alabilirsiniz
konum sağlayıcıyı kullanabilirsiniz. Meta bilgiler, TVS’yi ve
aracın bir sonraki teslim alınmadan veya bırakmasından önceki mesafe Meta verilerdeki değişiklikler
bilgileri bir güncelleme etkinliğini tetikler. Aşağıdaki örnekte nasıl dinleyeceğiniz gösterilmektedir
uygulayacaksınız.
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ç bilgilerini tetikleme isteğinden eşzamansız olarak ortaya çıkan hatalar hata olayları. Aşağıdaki örnekte, bu etkinliklerin dört temel adımı ele alacağız.
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 araç kimliğini kaldırın konum sağlayıcıdan çıkarabilirsiniz.
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 görüntülemek için JavaScript Yolculuğu Paylaşımı kitaplığının araç filosuyla ilgilidir. Kitaplığı geri çağırma işlevinden yüklediğinizden emin olun komut dosyası etiketinde belirtildiğinden emin olun.
Araç filosu konum sağlayıcı örneği gösterme
JavaScript Filo İzleme Kitaplığı, müşteriye ait On Demand Rides and Deliveries API'sinden birden fazla araç getirir. Şunu kullanın: proje kimliği ve bunu örneklendirmek için jeton alıcınıza bir referans.
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. Görüntüleyin
ListVehiclesRequest
.
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. Konum izleme
başlamaz.
Konum sağlayıcı oluşturulduktan sonra haritayı başlatın görüntüleyin.
Harita görünümünü kullanarak konum kısıtlaması ayarlama
locationRestriction
sınırları, şurada görünür alanla eşleşecek şekilde yapılandırılabilir:
görünüm.
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
vehicles
nesnesinden filoyla ilgili meta bilgileri alabilirsiniz
konum sağlayıcıyı kullanabilirsiniz. Meta bilgiler, araç özelliklerini içerir.
Örneğin, navigasyon durumu, sonraki ara noktaya olan mesafe ve özel nitelikler; bkz.
referans
belgeleri
inceleyebilirsiniz. Meta bilgilerde yapılan değişiklik bir güncelleme etkinliğini tetikler. İlgili içeriği oluşturmak için kullanılan
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ç filosuyla ilgili bilgi isteğinden dolayı eşzamansız olarak ortaya çıkan hatalar hata etkinliklerini tetikler. Bu etkinlikleri nasıl dinleyeceğinizi gösteren örnekler için Hataları dinleme bölümüne geçin.
İzlemeyi durdur
Konum sağlayıcının filoyu izlemesini durdurmak için konum sağlayıcıyı null olarak ayarla.
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 kullanarak veya doğrudan kodda seçenekleri ayarlayarak onu mümkün kılar.
Bulut tabanlı harita stilleri kullanın
Bulut tabanlı harita stilleri
Google Haritalar'ı kullanan uygulamalarınız için harita stilleri oluşturmanıza ve düzenlemenize olanak tanır
Google Cloud Console'dan alabilirsiniz. İlgili içeriği oluşturmak için kullanılan
harita stilleri, Cloud projenize harita kimlikleri olarak kaydedilir. Şu öğelere bir stil uygulamak için:
JavaScript Filo İzleme haritası, bir
mapId
JourneySharingMapView
ekleyebilirsiniz. mapId
alanı değiştirilemez
veya JourneySharingMapView
örneklendirildikten sonra eklenir. Aşağıdakiler
örnek, daha önce oluşturulmuş bir harita stilinin harita kimliğiyle nasıl etkinleştirileceğini gösterir.
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 bir başka yolu da haritadaki
mapOptions
JourneySharingMapView
ekleyebilirsiniz.
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, reklamlarınızın görünümünü ve tarzını haritaya eklendi. Bunu işaretçi özelleştirmeleri belirterek, Filo İzleme Kitaplığı'nın haritaya işaretçi eklemeden önce uyguladığı ve her işaretçi güncellemesiyle birlikte.
Bir
MarkerOptions
aynı türdeki tüm işaretçilere uygulanacak bir nesnedir. Şurada belirtilen değişiklikler:
nesne her işaretçi oluşturulduktan sonra uygulanır.
seçenekleri vardır.
Daha gelişmiş bir seçenek olarak, bir özelleştirme işlevi belirtebilirsiniz. Özelleştirme işlevleri, işaretçilerin verilere göre ayarlanmasının yanı sıra, Örneğin işaretçilere etkileşim eklemek gibi. Özellikle, Filo İzleme, çalıştırılacak nesnenin türü hakkındaki verileri özelleştirme işlevine İşaretçi aracı, durağı veya görevi temsil eder. Böylece işaretçi stilinin işaretçi öğenin mevcut durumuna göre değişir; örneğin görev türü veya kalan durak sayısı. İsterseniz dışındaki kaynakları kullanabilir ve işaretçiye bu bilgilere göre stil verebilirsiniz.
Ayrıca, işaretçi görünürlüğünü filtrelemek için özelleştirme işlevlerini de kullanabilirsiniz.
Bunun için şu numarayı arayın:
setVisible(false)
tıklayın.
Ancak, performans nedeniyle, kaliteyi artırmak için yerel
konum sağlayıcıdaki filtreleme gibi
FleetEngineFleetLocationProvider.vehicleFilter
.
Bununla birlikte, ek filtreleme işlevine ihtiyaç duyduğunuzda,
filtreleme işlevini kullanabilirsiniz.
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
nesne algılandı. Herhangi bir dosyanın stilini özelleştirmek için bu kalıbı
yukarıda listelenen işaretçi özelleştirme parametrelerinden herhangi birini kullanarak bir işaretçi seçer.
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. Takip et işaretçilerden birini kullanarak herhangi bir işaretçinin stilini özelleştirmek için bu deseni aşağıda listelenen özelleştirme parametrelerini dahil eder.
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. İşaretçilerden herhangi birini kullanarak herhangi bir işaretçiye tıklama işleme eklemek için bu kalıbı izleyin aşağıda listelenen özelleştirme parametrelerini dahil eder.
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. İşaretçi özelleştirmesinden herhangi birini kullanarak işaretçileri filtrelemek için bu kalıbı izleyin parametrelerini dikkate alır.
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, Fleet Takipler, Gereç,
takip edilen aracın rotası haritada gösterilir. Kitaplık,
google.maps.Polyline
aracın aktif veya kalan koordinatlarındaki her bir koordinat çifti için nesne
path değerleridir.
Çoklu çizgi özelleştirmelerini belirterek Polyline
nesnelerini biçimlendirebilirsiniz. İlgili içeriği oluşturmak için kullanılan
daha sonra, bu özelleştirmeleri iki durumda uygular:
verilerin ne zaman değiştiğine dikkat edin.
İşaretçi özelleştirmeye benzer şekilde, her bir sütun için
PolylineOptions
şununla eşleşen tüm Polyline
nesnelerine uygulanır:
oluşturabilir veya güncelleyebilir.
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 fonksiyon, her nesnenin stilini
Araç; örneğin, Polyline
nesnesini daha koyu bir gölgeyle renklendirme veya
araç yavaş hareket ettiğinde kalındığını gösterir. İsterseniz
ve Polyline
nesnesini buna göre biçimlendirin
ekleyebilirsiniz.
Özelleştirmeleri,
FleetEngineVehicleLocationProviderOptions
.
Aracın farklı yol durumları için özelleştirmeler ayarlayabilirsiniz.
seyahat etmiş, aktif olarak seyahat etmiş veya henüz seyahat edilmemiştir. İlgili içeriği oluşturmak için kullanılan
parametreleri aşağıdaki gibidir:
takenPolylineCustomization
seyahat edilmiş bir yol için;activePolylineCustomization
aktif olarak dolaşan bir yol için;remainingPolylineCustomization
bir yol haritası oluşturabilirsiniz.
PolylineOptions
kullanarak Polyline
nesnenin stilini değiştirin
Aşağıdaki örnekte, bir Polyline
nesnesi için stilin nasıl yapılandırılacağı gösterilmektedir
şununla:
PolylineOptions
Herhangi bir Polyline
nesnesinin stilini özelleştirmek için bu kalıbı kullanarak
kapsamlı bir görünümünü elde edebilirsiniz.
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 Polyline
nesnesinin
görünüm. Herhangi bir Polyline
nesnesinin stilini özelleştirmek için bu kalıbı uygulayın
önce listelenen çoklu çizgi özelleştirme parametrelerinden herhangi birini kullanarak.
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. Polyline
nesnesi oluşturmak için
görünmez,
visible
mülk:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Trafiğe duyarlı Polyline
nesne oluştur
Fleet Engine, Search Ads 360'ın etkin ve kalan yolları için
takip edilen araç. Bu bilgileri, Polyline
stilini belirlemek için kullanabilirsiniz
nesnelere göre çalışır:
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
URL parametrelerinin Google tarafından nasıl ele alınmasını istediğinizi belirtmek için
InfoWindow
bir araç veya konum işaretçisiyle ilgili ek bilgiler görüntüleyin.
Aşağıdaki örnekte, InfoWindow
oluşturma ve bunu bir
araç işaretçisi.
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
Haritayı otomatik olarak görüntü alanını araca sığdırmayı durdurabilirsiniz öngörülen rotayı otomatik olarak sığdırmayı devre dışı bırakır. Aşağıdaki örnekte şunlar gösterilmektedir: yolculuk paylaşımı haritasını yapılandırırken otomatik sığdırmayı devre dışı bırakma görünüm.
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ı değiştirebilirsiniz. yapabilirsiniz.
Örneğin, standart google.maps.Map
içeren bir web sayfanız olduğunu varsayalım.
bir işaretçinin gösterildiği varlık:
<!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, haritası.- Özelleştirmenizi harita görünümü için geri çağırma işlevine taşıyın başlatma.
- 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 yakınında belirtilen kimlikle bir araç çalıştırıyorsanız bu araç haritası.