ویجت متنی یک پیشنهاد Google Maps Pre-GA است که یک ظرف بصری است که برای پشتیبانی یا تکمیل سایر محتوای Google Maps استفاده میشود. ویجت زمینهای Google Maps به شما امکان میدهد Grounding را با Google Maps در برنامههای خود ادغام کنید تا یک تجربه چت مبتنی بر LLM مکالمه ایجاد کنید. ویجت متنی با استفاده از نشانه زمینه، googleMapsWidgetContextToken
، ارائه میشود که در پاسخ Vertex AI API برگردانده میشود و میتواند برای ارائه محتوای بصری استفاده شود.
ویجت متنی بسته به سناریوی شما عملکردهای مختلفی را انجام می دهد:
- در سناریویی که از Google Maps برای تولید پاسخ استفاده میشود، محتوای ذهنی تولید شده توسط کاربر (UGC) را نمایش میدهد.
- هنگامی که Vertex AI فقط یک پاسخ متنی ایجاد می کند، به غنی سازی نتایج با تجسم نقشه و داده ها کمک می کند.
ویجت متنی چگونه کار می کند
ویجت متنی پاسخی از Grounding with Google Maps در Vertex AI را به شکل googleMapsWidgetContextToken
نمایش می دهد. از این نشانه برای رندر کردن ویجت متنی و نمایش پاسخ استفاده کنید. بیشتر بدانید . جریان رویداد به شرح زیر است:
- با پرس و جوی مبتنی بر Google Maps با Vertex AI API تماس بگیرید.
- Vertex AI یک
googleMapsWidgetContextToken
را برمی گرداند. - ویجت متنی را با استفاده از توکن رندر کنید.
- ویجت متنی پاسخ Vertex AI را نشان می دهد.
مثال زیر نشان میدهد که یک توکن متنی هنگام بازگشت از Vertex AI API چگونه به نظر میرسد.
"googleMapsWidgetContextToken": "widgetcontent/AcBXPQdpWQWbap9H-OH8sEKmOXxmEKAYvff0tvthhneMQC3VrqWCjpnPBl4-Id98FGiA_S_t8aeAeJj0T6JkWFX56Bil8oBSR0W8JH3C_RSYLbTjxKdpxc9yNn6JcZTtolIRZon9xi6WpNGuSyjcIxWu2S0hwpasNOpUlWrG1RxVCB4WD1fsz_pwR236mG36lMxevXTQ_JnfdYNuQwQ4Lc3vn...<snip>... Ts5VJE_b3IC5eE_6wez0nh61r7foTUZpP7BXMwxR-7Wyfcj6x1v6mIWsFGr1o0p_HSAMNqWPg-aFVnkPLhAkOR6MaNZOfezTva-gxHlu7z_haFvYxcUE1qfNVQ",
ویجت متنی Google Maps را رندر کنید
برای ارائه و استفاده از ویجت متنی Google Maps، از نسخه آلفای Maps JavaScript API در صفحه ای که ویجت را نمایش می دهد استفاده کنید. برای اطلاعات بیشتر، به بارگیری Maps JavaScript API مراجعه کنید. همچنین باید از کلید API که برای بارگیری Google Maps JavaScript API فعال شده است استفاده کنید. بررسی کنید که کتابخانه places
بارگیری شده است.
بخش زیر نحوه رندر کردن ویجت متنی Google Maps را شرح می دهد. با استفاده از HTML سفارشی یا با جاوا اسکریپت یک ویجت متنی ایجاد کنید.
از عناصر HTML سفارشی استفاده کنید
بخش زیر نحوه رندر کردن ویجت متنی Google Maps را با استفاده از عناصر HTML سفارشی توضیح میدهد. با افزودن عنصر gmp-place-contextual
به صفحه، یک ویجت متنی ایجاد کنید.
عنصر
gmp-place-contextual
را به صفحه اضافه کنید:<gmp-place-contextual id="widget"></gmp-place-contextual>
در هر پاسخی که با Google Maps پایه گذاری شده باشد، یک
googleMapsWidgetContextToken
مربوطه وجود دارد که می تواند برای ارائه ویجت متنی استفاده شود. تابع زیر نحوه به روز رسانی کد متن را نشان می دهد:let widget = document.querySelector('#widget'); // a div that contains the widget widget.contextToken = contextToken;
- اختیاری: طرح فهرست را مشخص کنید. مقادیر معتبر شامل موارد زیر است:
- طرح بندی فشرده:
<gmp-place-contextual-list-config layout="compact">
- طرح بندی عمودی:
<gmp-place-contextual-list-config layout="vertical">
مثال زیر نحوه تغییر طرح لیست به فشرده را نشان می دهد:
<gmp-place-contextual id="widget"> <gmp-place-contextual-list-config layout="compact"> </gmp-place-contextual-list-config> </gmp-place-contextual>
- طرح بندی فشرده:
- اختیاری: حالت نقشه را تغییر دهید. مقادیر معتبر شامل موارد زیر است:
- نقشه راه دوبعدی:
<gmp-place-contextual-map-config map-mode="roadmap">
- نقشه ترکیبی سه بعدی:
<gmp-place-contextual-map-config map-mode="hybrid">
- بدون نقشه:
<gmp-place-contextual-map-config map-mode="none">
مثال زیر نحوه تغییر حالت نقشه به نقشه دو بعدی را نشان می دهد: - نقشه راه دوبعدی:
<gmp-place-contextual id="widget"> <gmp-place-contextual-map-config map-mode="roadmap"> </gmp-place-contextual-map-config> </gmp-place-contextual>
از جاوا اسکریپت استفاده کنید
بخش زیر نحوه رندر کردن ویجت متنی Google Maps را با ایجاد برنامهنویسی PlaceContextualElement
و الحاق آن به DOM توضیح میدهد.
یک ویجت متنی ایجاد کنید.
let widget = document.querySelector('#widget'); // a div that contains the widget async function createWidget(contextToken) { await google.maps.importLibrary('places'); const placeContextualElement = new google.maps.places.PlaceContextualElement({ contextToken }); // contextToken can be empty at initialization. widget.appendChild(placeContextualElement); }
- در هر پاسخی که مبتنی بر نقشه های گوگل باشد، یک
googleMapsWidgetContextToken
مربوطه وجود دارد که برای ارائه ویجت متنی استفاده می شود. تابع زیر نحوه به روز رسانی کد متن را نشان می دهد:widget.contextToken = contextToken;
- اختیاری: طرح فهرست را مشخص کنید. مقادیر معتبر شامل موارد زیر است:
- طرح بندی فشرده:
google.maps.places.PlaceContextualListLayout.COMPACT
- طرح بندی عمودی:
google.maps.places.PlaceContextualListLayout.VERTICAL
- طرح بندی فشرده:
- اختیاری: حالت نقشه را تغییر دهید. مقادیر معتبر شامل موارد زیر است:
- نقشه راه دوبعدی:
google.maps.places.PlaceContextualListMapMode.ROADMAP
- نقشه ترکیبی سه بعدی:
google.maps.places.PlaceContextualListMapMode.HYBRID
- بدون نقشه:
google.maps.places.PlaceContextualListMapMode.NONE
- نقشه راه دوبعدی:
مثال زیر نحوه تغییر طرح لیست به فشرده را نشان می دهد:
const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({ layout: google.maps.places.PlaceContextualListLayout.COMPACT }); widget.appendChild(widgetConfig);
مثال زیر نحوه تغییر حالت نقشه به نقشه دو بعدی را نشان می دهد:
const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({ mapMode: google.maps.places.PlaceContextualListMapMode.ROADMAP }); widget.appendChild(widgetConfig);