عارض حي سكني

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

فهم الشفرة

ضبط تكرار أنواع الأماكن

عند تحديد أنواع الأماكن لعرض مكتبة السياقات المحلية، يمكنك تعيين ترجيح نسبي لكل خاصية باستخدام السمة weight (الأنواع التي لها ترجيح نسبي أعلى ستظهر غالبًا). ويحدد هذا المثال معدل تكرار أعلى للمتنزهات والمؤسسات التعليمية إذا كان ذلك متاحًا.

TypeScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

JavaScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

الإكمال التلقائي للأماكن

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

  1. مكّن واجهة برمجة تطبيقات الأماكن لمشروعك.
  2. حمّل مكتبة الأماكن وواجهة برمجة تطبيقات جافا سكريبت، بالإضافة إلى مكتبة السياقات المحلية.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext,places&v=beta&callback=initMap">
</script>

  1. اتبع وثائق Autocomplete وعينات الشفرة للتعرف على كيفية إضافة شريط بحث الإكمال التلقائي للأماكن إلى موقعك على الويب أو خريطتك. في هذا المثال، السطور ذات الصلة هي:

TypeScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input")! as HTMLInputElement;
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

JavaScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

تجربة النموذج