JavaScript SDK به شما امکان می دهد مکان وسایل نقلیه و مکان های مورد علاقه ردیابی شده در Fleet Engine را تجسم کنید. این کتابخانه حاوی یک جزء نقشه جاوا اسکریپت است که جایگزینی برای یک موجودیت استاندارد google.maps.Map
و اجزای داده برای اتصال با Fleet Engine است. با استفاده از جاوا اسکریپت SDK، میتوانید یک سفر متحرک و قابل سفارشیسازی و تجربه پیشرفت سفارش را از برنامه وب خود ارائه دهید.
اجزاء
جاوا اسکریپت SDK اجزایی را برای تجسم وسایل نقلیه و ایستگاه های بین راهی و همچنین داده های خام برای ETA راننده یا مسافت باقی مانده برای رانندگی فراهم می کند.
نمای نقشه پیشرفت سفر و سفارش
مولفه نمای نقشه مکان وسایل نقلیه و ایستگاه های بین راه را به تصویر می کشد. اگر مسیر یک وسیله نقلیه مشخص باشد، مؤلفه نمای نقشه آن وسیله نقلیه را در حالی که در مسیر پیش بینی شده خود حرکت می کند، متحرک می کند.
ارائه دهنده مکان سفر
جاوا اسکریپت SDK شامل یک ارائه دهنده مکان سفر است که اطلاعات موقعیت مکانی اشیاء ردیابی شده را در نقشه پیشرفت سفر و سفارش تغذیه می کند.
میتوانید از ارائهدهنده مکان سفر برای ردیابی استفاده کنید:
- محل تحویل یا تحویل یک سفر.
- محل و مسیر وسیله نقلیه تعیین شده برای سفر.
اشیاء مکان ردیابی شده
ارائه دهنده موقعیت مکانی اشیاء مانند ایستگاه های بین راه و وسایل نقلیه را ردیابی می کند.
محل مبدا
مکان مبدا مکانی است که یک سفر از آنجا شروع می شود. محل وانت را مشخص می کند.
مکان مقصد
مکان مقصد مکانی است که یک سفر در آن به پایان می رسد. محل سقوط را مشخص می کند.
موقعیت نقطه راه
مکان نقطه بین راهی هر مکانی در طول مسیر یک سفر ردیابی شده است. به عنوان مثال، هر توقف در مسیر اتوبوس، محل ایستگاه بین راهی است.
مکان وسیله نقلیه
مکان وسیله نقلیه، مکان ردیابی شده یک وسیله نقلیه است. ممکن است به صورت اختیاری مسیری برای وسیله نقلیه داشته باشد.
واکشی نشانه احراز هویت
برای کنترل دسترسی به دادههای مکان ذخیره شده در Fleet Engine، باید یک سرویس JSON Web Token (JWT) برای Fleet Engine بر روی سرور خود پیادهسازی کنید. سپس با استفاده از جاوا اسکریپت SDK برای احراز هویت دسترسی به داده های مکان ، یک واکشی نشانه احراز هویت را به عنوان بخشی از برنامه وب خود پیاده سازی کنید .
گزینه های یک ظاهر طراحی شده
استایل های نشانگر و چند خطی ظاهر و احساس اشیاء مکان ردیابی شده را روی نقشه تعیین می کنند. میتوانید از گزینههای استایل سفارشی برای تغییر استایل پیشفرض برای مطابقت با استایل برنامه وب خود استفاده کنید.
کنترل دید مکان های ردیابی شده
این بخش قوانین دید برای اشیاء مکان ردیابی شده روی نقشه را برای ارائه دهندگان مکان از پیش تعریف شده Fleet Engine توضیح می دهد. ارائه دهندگان مکان سفارشی یا مشتق شده ممکن است قوانین دید را تغییر دهند.
وسايل نقليه
یک وسیله نقلیه سواری از زمانی که به یک سفر اختصاص داده می شود تا زمان تخلیه قابل مشاهده است. اگر سفر لغو شود، وسیله نقلیه طولانی تر قابل مشاهده است.
همه نشانگرهای مکان دیگر
همه نشانگرهای مکان دیگر برای مبدا، مقصد، و ایستگاه های بین راه همیشه روی نقشه نشان داده می شوند. به عنوان مثال، یک مکان حمل و نقل به اشتراک گذاری یا یک مکان تحویل محموله، صرف نظر از وضعیت سفر یا تحویل، همیشه روی نقشه نشان داده می شود.
با JavaScript SDK شروع کنید
قبل از استفاده از JavaScript SDK، مطمئن شوید که با Fleet Engine و دریافت کلید API آشنا هستید.
برای ردیابی یک سفر اشتراک سواری، ابتدا یک ادعای شناسه سفر ایجاد کنید.
یک ادعای شناسه سفر ایجاد کنید
برای ردیابی سفر با استفاده از ارائهدهنده مکان سفر ، یک رمز وب JSON (JWT) با ادعای شناسه سفر ایجاد کنید.
برای ایجاد محموله JWT، یک ادعای اضافی در بخش مجوز با کلید سه پایه اضافه کنید و مقدار آن را روی شناسه سفر تنظیم کنید.
مثال زیر نحوه ایجاد توکن برای ردیابی با ID سفر را نشان می دهد:
{
"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": {
"tripid": "tid_12345",
}
}
یک واکشی نشانه احراز هویت ایجاد کنید
میتوانید یک واکشی توکن احراز هویت ایجاد کنید تا با استفاده از یک گواهی حساب سرویس برای پروژه خود ، توکنی را که با ادعاهای مناسب بر روی سرورهای خود ضرب شده است، بازیابی کنید. مهم است که فقط توکن ها را در سرورهای خود برش دهید و هرگز گواهی های خود را در هیچ کلاینت به اشتراک نگذارید. در غیر این صورت، امنیت سیستم خود را به خطر خواهید انداخت.
واکشی باید یک ساختار داده با دو فیلد را که در یک Promise پیچیده شده است برگرداند:
- یک
token
رشته - یک عدد
expiresInSeconds
. یک توکن در این مدت پس از واکشی منقضی می شود.
JavaScript Consumer SDK زمانی که هر یک از موارد زیر درست باشد، از طریق واکشی نشانه احراز هویت، یک رمز درخواست می کند:
- رمز معتبری ندارد، مانند زمانی که واکشی را در بارگذاری صفحه جدید فراخوانی نکرده است، یا زمانی که واکشی با یک توکن برنگشته است.
- توکنی که قبلاً واکشی شده بود منقضی شده است.
- توکنی که قبلاً واکشی شده است در عرض یک دقیقه پس از انقضا است.
در غیر این صورت، SDK از رمز صادر شده قبلی استفاده می کند و هنوز معتبر است و واکشی را فراخوانی نمی کند.
مثال زیر نحوه ایجاد یک واکشی نشانه احراز هویت را نشان می دهد:
جاوا اسکریپت
async 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.jwt,
expiresInSeconds: data.expirationTimestamp - Date.now(),
};
}
هنگام اجرای نقطه پایانی سمت سرور برای برش توکن ها، موارد زیر را در نظر داشته باشید:
- نقطه پایانی باید یک زمان انقضا برای توکن برگرداند. در مثال بالا، به عنوان
data.ExpiresInSeconds
داده شده است. ExpiresInSeconds. - همانطور که در مثال نشان داده شده است، واکشی نشانه احراز هویت باید زمان انقضا (بر حسب ثانیه، از زمان واکشی) را به کتابخانه منتقل کند.
- SERVER_TOKEN_URL به اجرای ارائهدهنده شما بستگی دارد، اینها نشانیهای اینترنتی ارائهدهنده نمونه هستند:
- https://
SERVER_URL
/token/driver/VEHICLEID
- https://
SERVER_URL
/token/consumer/TRIPID
- https://
یک نقشه از HTML بارگیری کنید
مثال زیر نحوه بارگیری SDK جاوا اسکریپت را از یک URL مشخص نشان می دهد. پارامتر callback تابع initMap
را پس از بارگیری API اجرا می کند. ویژگی defer به مرورگر اجازه میدهد تا زمانی که API بارگیری میشود، بقیه صفحه شما را رندر کند.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
به دنبال یک سفر
این بخش نحوه استفاده از جاوا اسکریپت SDK را برای دنبال کردن یک سفر اشتراک گذاری یا تحویل نشان می دهد. قبل از اجرای کد، حتماً کتابخانه را از تابع callback مشخص شده در تگ اسکریپت بارگیری کنید .
ارائهدهنده مکان سفر را معرفی کنید
جاوا اسکریپت SDK یک ارائه دهنده مکان را برای Fleet Engine Ridesharing API از پیش تعریف می کند. از شناسه پروژه خود و یک مرجع به کارخانه توکن خود برای نمونه سازی آن استفاده کنید.
جاوا اسکریپت
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineTripLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify a trip ID to
// immediately start tracking.
tripId: 'your-trip-id',
});
نمای نقشه را اولیه کنید
پس از بارگیری جاوا اسکریپت SDK، نمای نقشه را مقداردهی اولیه کنید و آن را به صفحه HTML اضافه کنید. صفحه شما باید حاوی یک عنصر <div> باشد که نمای نقشه را نگه می دارد. عنصر <div> در مثال زیر map_canvas نام دارد.
برای جلوگیری از شرایط مسابقه، شناسه سفر را برای ارائهدهنده موقعیت مکانی در تماسی که پس از مقداردهی اولیه نقشه فراخوانی میشود، تنظیم کنید.
جاوا اسکریپت
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerCustomization: vehicleMarkerCustomization,
activePolylineCustomization: activePolylineCustomization,
// Any undefined styling options will use defaults.
});
// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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);
به تغییر رویدادها گوش دهید
می توانید اطلاعات متا در مورد یک سفر را از شیء وظیفه با استفاده از ارائه دهنده مکان بازیابی کنید. اطلاعات متا شامل ETA و فاصله باقیمانده قبل از تحویل یا رها شدن است. تغییرات در اطلاعات متا باعث یک رویداد بهروزرسانی میشود. مثال زیر نحوه گوش دادن به این رویدادهای تغییر را نشان می دهد.
جاوا اسکریپت
locationProvider.addListener('update', e => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
TypeScript
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
// e.trip contains data that may be useful
// to the rest of the UI.
console.log(e.trip.dropOffTime);
});
رسیدگی به خطاها
خطاهایی که به طور ناهمزمان از درخواست اطلاعات سفر به وجود می آیند، رویدادهای خطا را راه اندازی می کنند. مثال زیر نحوه گوش دادن به این رویدادها را برای رسیدگی به خطاها نشان می دهد.
جاوا اسکریپت
locationProvider.addListener('error', e => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error contains the error that triggered the
// event
console.error(e.error);
});
توجه: مطمئن شوید که تماسهای کتابخانه را در بلوکهای try...catch
تا خطاهای پیشبینی نشده را مدیریت کنید.
ردیابی را متوقف کنید
برای جلوگیری از ردیابی سفر توسط ارائهدهنده موقعیت، شناسه سفر را از ارائهدهنده موقعیت مکانی حذف کنید.
جاوا اسکریپت
locationProvider.tripId = '';
TypeScript
locationProvider.tripId = '';
ارائه دهنده موقعیت مکانی را از نمای نقشه حذف کنید
مثال زیر نحوه حذف ارائه دهنده موقعیت مکانی را از نمای نقشه نشان می دهد.
جاوا اسکریپت
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
سفارشی کردن ظاهر و احساس نقشه پایه
برای سفارشی کردن ظاهر و احساس اجزای نقشه، نقشه خود را با استفاده از ابزار مبتنی بر ابر یا با تنظیم گزینهها مستقیماً در کد، استایل دهید .
استفاده از طراحی نقشه مبتنی بر ابر
طراحی نقشههای مبتنی بر ابر به شما امکان میدهد سبکهای نقشه را برای هر یک از برنامههای خود که از Google Maps از کنسول Google Cloud استفاده میکنند ایجاد و ویرایش کنید، بدون اینکه نیازی به تغییر در کد خود داشته باشید. سبک های نقشه به عنوان شناسه نقشه در پروژه Cloud شما ذخیره می شوند. برای اعمال یک سبک به نقشه JavaScript SDK خود، هنگام ایجاد JourneySharingMapView
یک mapId
و هر mapOptions
دیگر را مشخص کنید. پس از اینکه JourneySharingMapView
نمونه برداری شد، فیلد mapId
نمی توان تغییر داد یا اضافه کرد. مثال زیر نشان می دهد که چگونه می توان یک سبک نقشه ایجاد شده قبلی را با شناسه نقشه فعال کرد.
جاوا اسکریپت
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// and any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// and any other styling options.
});
از سبک نقشه مبتنی بر کد استفاده کنید
یکی دیگر از راههای سفارشیسازی استایل نقشه، تنظیم mapOptions
هنگام ایجاد JourneySharingMapView
است.
جاوا اسکریپت
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" }
]
}
]
}
});
از سفارشی سازی نشانگرها استفاده کنید
با JavaScript SDK، می توانید ظاهر و احساس نشانگرهای اضافه شده به نقشه را سفارشی کنید. شما این کار را با تعیین سفارشیسازی نشانگر انجام میدهید، که سپس JavaScript SDK قبل از افزودن نشانگرها به نقشه و با هر بهروزرسانی نشانگر اعمال میشود.
ساده ترین سفارشی سازی این است که یک شی MarkerOptions
را مشخص کنید که برای همه نشانگرهای یک نوع اعمال شود. تغییرات مشخص شده در شی بعد از ایجاد هر نشانگر اعمال می شود و هر گزینه پیش فرض را بازنویسی می کند.
یک گزینه پیشرفته تر، تعیین یک تابع سفارشی سازی است. توابع سفارشی سازی امکان استایل نشانگرها را بر اساس داده ها و همچنین افزودن تعامل به نشانگرها، مانند مدیریت کلیک، فراهم می کند. به طور خاص، Trip and Order Progress دادهها را در مورد نوع شیئی که نشانگر نشان میدهد، به تابع سفارشیسازی ارسال میکند: وسیله نقلیه، مبدا، ایستگاه بین راه یا مقصد. سپس این اجازه می دهد تا استایل نشانگر بر اساس وضعیت فعلی خود عنصر نشانگر تغییر کند. به عنوان مثال، تعداد ایستگاه های بین راهی باقی مانده تا زمانی که وسیله نقلیه سفر را به پایان برساند. حتی میتوانید به دادههای منابع خارج از Fleet Engine ملحق شوید و نشانگر را بر اساس آن اطلاعات استایل دهید.
JavaScript SDK پارامترهای سفارشی سازی زیر را در FleetEngineTripLocationProviderOptions
فراهم می کند:
-
vehicleMarkerCustomization
-
originMarkerCustomization
-
waypointMarkerCustomization
-
destinationMarkerCustomization
با استفاده از MarkerOptions
استایل نشانگرها را تغییر دهید
مثال زیر نحوه پیکربندی استایل نشانگر خودرو را با شیء MarkerOptions
نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از سفارشیسازیهای نشانگر فهرستشده قبلی، استایل هر نشانگری را سفارشی کنید.
جاوا اسکریپت
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
با استفاده از توابع سفارشیسازی، استایل نشانگرها را تغییر دهید
مثال زیر نحوه پیکربندی استایل نشانگر خودرو را نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از پارامترهای سفارشیسازی نشانگر که قبلاً ذکر شد، استایل هر نشانگر را سفارشی کنید.
جاوا اسکریپت
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
کنترل کلیک را به نشانگرها اضافه کنید
مثال زیر نشان می دهد که چگونه می توان کنترل کلیک را به نشانگر خودرو اضافه کرد. این الگو را دنبال کنید تا با استفاده از هر یک از پارامترهای سفارشیسازی نشانگر که قبلاً فهرست شده است، کنترل کلیک را به هر نشانگری اضافه کنید.
جاوا اسکریپت
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
از سفارشی سازی های چند خطی استفاده کنید
با JavaScript SDK، همچنین می توانید ظاهر و احساس مسیر سفر را روی نقشه شخصی سازی کنید. کتابخانه یک شی google.maps.Polyline
برای هر جفت مختصات در مسیر فعال یا باقی مانده خودرو ایجاد می کند. شما می توانید با تعیین سفارشی سازی چند خط به اشیاء Polyline
استایل دهید. سپس کتابخانه این سفارشیسازیها را در دو موقعیت اعمال میکند: قبل از افزودن اشیاء به نقشه، و زمانی که دادههای مورد استفاده برای اشیاء تغییر کردهاند.
مشابه سفارشیسازی نشانگر، میتوانید مجموعهای از PolylineOptions
را تعیین کنید تا روی همه اشیاء Polyline
همسان در هنگام ایجاد یا بهروزرسانی اعمال شوند.
به همین ترتیب، می توانید یک تابع سفارشی سازی را مشخص کنید. توابع سفارشیسازی امکان استایلسازی فردی اشیاء را بر اساس دادههای ارسال شده توسط Fleet Engine فراهم میکنند. این عملکرد می تواند سبک هر شی را بر اساس وضعیت فعلی وسیله نقلیه تغییر دهد. به عنوان مثال، شیء Polyline
را با سایه عمیق تر رنگ آمیزی کنید، یا زمانی که وسیله نقلیه کندتر حرکت می کند، آن را ضخیم تر کنید. حتی میتوانید از منابع خارج از Fleet Engine به آن بپیوندید و شی Polyline
را بر اساس آن اطلاعات استایل دهید.
شما می توانید سفارشی سازی ها را با استفاده از پارامترهای ارائه شده در FleetEngineTripLocationProviderOptions
مشخص کنید. میتوانید سفارشیسازیهایی را برای حالتهای مسیر مختلف در سفر خودرو تنظیم کنید - قبلاً سفر کردهاید، فعالانه سفر کردهاید یا هنوز سفر نکردهاید. پارامترها به شرح زیر است:
-
takenPolylineCustomization
، برای مسیری که قبلاً طی شده است. -
activePolylineCustomization
، برای یک مسیر فعال در حال حرکت؛ -
remainingPolylineCustomization
، برای مسیری که هنوز طی نشده است.
با استفاده از PolylineOptions
استایل اشیاء Polyline
را تغییر دهید
مثال زیر نحوه پیکربندی یک ظاهر طراحی شده برای یک شی Polyline
را با PolylineOptions
نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از سفارشیسازیهای چند خطی که قبلاً ذکر شد، استایل هر شی Polyline
را سفارشی کنید.
جاوا اسکریپت
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
با استفاده از توابع سفارشی سازی، استایل اشیاء Polyline
را تغییر دهید
مثال زیر نحوه پیکربندی استایل یک شیء فعال Polyline
را نشان می دهد. برای سفارشی کردن استایل هر شیء Polyline
با استفاده از هر یک از پارامترهای سفارشی سازی چند خطی که قبلا ذکر شد، از این الگو پیروی کنید.
جاوا اسکریپت
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.trip.remainingWaypoints[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: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[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
به طور پیش فرض، تمام اشیاء Polyline
قابل مشاهده هستند. برای نامرئی کردن یک شی Polyline
، ویژگی visible
آن را تنظیم کنید:
جاوا اسکریپت
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
رندر اشیاء Polyline
آگاه از ترافیک
Fleet Engine داده های سرعت ترافیک را برای مسیرهای فعال و باقی مانده برای وسیله نقلیه دنبال شده برمی گرداند. می توانید از این اطلاعات برای استایل دادن به اشیاء Polyline
با توجه به سرعت ترافیک آنها استفاده کنید:
جاوا اسکریپت
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineTripLocationProvider.
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) => {
FleetEngineTripLocationProvider.
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 =
FleetEngineTripLocationProvider.
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: TripPolylineCustomizationFunctionParams) => {
FleetEngineTripLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
نمایش یک InfoWindow
برای نشانگر وسیله نقلیه یا مکان
می توانید از InfoWindow
برای نمایش اطلاعات اضافی در مورد یک وسیله نقلیه یا نشانگر موقعیت استفاده کنید.
مثال زیر نحوه ایجاد InfoWindow
و اتصال آن به نشانگر خودرو را نشان می دهد:
جاوا اسکریپت
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount = e.trip.remainingWaypoints.length;
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.FleetEngineTripLocationProviderUpdateEvent) => {
const stopsCount = e.trip.remainingWaypoints.length;
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();
اتصالات خودکار را غیرفعال کنید
با غیرفعال کردن نصب خودکار، میتوانید نقشه را از نصب خودکار نمای درگاه روی خودرو و مسیر پیشبینیشده متوقف کنید. مثال زیر نحوه غیرفعال کردن اتصال خودکار را هنگام پیکربندی سفر و سفارش نمای نقشه پیشرفت نشان می دهد.
جاوا اسکریپت
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,
...
});
یک نقشه موجود را جایگزین کنید
میتوانید از JavaScript SDK برای جایگزینی نقشههای موجود که شامل نشانگرها یا سفارشیسازیهای دیگر است، بدون از دست دادن آن سفارشیسازیها استفاده کنید.
برای مثال، فرض کنید یک صفحه وب با یک موجودیت استاندارد google.maps.Map
دارید که در آن یک نشانگر نشان داده شده است:
<!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, centered at Uluru
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, 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>
برای افزودن جاوا اسکریپت SDK:
- کدی را برای کارخانه توکن احراز هویت اضافه کنید.
- یک ارائه دهنده مکان را در تابع
initMap()
راه اندازی کنید. - نمای نقشه را در تابع
initMap()
راه اندازی کنید. نمای شامل نقشه است. - سفارشی سازی خود را به تابع callback برای مقداردهی اولیه نمای نقشه منتقل کنید.
- کتابخانه مکان را به بارگذار API اضافه کنید.
مثال زیر تغییراتی که باید انجام شود را نشان می دهد:
<!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
async 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.FleetEngineTripLocationProvider({
projectId: "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.tripId = TRIP_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, 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 SDK 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 انجام دهید، اکنون روی نقشه نمایش داده می شود.