با نحوه انتقال پیادهسازی Places API یا Place Class موجود به مؤلفههای «کیت میانای کاربر جاها» آشنا شوید.
این راهنما برای چه کسانی است
این راهنما برای توسعهدهندگانی است که درحالحاضر از Places API استفاده میکنند و میخواهند کد خود را برای استفاده از «کیت میانای کاربر جاها» بهروز کنند. اگر ازقبل موارد زیر را انجام داده باشید، این راهنما بیشترین کمک را به شما خواهد کرد:
- درخواستهای HTTP به نقاط پایانی Places API (جدید یا قدیمی) ارسال میکنند.
- استفاده از کلاس مکان در Maps JavaScript API.
- مدیریت پاسخ میانای برنامهسازی کاربردی برای ارائه اطلاعات مکان در واسط کاربر برنامه وب شما.
پیشنیازها
کیت میانای کاربر «جاها» را در «پروژه Google Cloud» خود فعال کنید. میتوانید همچنان از کلید میانای برنامهسازی کاربردی موجودتان استفاده کنید یا کلید جدیدی برای «کیت میانای کاربر جاها» تولید کنید. برای اطلاعات بیشتر، ازجمله محدود کردن کلید، به استفاده از کلیدهای میانای API مراجعه کنید.
بار کردن میانای برنامهسازی کاربردی جاوا اسکریپت در Maps بهروزرسانی
«کیت میانای کاربر جاها» به روش وارد کردن کتابخانه پویا برای بار کردن Maps JavaScript API نیاز دارد. اگر از برچسب بارگیری مستقیم اسکریپت استفاده میکنید، باید آن را بهروز کنید.
پساز بهروزرسانی اسکریپت بارگیری برای Maps JavaScript API، برای استفاده از «کیت میانای کاربر جاها»، کتابخانههای موردنیاز را وارد کنید.
پیادهسازی عنصر جزئیات جا
عنصر جزئیات جا و عنصر فشرده جزئیات جا عناصر HTML هستند که جزئیات جا را ارائه میدهند.
پیادهسازی فعلی
- بااستفاده از درخواست اچتیتیپی، تماس «جزئیات جا» برقرار میکنید یا از «کلاس جا» در JavaScript API استفاده میکنید.
- پاسخ میانای برنامهسازی کاربردی را تجزیه میکنید و جزئیات مکان را بااستفاده از HTML و CSS نمایش میدهید.
انتقال به عنصر جزئیات جا
اصلاح ساختار HTML
محفظه HTML را که جزئیات مکان در آن ارائه میشود شناسایی کنید. عناصر HTML سفارشیتان (div، span برای نام، نشانی، عکس، و غیره) را با html «عنصر جزئیات جا» جایگزین کنید.
دو عنصر برای انتخاب وجود دارد:
- عنصر فشرده جزئیات جا
- عنصر جزئیات جا
برای اطلاعات بیشتر درباره اینکه از کدامیک استفاده کنید، به عنصر جزئیات جا مراجعه کنید.
HTML موجود شما ممکن است به این شکل باشد.
<div id="my-place-details-container">
<h2 id="place-name"></h2>
<p id="place-address"></p>
<img id="place-photo" src="" alt="Place photo">
<!-- ... more custom elements -->
</div>
نمونه HTML جدید، که بهطور صریح بیان میکند کدام محتوا نمایش داده شود:
<gmp-place-details-compact orientation="horizontal" truncation-preferred style="display: none;">
<gmp-place-details-place-request></gmp-place-details-place-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
<gmp-place-address></gmp-place-address>
<gmp-place-rating></gmp-place-rating>
<gmp-place-type></gmp-place-type>
<gmp-place-price></gmp-place-price>
<gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
<gmp-place-open-now-status></gmp-place-open-now-status>
</gmp-place-content-config>
</gmp-place-details-compact>
منطبق کردن منطق جاوا اسکریپت
منطق موجود
منطق فعلی شما احتمالاً شامل موارد زیر است:
- درحال بازیابی شناسه مکان.
- استفاده از
PlacesService().getDetails()یا برقراری تماس سرویس وب. - مشخص کردن آرایه فیلدها (برای JS API) یا FieldMask (برای سرویس وب) برای درخواست دادههای خاص.
- در وضوح فراخوانی، عناصر HTML خود را بهصورت دستی انتخاب کنید و آنها را با دادههای دریافتی پر کنید.
در زیر مثالی از نحوه پیادهسازی «جزئیات مکان» آورده شده است:
async function getPlaceDetails(placeId) {
const { Place } = await google.maps.importLibrary('places');
// Use place ID to create a new Place instance.
const place = new Place({
id: placeId
});
await place.fetchFields({
fields: ['displayName', 'formattedAddress', 'location'],
});
// Log the result
console.log(place.displayName);
console.log(place.formattedAddress);
}
منطق جدید
منطق جدید شما شامل موارد زیر خواهد بود:
- «شناسه مکان» یا «شیء مکان» خود را بازیابی کنید.
- ارجاعی به عنصر
<gmp-place-details-place-request>دریافت کنید. - «شناسه مکان» یا «شیء مکان» را به ویژگی مکان در عنصر
<gmp-place-details-place-request>ارسال کنید.
در زیر نمونهای از نحوه پیادهسازی کیت میانای کاربری «جزئیات مکان» در منطق جاوا اسکریپت شما آورده شده است. مرجعی برای «عنصر جزئیات مکان» دریافت کنید. اگر این
وجود دارد، مرجعی برای عنصر «درخواست جا» در «جزئیات جا» دریافت کنید و
ویژگی جا را بااستفاده از «شناسه جا» تنظیم کنید. در نمونه کد HTML بالا، سبک «عنصر جزئیات جا» روی display: none تنظیم شده است. این به display:
block بهروزرسانی شده است.
function displayPlaceDetailsWithUIKit(placeId) {
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
if (placeDetailsElement) {
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
// Configure the element with the Place ID
placeDetailsRequest.place = placeId
placeDetailsElement.style.display = 'block';
console.log("PlaceDetailsElement configured for place:", placeId);
} else {
console.error("PlaceDetailsElement not found in the DOM.");
}
}
// Example usage:
const placeId = 'ChIJC8HakaIRkFQRiOgkgdHmqkk';
displayPlaceDetailsWithUIKit(placeId);
پیادهسازی عنصر جستجوی جاها
عنصر جستجوی جاها یک عنصر HTML است که نتایج جستجوی جاها را بهصورت فهرست ارائه میدهد.
پیادهسازی فعلی
- بااستفاده از درخواست اچتیتیپی، «جستجوی نوشتار» یا «جستجوی اطراف» انجام میدهید، یا از «کلاس مکان میانای برنامهسازی کاربردی جاوا اسکریپت» استفاده میکنید.
- پارامترهای پُرسمان، محدودیتها یا سوگیریهای مکان، انواع، و فیلدهای درخواستی را بااستفاده از FieldMask مشخص میکنید.
- پاسخ میانای برنامهسازی کاربردی را تجزیه میکنید، در آرایه مکانها تکرار میکنید، و بهصورت دستی موارد فهرست HTML را ایجاد میکنید.
انتقال به عنصر جستجوی جاها
اصلاح ساختار HTML
ظرف HTML را که فهرست مکانتان را در آن ارائه میکنید شناسایی کنید. عناصر HTML سفارشیتان (div، span برای نام، نشانی، و غیره) را با عنصر html «عنصر جستجوی جاها» جایگزین کنید.
HTML موجود شما ممکن است چیزی شبیه به این باشد:
<div id="search-results-area">
<h3>Nearby Places:</h3>
<ul id="manual-places-list">
<!-- JavaScript would dynamically insert list items here -->
<!-- Example of what JS might generate:
<li class="place-entry" data-place-id="SOME_PLACE_ID_1">
<img class="place-icon" src="icon_url_1.png" alt="Icon">
<span class="place-name">Place Name One</span> -
<span class="place-vicinity">123 Main St</span>
</li>
<li class="place-entry" data-place-id="SOME_PLACE_ID_2">
<img class="place-icon" src="icon_url_2.png" alt="Icon">
<span class="place-name">Place Name Two</span> -
<span class="place-vicinity">456 Oak Ave</span>
</li>
-->
<li class="loading-message">Loading places...</li>
</ul>
</div>
«عنصر جستجوی جاها» بااستفاده از مؤلفه <gmp-place-search> پیادهسازی میشود. برای پیکربندی نوع جستجو، یکی از مؤلفههای پیکربندی شکافدار زیر را در داخل آن قرار دهید:
<gmp-place-text-search-request>برای «جستجوی نوشتار».<gmp-place-nearby-search-request>برای «جستجوی اطراف».
برای تعریف نحوه نمایش نتایج، میتوانید از میانبر <gmp-place-all-content>
استفاده کنید یا مجموعه مؤلفههای ارائه فردی خودتان را ارائه دهید. مشخصههای کلیدی مثل selectable (برای مجاز کردن کلیک روی موارد فهرست) و orientation (برای چیدمان افقی یا عمودی) را میتوان مستقیماً در مؤلفه والد تنظیم کرد.
نمونه «جستجوی اطراف»
<gmp-place-search orientation="horizontal" selectable>
<gmp-place-all-content> </gmp-place-all-content>
<gmp-place-nearby-search-request></gmp-place-nearby-search-request>
</gmp-place-search>
نمونه «جستجوی نوشتار»
<gmp-place-search orientation="horizontal" selectable>
<gmp-place-all-content> </gmp-place-all-content>
<gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>
منطبق کردن منطق جاوا اسکریپت
در جاوا اسکریپت، بااستفاده از
document.querySelector()، مرجعی برای مؤلفه کنترلکننده جستجو دریافت کنید. بسته به تنظیمات شما، این عنصر
<gmp-place-text-search-request> یا <gmp-place-nearby-search-request>
خواهد بود.
سپس، ویژگیهای این کنترلکننده را برای تعریف جستجویتان تنظیم کنید. ویژگیهای موردنیاز به نوع جستجویی که انجام میدهید بستگی دارد.
برای «جستجوی نوشتار» (<gmp-place-text-search-request>)، ویژگی اصلی
textQuery است:
const textSearchController = document.querySelector('gmp-place-text-search-request');
textSearchController.textQuery = 'museums in London';
برای «جستجوی اطراف» (<gmp-place-nearby-search-request>)، باید
محدوده جستجو را بااستفاده از locationRestriction تعریف کنید. سپس میتوانید از includedTypes برای
فیلتر کردن انواع خاصی از مکانها در آن منطقه استفاده کنید:
const nearbySearchController = document.querySelector('gmp-place-nearby-search-request');
nearbySearchController.locationRestriction = new google.maps.Circle({
center: { lat: 51.5190, lng: -0.1347 },
radius: 1000
});
nearbySearchController.includedTypes = ['restaurant'];
مؤلفه والد <gmp-place-search> بهمحض تنظیم ویژگیهای الزامی کنترلکنندهاش،
بهطور خودکار جستجوی جدیدی را آغاز میکند.
- برای «جستجوی نوشتار»، جستجو در لحظهای که مقداری را به
textQueryاختصاص میدهید اجرا میشود. - برای «جستجوی اطراف»، جستجو پساز ارائه
locationRestrictionمعتبر اجرا میشود.
پیادهسازی کردن عنصر تکمیل خودکار جا پایه
برای توسعهدهندگانی که به تجربه جستجو بدون واسط کاربر ارائهشده «عنصر جستجوی جا» نیاز دارند، عنصر تکمیل خودکار جا در دسترس است.
این عنصر برای ایجاد فیلد ورودی جستجو ایدهآل است و درعینحال کنترل کامل بر نحوه نمایش نتایج در میانای کاربر سفارشی شما را حفظ میکند. تنها مسئولیت «عنصر تکمیل خودکار» ارائه پیشبینیهای مکان همزمان با تایپ کردن کاربر و نمایش برنامهنویسیشده «شناسه مکان» برای مکان انتخابشده است.
این عنصر هیچ جزئیاتی را بهتنهایی نمایش نمیدهد یا اطلاعات دیگری را که بهطور برنامهنویسیشده قابلدسترسی باشد ارائه نمیدهد.
پیادهسازی فعلی
منطق فعلی شما احتمالاً شامل موارد زیر است:
- ارائه فیلد ورودی نوشتار در صفحهتان که با تایپ کردن کاربر، «تکمیل خودکار جا» را فراخوانی میکند و نتایج را نمایش میدهد.
- استفاده از «شناسه جا»ی مکان انتخابشده توسط کاربر برای واکشی جزئیات بیشتر، برای مثال بااستفاده از Place Details API.
- نمایش جزئیات مکان انتخابشده.
انتقال به عنصر تکمیل خودکار جا
اصلاح ساختار HTML
عنصر HTML را که ابزاره «تکمیل خودکار» را به آن پیوست میکنید شناسایی و حذف کنید. احتمالاً از فیلد ورودی HTML استاندارد استفاده میکند.
<input id="pac-input" type="text" placeholder="Search for a location" />
نمونه HTML جدید، بااستفاده از رویکرد مؤلفه وب برای مقداردهی اولیه عنصر «تکمیل خودکار جا» در صفحه شما.
<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
منطبق کردن منطق جاوا اسکریپت
منطق جاوا اسکریپت شما احتمالاً شامل ایجاد ابزاره «تکمیل خودکار» متصل به عنصر HTML input است. سپس این ابزاره به رویداد place_changed گوش میدهد و کنشی را با دادههای برگرداندهشده راهاندازی میکند.
نمونه جاوا اسکریپت موجود برای برداشتن:
// Get the input element
const input = document.getElementById("pac-input");
// Create the Autocomplete widget instance
const autocomplete = new google.maps.places.Autocomplete(input, {
fields: ["place_id", "geometry", "name"]
});
// Add a listener for the 'place_changed' event
autocomplete.addListener("place_changed", () => {
// Your logic to get and display place information
console.log(place.place_id);
});
منطق جدید JavaScript شما مرجعی به «عنصر تکمیل خودکار جا» دریافت خواهد کرد و به رویدادهای gmp-select گوش خواهد داد:
const placeAutocomplete = document.querySelector('gmp-basic-place-autocomplete');
placeAutocomplete.addEventListener('gmp-select', (event) => {
console.log(event.place);
});
با انتخاب مکانی در منو کرکرهای «تکمیل خودکار»، رویداد gmp-select
اجرا خواهد شد. «شناسه مکان» مکان انتخابشده را میتوان از شیء event بازیابی کرد. سپس میتوان از «شناسه جا» برای مقداردهی اولیه نمونهای از عنصر جزئیات جا استفاده کرد تا جزئیات جای انتخابشده نمایش داده شود.
سفارشیسازی نام کاربری
سفارشیسازی «عنصر جزئیات جا»
جهت
«عنصر جزئیات مکان» را میتوان در هر دو جهت افقی و عمودی ارائه کرد. از مشخصه orientation در gmp-place-details-compact برای انتخاب بین عمودی و افقی استفاده کنید. برای مثال:
<gmp-place-details-compact orientation="vertical">
فیلدهای موردنظر را برای پردازش انتخاب کنید
از عناصر محتوا برای مشخص کردن محتوایی که باید در «عنصر جزئیات مکان» ارائه شود استفاده کنید. برای مثال، مستثنی کردن عنصر محتوای <gmp-place-type>
مانع از این میشود که «عنصر جزئیات مکان» «نوع مکان» مکان انتخابشده را
پرداخت کند. برای مشاهده فهرست کامل عناصر محتوا، به
PlaceContentConfigElement
اسناد مرجع مراجعه کنید.
افزودن یا برداشتن فیلدها از «عنصر جزئیات مکان» هزینه ارائه عنصر در صفحه را تغییر نمیدهد.
تنظیم سبکهای CSS
ویژگیهای CSS سفارشی برای پیکربندی رنگها و قلمهای عنصر دردسترس است. برای مثال، برای تنظیم پسزمینه عنصر روی سبز، ویژگی CSS زیر را تنظیم کنید:
gmp-place-details-compact {
--gmp-mat-color-surface: green;
}
برای جزئیات بیشتر، اسناد مرجع
PlaceDetailsCompactElement
را ببینید.
سفارشیسازی «عنصر جستجوی مکان»
جهت
«عنصر جستجوی جاها» را میتوان در هر دو جهت افقی و عمودی ارائه کرد. از مشخصه orientation در <gmp-place-search> برای انتخاب
بین عمودی و افقی استفاده کنید. برای مثال:
<gmp-place-search orientation="horizontal" selectable>
فیلدهای موردنظر را برای پردازش انتخاب کنید
از عناصر محتوا برای مشخص کردن محتوایی که باید در «عنصر جستجوی جاها» ارائه شود استفاده کنید. از عنصر <gmp-place-all-content> میتوان برای نمایش همه محتوا استفاده کرد، یا میتوان از مجموعهای از برچسبهای html برای پیکربندی محتوای ارائهشده استفاده کرد.
گنجاندن <gmp-place-address> در <gmp-place-content-config> فقط
نشانی هر مکان را ارائه میدهد، برای مثال:
<gmp-place-search orientation="horizontal" selectable>
<gmp-place-content-config>
<gmp-place-address></gmp-place-address>
</gmp-place-content-config>
<gmp-place-text-search-request></gmp-place-text-search-request>
</gmp-place-search>
سفارشیسازی «عنصر تکمیل خودکار جا» پایه
تنظیم سبکهای CSS
ویژگیهای CSS سفارشی برای سفارشیسازی ظاهر و احساس عنصر «تکمیل خودکار» دردسترس است. برای مثال، برای تنظیم رنگ پسزمینه روی بنفش روشن،
خصوصیت background-color را روی عنصر تنظیم میکنید.
gmp-basic-place-autocomplete {
background-color: #d993e6;
}
برای جزئیات بیشتر، سند مرجع BasicPlaceAutocompleteElement را ببینید.
اداره کردن رویدادها و دادهها
«عناصر کیت میانای کاربر جاها» مؤلفههای تعاملیای هستند که به شما امکان میدهند رویدادها را بشنوید و دادهها را بهصورت برنامهنویسیشده بازیابی کنید.
گوش دادن به رویدادها
میتوانید شنوندگان رویداد را به عناصر اضافه کنید تا کنشها را براساس تعامل کاربر یا وضعیت عنصر راهاندازی کنید.
رویداد انتخاب
gmp-select: این رویداد زمانی فعال میشود که کاربر انتخابی انجام دهد.- در «عنصر جستجوی جاها»، وقتی کاربر روی مکانی در فهرست نتایج کلیک میکند، این رویداد راهاندازی میشود.
- در «عنصر تکمیل خودکار مکان پایه»، این رویداد زمانی فعال میشود که کاربر روی پیشبینیای در فهرست کرکرهای کلیک کند.
رویدادهای مشترک
عناصر «جستجوی جا»، «جزئیات جا»، و «تکمیل خودکار جا» همگی از رویدادهای زیر پشتیبانی میکنند:
gmp-load: زمانی فعال میشود که بار کردن و پردازش عنصر و محتوای آن بهپایان رسیده باشد.gmp-requesterror: زمانی فعال میشود که درخواست به سرور ناموفق باشد، برای مثال، بهدلیل نامعتبر بودن کلید میانای برنامهسازی کاربردی.
دسترسی به دادههای عنصر بهصورت برنامهریزیشده
میتوانید دادههای خاصی را بهصورت برنامهنویسیشده از عناصر بازیابی کنید، پساز اینکه با آنها تعامل برقرار شد یا بارگیری شدند.
- برای «عنصر جستجوی جا» و «عنصر جزئیات جا»، میتوانید اطلاعات زیر را بازیابی کنید:
- شناسه مکان
- مکان (طول و عرض جغرافیایی)
- ناحیه نمایش
- برای «عنصر تکمیل خودکار جا» در سطح «پایه»، میتوانید اطلاعات زیر را بازیابی کنید:
- شناسه مکان
همه دادههای دیگر موجود در عناصر بهصورت برنامهنویسیشده قابلدسترسی نیستند.
برای مثالهای دقیقتر، به اسناد جداگانه برای عنصر جستجوی جا، عنصر جزئیات جا، و عنصر تکمیل خودکار جا پایه مراجعه کنید.
آزمایش و پالایش
پساز ادغام کردن عنصر(های) «کیت میانای کاربر جاها»، آزمایش کردن برای انتقال روان و تجربه کاربری مثبت بسیار مهم است. آزمایش شما باید چندین حوزه کلیدی را پوشش دهد و به همه عناصری که پیادهسازی کردهاید بپردازد: عناصر «جزئیات جا»، «جستجوی جا»، و «تکمیل خودکار جا»ی پایه.
عنصر جزئیات جا
برای «عنصر جزئیات مکان»، ابتدا بررسی کنید که جزئیات بهدرستی برای طیف متنوعی از مکانها نمایش داده میشود. با ارسال «شناسههای مکان» مختلف به
ویژگی .place عنصر <gmp-place-details-place-request>، آزمایش کنید. از شناسههایی استفاده کنید که نشاندهنده انواع مختلف مؤسسات (کسبوکارهای دارای دادههای غنی، مکانهای جالب، نشانیهای اصلی) و مکانها در مناطق یا زبانهای مختلف باشند. به قالببندی، چیدمان، و وجود محتوا توجه زیادی داشته باشید.
عنصر جستجوی جاها
اگر «عنصر جستجوی جاها» را پیادهسازی کردهاید، نحوه ارائه و رفتار آن را در سناریوهای مختلف جستجو درستیسنجی کنید.
- برای «جستجوی نوشتار»، با تنظیم کردن ویژگی
textQueryدر عنصر<gmp-place-text-search-request>با ورودیهای مختلف آزمایش کنید: پرسمانهای گسترده، نشانیهای خاص، و پرسمانهای دارای سوگیری مکان. - برای «جستجوی اطراف»، با تنظیم کردن ویژگیهای
locationRestrictionوincludedTypesدر عنصر<gmp-place-nearby-search-request>آزمایش کنید. از اندازههای مختلف مکان و فیلترهای نوع استفاده کنید.
تأیید کنید که فهرست با نتایج مربوطه پر میشود و gmp-select
رویداد بهدرستی پساز انتخاب فعال میشود.
Basic Place Autocomplete Element
برای «عنصر تکمیل خودکار مکان پایه»، آزمایش را روی تعامل کاربر و
دادههای منتقلشده توسط رویداد انتخاب متمرکز کنید. تأیید کنید که رویداد gmp-select
وقتی کاربر روی پیشبینی کلیک میکند بهطور قابلاعتمادی فعال میشود. بررسی کنید که شیء event.place
در گرداننده رویداد حاوی «شناسه مکان» معتبر باشد.
مهمتر از همه، جریان سرتاسری را آزمایش کنید: مکانی را از منو کرکرهای «تکمیل خودکار» انتخاب کنید و درستیسنجی کنید که «شناسه جا» آن میتواند با موفقیت برای پر کردن عنصر دیگری، مانند «عنصر جزئیات جا»، استفاده شود.
مدیریت کردن خطا
آزمایش دقیق مدیریت خطا در تمام مؤلفهها ضروری است. ارسال «شناسههای مکان» نامعتبر یا غیرموجود به «عنصر جزئیات مکان» یا استفاده از پارامترهای جستجوی نامعتبر برای «عنصر جستجوی مکان» را شبیهسازی کنید. رویداد
gmp-requesterror را با شبیهسازی مشکلات شبکه یا استفاده از کلید میانای برنامهسازی کاربردی نامعتبر راهاندازی کنید تا مطمئن شوید برنامهتان آن را بهدرستی مدیریت میکند. پیامهای خطا و ثبت رویداد کاربرپسند را پیادهسازی کنید تا از واسط کاربر خراب یا گیجکننده جلوگیری شود.