Places Widgets

PlaceAutocompleteElement دروس

صف واحد (google.maps.places.PlaceAutocompleteElement)

  • PlaceAutocompleteElement هي فئة فرعية من HTMLElement توفر مكوِّن واجهة مستخدم لواجهة برمجة تطبيقات Places Autocomplete API. بعد تحميل مكتبة places، يمكن إنشاء إدخال بوظيفة إكمال تلقائي بتنسيق HTML. مثال: 
    <gmp-placeautocomplete ></gmp-placeautocomplete>

العنصر المخصّص:
<gmp-placeautocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-placeautocomplete>

تمتد هذه الفئة إلى HTMLElement.

تُنفذ هذه الفئة PlaceAutocompleteElementOptions.

يمكنك الوصول من خلال الاتصال على الرقم const {PlaceAutocompleteElement} = await google.maps.importLibrary("places"). يمكنك الاطّلاع على المكتبات في Maps JavaScript API.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
المَعلمات: 
componentRestrictions
النوع:  ComponentRestrictions optional
القيود على المكوّنات. ويتم استخدام قيود المكونات لتقييد التوقعات على العناصر داخل المكون الرئيسي فقط. على سبيل المثال، البلد.
locationBias
النوع:  LocationBias optional
حد مطفي أو تلميح لاستخدامه عند البحث عن أماكن.
locationRestriction
النوع:  LocationRestriction optional
قيود لتقييد نتائج البحث.
name
النوع:  string optional
الاسم الذي سيتم استخدامه لعنصر الإدخال. يمكنك الانتقال إلى https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name للاطّلاع على التفاصيل. يتّبع سلوك سمة الاسم نفسه للإدخالات لاحظ أن هذا هو الاسم الذي سيتم استخدامه عند إرسال نموذج. يمكنك الاطّلاع على https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form للحصول على مزيد من التفاصيل.
سمة HTML:
  • <gmp-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
النوع:  string optional
تمثّل هذه السمة معرّف اللغة للّغة التي يجب عرض النتائج بها، إذا أمكن. قد يتم منح نتائج البحث باللغة المحدّدة ترتيبًا أعلى، ولكن لا تقتصر الاقتراحات على هذه اللغة. اطّلِع على قائمة اللغات المتاحة.
سمة HTML:
  • <gmp-placeautocomplete requested-language="string"></gmp-placeautocomplete>
requestedRegion
النوع:  string optional
رمز منطقة يُستخدم لتنسيق النتائج وفلترة النتائج. ولن يؤدي ذلك إلى حصر الاقتراحات بهذا البلد. يقبل رمز المنطقة قيمة مكوَّنة من حرفين ccTLD ("نطاق المستوى الأعلى"). تتطابق معظم رموز ccTLD مع رموز ISO 3166-1، مع بعض الاستثناءات الملحوظة. على سبيل المثال، نطاق المستوى الأعلى الذي يتم ترميزه حسب البلد (ccTLD) في المملكة المتحدة هو "uk" (.co.uk) في حين أنّ رمز ISO 3166-1 هو "gb" (من الناحية التقنية لكيان "المملكة المتحدة لبريطانيا العظمى وأيرلندا الشمالية").
سمة HTML:
  • <gmp-placeautocomplete requested-region="string"></gmp-placeautocomplete>
types
النوع:  Array<string> optional
أنواع التوقعات التي سيتم عرضها. ولمعرفة الأنواع المتوافقة، يُرجى الاطّلاع على دليل المطوّر. إذا لم يتمّ تحديد أي أنواع، سيتم عرض جميع الأنواع.
سمة HTML:
  • <gmp-placeautocomplete types="type1 type2 type3..."></gmp-placeautocomplete>
prediction-item
يشير ذلك المصطلح إلى عنصر في القائمة المنسدلة الخاصة بعبارات البحث المقترحة يمثّل توقّعًا واحدًا.
prediction-item-icon
الرمز الذي يظهر إلى يمين كل عنصر في قائمة التوقعات.
prediction-item-main-text
جزء من عنصر التنبؤ الذي هو النص الرئيسي للتوقع. بالنسبة إلى المواقع الجغرافية، يحتوي ذلك على اسم مكان، مثل "سيدني"، أو اسم شارع ورقمه، مثل "10 شارع السلام". يظهر عنصر التنبؤ باللون الأسود بشكل افتراضي. إذا كان هناك أي نص إضافي في عنصر التنبؤ، فهو خارج نص التنبؤ-item-main-text ويكتسب نمطه من عنصر التنبؤ. لونه رمادي بشكل افتراضي. ويكون النص الإضافي عادةً عنوانًا.
prediction-item-match
جزء التوقع المعروض الذي يتطابق مع إدخال المستخدم. ويتم تلقائيًا تمييز هذا النص المطابق بنص غامق. تجدر الإشارة إلى أنّ النص المطابِق قد يكون في أي مكان ضمن عنصر التنبؤ. وليس بالضرورة أن يكون جزءًا من التنبؤ-item-main-text.
prediction-item-selected
تمثّل هذه السمة العنصر عند انتقال المستخدم إليه عبر لوحة المفاتيح. ملاحظة: ستتأثر السلع التي اخترتها بأنماط أجزاء هذا الجزء وكذلك بأنماط أجزاء عنصر التوقّعات.
prediction-list
العنصر المرئي الذي يحتوي على قائمة بعبارات البحث المقترحة التي تعرضها خدمة الإكمال التلقائي للأماكن تظهر هذه القائمة كقائمة منسدلة أسفل PlaceAutocompleteElement.
BetaaddEventListener
addEventListener(type, listener[, options])
المَعلمات: 
  • type:  string سلسلة حسّاسة لحالة الأحرف وتمثِّل نوع الحدث المطلوب الاستماع إليه
  • listener:  EventListener|EventListenerObject العنصر الذي يتلقّى إشعارًا يجب أن تكون هذه دالة أو كائنًا باستخدام طريقةhandEvent
  • options:  boolean|AddEventListenerOptions optional يمكنك الاطّلاع على الخيارات. لا تتوافق الأحداث المخصّصة إلّا مع capture وpassive.
قيمة الإرجاع:  void
لإعداد دالة سيتم استدعاؤها كلما تم تسليم الحدث المحدد إلى الهدف. الاطّلاع على addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
المَعلمات: 
  • type:  string سلسلة تحدِّد نوع الحدث المطلوب إزالة أداة معالجة الحدث منه.
  • listener:  EventListener|EventListenerObject أداة معالجة الحدث لمعالج الحدث المطلوب إزالتها من هدف الحدث.
  • options:  boolean|EventListenerOptions optional الاطّلاع على الخيارات
قيمة الإرجاع:  void
لإزالة أداة معالجة حدث تم تسجيلها سابقًا باستخدام addEventListener من الهدف. راجِع removeEventListener

واجهة PlaceAutocompleteElementOptions

واجهة google.maps.places.PlaceAutocompleteElementOptions

خيارات إنشاء PlaceAutocompleteElement
componentRestrictions optional
النوع:  ComponentRestrictions optional
عرض PlaceAutocompleteElement.componentRestrictions
locationBias optional
النوع:  LocationBias optional
عرض PlaceAutocompleteElement.locationBias
locationRestriction optional
النوع:  LocationRestriction optional
عرض PlaceAutocompleteElement.locationRestriction
requestedLanguage optional
النوع:  string optional
عرض PlaceAutocompleteElement.requestedLanguage
requestedRegion optional
النوع:  string optional
عرض PlaceAutocompleteElement.requestedRegion
types optional
النوع:  Array<string> optional
عرض PlaceAutocompleteElement.types

فئة PlaceAutocompletePlaceSelectEvent

صف واحد (google.maps.places.PlaceAutocompletePlaceSelectEvent)

يتم إنشاء هذا الحدث بعد أن يختار المستخدم مكانًا باستخدام عنصر الإكمال التلقائي للأماكن. يمكنك الوصول إلى الاختيار باستخدام "event.place".

تمتد هذه الفئة إلى Event.

يمكنك الوصول من خلال الاتصال على الرقم const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places"). يمكنك الاطّلاع على المكتبات في Maps JavaScript API.
Betaplace
النوع:  Place

فئة PlaceAutocompleteRequestErrorEvent

صف واحد (google.maps.places.PlaceAutocompleteRequestErrorEvent)

يتم إرسال هذا الحدث من خلال PlaceAutocompleteElement عند وجود مشكلة في طلب الشبكة.

تمتد هذه الفئة إلى Event.

يمكنك الوصول من خلال الاتصال على الرقم const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places"). يمكنك الاطّلاع على المكتبات في Maps JavaScript API.

صف الإكمال التلقائي

صف واحد (google.maps.places.Autocomplete)

أداة توفّر توقّعات بالأماكن استنادًا إلى الإدخال النصي للمستخدم يرفق مع عنصر إدخال من النوع text، ويستمع إلى إدخال نص في هذا الحقل. يتم عرض قائمة التوقعات كقائمة منسدلة ويتم تحديثها عند إدخال نص.

تمتد هذه الفئة إلى MVCObject.

يمكنك الوصول من خلال الاتصال على الرقم const {Autocomplete} = await google.maps.importLibrary("places"). يمكنك الاطّلاع على المكتبات في Maps JavaScript API.
Autocomplete
Autocomplete(inputField[, opts])
المَعلمات: 
تنشئ هذه الدالة مثيلاً جديدًا من Autocomplete يتم إرفاقه بحقل إدخال النص المحدّد بالخيارات المتاحة.
getBounds
getBounds()
المَعلمات: لا شيء
قيمة العرض:  LatLngBounds|undefined حدود الانحياز.
لعرض الحدود التي تكون التوقعات متحيزة لها.
getFields
getFields()
المَعلمات: لا شيء
قيمة الإرجاع:  Array<string>|undefined
لعرض الحقول المطلوب تضمينها للمكان في استجابة التفاصيل عندما يتم استرداد التفاصيل بنجاح. للحصول على قائمة بالحقول، يُرجى الاطّلاع على PlaceResult.
getPlace
getPlace()
المَعلمات: لا شيء
قيمة الإرجاع:  PlaceResult المكان الذي اختاره المستخدم.
تعرض تفاصيل المكان الذي اختاره المستخدم إذا تم استرداد التفاصيل بنجاح. وبخلاف ذلك، يتم عرض كائن stub Place، مع ضبط السمة name على القيمة الحالية لحقل الإدخال.
setBounds
setBounds(bounds)
المَعلمات: 
قيمة الإرجاع: لا شيء
لضبط المنطقة المفضلة التي سيتم من خلالها عرض نتائج المكان. نتائج البحث منحازة، على سبيل المثال لا الحصر، هذه المنطقة.
setComponentRestrictions
setComponentRestrictions(restrictions)
المَعلمات: 
قيمة الإرجاع: لا شيء
لضبط القيود المفروضة على المكوّنات. ويتم استخدام قيود المكونات لتقييد التوقعات على العناصر داخل المكون الرئيسي فقط. على سبيل المثال، البلد.
setFields
setFields(fields)
المَعلمات: 
  • fields:  Array<string> optional
قيمة الإرجاع: لا شيء
تحدد الحقول التي سيتم تضمينها في المكان في استجابة التفاصيل عندما يتم استرداد التفاصيل بنجاح. للحصول على قائمة بالحقول، يُرجى الاطّلاع على PlaceResult.
setOptions
setOptions(options)
المَعلمات: 
قيمة الإرجاع: لا شيء
setTypes
setTypes(types)
المَعلمات: 
  • types:  Array<string> optional أنواع عبارات البحث المقترحة التي سيتم تضمينها.
قيمة الإرجاع: لا شيء
تُستخدَم لتحديد أنواع عبارات البحث المقترحة التي سيتم عرضها. ولمعرفة الأنواع المتوافقة، يُرجى الاطّلاع على دليل المطوّر. إذا لم يتمّ تحديد أي أنواع، سيتم عرض جميع الأنواع.
المحتوى المُكتسَب: addListener، bindTo، get، notify، set، setValues، unbind، unbindAll
place_changed
function()
الوسيطات: لا شيء
يتم تنشيط هذا الحدث عند توفُّر PlaceResult لمكان اختاره المستخدم.
إذا أدخل المستخدم اسم مكان لم يتم اقتراحه من خلال عنصر التحكّم وضغط على مفتاح Enter، أو إذا تعذّر طلب تفاصيل المكان، سيحتوي عنصر PlaceResult على البيانات التي أدخلها المستخدم في السمة name، بدون تحديد خصائص أخرى.

واجهة AutocompleteOptions

واجهة google.maps.places.AutocompleteOptions

تعرض هذه السمة الخيارات التي يمكن ضبطها على عنصر Autocomplete.
bounds optional
النوع:  LatLngBounds|LatLngBoundsLiteral optional
المنطقة التي يتم البحث فيها عن الأماكن.
componentRestrictions optional
النوع:  ComponentRestrictions optional
القيود على المكوّنات. ويتم استخدام قيود المكونات لتقييد التوقعات على العناصر داخل المكون الرئيسي فقط. على سبيل المثال، البلد.
fields optional
النوع:  Array<string> optional
الحقول التي سيتم تضمينها في المكان في ردّ التفاصيل عند استرداد التفاصيل بنجاح، وسيتم تحصيل رسوم مقابل ذلك. في حال اجتياز ['ALL']، سيتم عرض جميع الحقول المتاحة وتحصيل الرسوم مقابلها (لا يُنصَح بهذا الإجراء لعمليات نشر الإنتاج). للحصول على قائمة بالحقول، يُرجى الاطّلاع على PlaceResult. يمكن تحديد الحقول المتداخلة باستخدام مسارات النقاط (مثل "geometry.location")، والحقل التلقائي هو ['ALL'].
placeIdOnly optional
النوع:  boolean optional
ما إذا كان سيتم استرداد أرقام تعريف الأماكن فقط. ستحتوي "نتيجة المكان" التي يتم توفيرها عند تنشيط حدث "place_changed" على حقول "place_id" و"الأنواع" و"الاسم" فقط، مع "place_id" والأنواع والوصف الذي تعرِضه خدمة "الإكمال التلقائي". تكون متوقفة تلقائيًا.
strictBounds optional
النوع:  boolean optional
قيمة منطقية، تشير إلى أنّ أداة الإكمال التلقائي يجب أن تعرض فقط الأماكن داخل حدود تطبيق ميزة الإكمال التلقائي عند إرسال طلب البحث. ويؤدي ضبط صارمة Bounds على false (وهو الإعداد التلقائي) إلى جعل النتائج منحازة، على سبيل المثال لا الحصر، للأماكن الموجودة ضمن الحدود.
types optional
النوع:  Array<string> optional
أنواع التوقعات التي سيتم عرضها. ولمعرفة الأنواع المتوافقة، يُرجى الاطّلاع على دليل المطوّر. إذا لم يتمّ تحديد أي أنواع، سيتم عرض جميع الأنواع.

صف واحد (google.maps.places.SearchBox)

أداة توفّر توقعات طلبات البحث استنادًا إلى الإدخال النصي للمستخدم يرفق مع عنصر إدخال من النوع text، ويستمع إلى إدخال نص في هذا الحقل. يتم عرض قائمة التوقعات كقائمة منسدلة ويتم تحديثها عند إدخال نص.

تمتد هذه الفئة إلى MVCObject.

يمكنك الوصول من خلال الاتصال على الرقم const {SearchBox} = await google.maps.importLibrary("places"). يمكنك الاطّلاع على المكتبات في Maps JavaScript API.
SearchBox
SearchBox(inputField[, opts])
المَعلمات: 
تنشئ هذه الدالة مثيلاً جديدًا من SearchBox يتم إرفاقه بحقل إدخال النص المحدّد بالخيارات المتاحة.
getBounds
getBounds()
المَعلمات: لا شيء
قيمة الإرجاع:  LatLngBounds|undefined
لعرض الحدود المتحيزة لعبارات البحث المقترحة.
getPlaces
getPlaces()
المَعلمات: لا شيء
قيمة الإرجاع:  Array<PlaceResult>|undefined
تعرض طلب البحث الذي اختاره المستخدم لاستخدامه مع حدث places_changed.
setBounds
setBounds(bounds)
المَعلمات: 
قيمة الإرجاع: لا شيء
لضبط المنطقة على استخدامها لانحياز توقعات طلبات البحث ستكون النتائج منحازة نحو هذه المنطقة فقط ولن تقتصر عليها بشكل كامل.
المحتوى المُكتسَب: addListener، bindTo، get، notify، set، setValues، unbind، unbindAll
places_changed
function()
الوسيطات: لا شيء
يتم تنشيط هذا الحدث عندما يختار المستخدِم طلب بحث، ويجب استخدام getPlaces للوصول إلى أماكن جديدة.

واجهة SearchBoxOptions

واجهة google.maps.places.SearchBoxOptions

تمثّل هذه السمة الخيارات التي يمكن ضبطها على عنصر SearchBox.
bounds optional
النوع:  LatLngBounds|LatLngBoundsLiteral optional
المنطقة التي تريد تحيز توقعات طلب البحث تجاهها. تكون التوقعات منحازة نحو، على سبيل المثال لا الحصر، طلبات البحث التي تستهدف هذه الحدود.