إعداد خيارات السياق والخريطة المحلية

يتناول هذا القسم الخيارات التي يمكنك ضبطها على مثيل LocalContextMapView، والخيار الداخلي Map المضمّن في LocalContextMapView. عند إنشاء مثيل LocalContextMapView جديد، يتم تحديد ما يصل إلى 10 أنواع من الأماكن، بالإضافة إلى الحد الأقصى لعدد الأماكن المطلوب عرضها (ما يصل إلى 24 مكانًا). يتوافق الإصدار الداخلي Map مع جميع MapOptions واجهة برمجة التطبيقات القياسية لجافا سكريبت في الخرائط Map.

يمكنك تحديث خصائص البحث المحلي للسياق في أي وقت بعد تهيئة مكتبة السياقات المحلية. قد يؤدي تحديث أي من maxPlaceCount أو placeTypePreferences أو locationRestriction أو locationBias إلى بدء بحث جديد تلقائيًا.

تحديد أنواع الأماكن

يمكنك تحديد ما يصل إلى 10 أنواع من الأماكن التي يجب أن تعرضها مكتبة السياقات المحلية. حدِّد أنواع الأماكن باستخدام الخاصية placeTypePreferences وتمرير نوع أو أكثر من أنواع الأماكن كما هو موضّح في المثال التالي:

placeTypePreferences: ['restaurant', 'cafe']

ترجيح نوع المكان

يمكنك اختياريًا تعيين وزن نسبي لكل نوع محدد، مما يتسبب في زيادة عدد مرات ظهور أنواع الترجيح الأعلى. الوزن هو معلمة اختيارية متقدمة يجب استخدامها فقط عند الحاجة. عند حذف هذه المعلمة، ستحدِّد مكتبة السياقات المحلية الأوزان الافتراضية، والتي قد تتغير وتتحسن بمرور الوقت.

ويمكنك تحديد وزن نسبي لكل موقع باستخدام السمة weight. يوضّح المثال التالي ترجيح أنواع الأماكن المحدّدة لعرض ضعف عدد نتائج restaurant وcafe مقارنةً بـ primary_school:

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

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

تعيين الحد الأقصى لعدد الأماكن

لتعيين الحد الأقصى لعدد الأماكن (ما يصل إلى 24) التي يجب أن تعرضها مكتبة السياقات المحلية، استخدم الخاصية maxPlaceCount كما هو موضح هنا:

maxPlaceCount: 12

تعيين تقييد الموقع

يتم ربط عمليات البحث بإطار عرض الخريطة بشكلٍ تلقائي. يمكنك تحديد مجموعة من الحدود لتقييد نتائج البحث على منطقة أكبر أو أصغر. لإجراء ذلك، اضبط السمة locationRestriction لـ LocalContextMapView على السمة LatLngBounds المطلوبة. يمكن أن تكون هذه القيمة أكبر أو أصغر من إطار عرض الخريطة. شاهد مثالاً.

تمكين الاتجاهات

لتفعيل الاتجاهات على خريطتك، اضبط السمة directionsOptions على LocalContextMapView، مع تمرير عنصر كائن LLLng حرفيًا لنقطة الأصل (يتم تحديد نقطة النهاية عن طريق المكان المحدد حاليًا). وفي حال عدم تمرير نقطة الانطلاق، سيتم إيقاف الاتجاهات. ويوضح المثال التالي تعيين نقطة الانطلاق لتمكين اتجاهات المشي على الخريطة:

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

يؤثر حجم إطار عرض الخريطة، كما هو محدد في حدود الخريطة ومستوى التكبير/التصغير، في المسافات التي يمكن عرضها من نقطة انطلاق معينة مباشرة. على سبيل المثال، إذا تم تعيين إطار العرض على عرض منطقة بعرض 100 ميل، فمن الممكن أن تظهر نقاط الاهتمام على بعد يصل إلى 50 ميلاً من نقطة المصدر. لضمان عرض تطبيقك لمسارات المشي بمسافة معقولة، يمكنك:

• إيقاف اتجاهات المشي عند مستويات التكبير/التصغير المنخفضة (عادةً ما تكون أقل من مستوى التكبير/التصغير 16).
• حدّد locationRestriction باستخدام مساحة حدود أصغر. وسيمنع ذلك نقاط الاهتمام من الظهور في أي مكان خارج منطقة التقييد.

تغيير أصل الاتجاهات

يمكنك تغيير قيمة السمة directionsOptions في أي وقت أثناء دورة حياة LocalContextMapView. يوضح المثال التالي تعيين قيمة جديدة لـ directionsOptions:

localContextMapView.directionsOptions = {
  origin: {lat: 47.6532809, lng: -122.3512206},
};

أو

localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};

إعداد التنسيق وحق الدخول

يمكنك ضبط موضع التنسيق الأولي وخيارات مستوى الرؤية في عرض تفاصيل المكان ومنتقي المكان، من خلال ضبط السمتَين placeChooserViewSetup وplaceDetailsViewSetup في LocalContextMapView. يمكنك أيضًا إخفاء عرض تفاصيل المكان آليًا.

تعيين موضع تخطيط منتقي الأماكن

يمكنك ضبط موضع تنسيق أداة اختيار المكان عند إعداد LocalContextMapView. يكون موضع التنسيق متناسبًا مع اتجاه المستند، وسيختلف بناءً على ما إذا كان تطبيقك من اليسار إلى اليمين (LTR) أم من اليمين إلى اليسار (RTL).

هناك ثلاثة خيارات تنسيق لمنتقي الأماكن:

• يعيّن INLINE_START محدد الموضع ليتم عرضه في START تدفق المحتوى (الجانب الأيسر من الخريطة لـ LTR)، على اليمين لـ RTL).
• يعيّن INLINE_END محدد الموضع ليتم عرضه في END من تدفق المحتوى (على الجانب الأيمن من الخريطة لـ LTR، على اليسار لـ RTL).
• يعيّن BLOCK_END محدد الموضع ليتم عرضه في الجزء السفلي من الصفحة (وهذا هو الشيء نفسه لكل من LTR وRTL).

عند تعيين موضع منتقي الأماكن على INLINE_START أو INLINE_END، يجب دائمًا تعيين موضع عرض تفاصيل المكان على القيمة نفسها. يمكنك اختياريًا تعيين عرض تفاصيل المكان ليتم عرضه في نافذة معلومات. بالنسبة إلى BLOCK_END، يجب ضبط وضع تخطيط عرض تفاصيل المكان دائمًا على INFO_WINDOW.

تعمل مكتبة السياقات المحلية على تغيير موضع منتقي الأماكن بشكل متجاوب استنادًا إلى حجم LocalContextMapView المعروض. بشكل تلقائي، تظهر أداة اختيار المكان في LocalContextMapView كبيرة في بداية تدفق المحتوى (على يسار خريطة LTR، إلى اليمين لـ RTL). في LocalContextMapView أصغر (على سبيل المثال، على جهاز جوّال)، تتغير الإعدادات الافتراضية لعرض منتقي الأماكن أسفل الخريطة، وتعرض تفاصيل المكان في نافذة معلومات. يؤثر مستوى تكبير/تصغير المتصفح في أبعاد البكسل التي يتغير بها موضع محدد الموضع بين الجانبين والسفلي (يزيد الحد بشكل متناسب مع مستوى التكبير/التصغير).

نوصي باستخدام الاستدعاءات الوظيفية لتهيئة الموضع الافتراضي لمحدد المكان. سيؤدي الإعلان مباشرةً عن هذه القيم إلى إلغاء أي تغييرات في التنسيق سريع الاستجابة.

عرض منتقي الأماكن في بداية تدفق المحتوى

لتعيين محدد المكان بحيث يظهر في بداية تدفق المحتوى (على يسار الخريطة لـ LTR)، على اليمين بالنسبة إلى RTL)، عيّن position على INLINE_START لكل من placeChooserViewSetup وplaceDetailsViewSetup، كما هو موضح في المثال التالي:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
});

عرض منتقي الأماكن في نهاية تدفق المحتوى

لضبط منتقي الأماكن بحيث يظهر في نهاية تدفق المحتوى (على اليسار من اليمين إلى اليسار، بالنسبة إلى LRT)، عيّن position إلى INLINE_END لكل من placeChooserViewSetup وplaceDetailsViewSetup، كما هو موضح في المثال التالي:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
});

يتم عرض منتقي الأماكن في الجزء السفلي

لتعيين منتقي الأماكن للعرض أسفل الخريطة، عيّن position من placeChooserViewSetup إلى BLOCK_END، وlayoutMode من placeDetailsViewSetup إلى INFO_WINDOW، كما هو موضح في المثال التالي:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'BLOCK_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {layoutMode: 'INFO_WINDOW'};
    }
  },
});

إخفاء منتقي الأماكن

منتقي الأماكن مرئي بشكل افتراضي. لإخفاء منتقي الأماكن، عيّن layoutMode على HIDDEN، كما هو موضح في المثال التالي:

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

يوضح المثال التالي إخفاء منتقي الأماكن عندما يتغير الموضع الافتراضي إلى BLOCK_END:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  placeChooserViewSetup: ({defaultPosition}) => {
    if (defaultPosition === 'BLOCK_END') {
      return {layoutMode: 'HIDDEN'};
    }
  },
});

عرض عرض تفاصيل المكان في نافذة معلومات

لعرض تفاصيل المكان في نافذة معلومات، اضبط layoutMode على INFO_WINDOW، كما هو موضح في المثال التالي:

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

يمكنك استخدام هذا الإعداد مع أي موضع لمحدد مكان (يسار أو يمين أو أسفل).

إخفاء عرض تفاصيل المكان آليًا

يمكنك إخفاء عرض تفاصيل المكان آليًا من خلال استدعاء hidePlaceDetailsView() على مثيل LocalContextMapView، كما هو موضّح في المثال التالي:

localContextMapView.hidePlaceDetailsView()

بشكل افتراضي، يؤدي النقر على الخريطة إلى إخفاء عرض تفاصيل المكان. يمكنك ضبط الخيار hidesOnMapClick في placeDetailsViewSetup على false لمنع هذا السلوك التلقائي.

// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: {hidesOnMapClick: false},
});

لإخفاء نافذة معلومات المكان فقط عند النقر على الخريطة، يمكنك التحكم في تعيين قيمة hidesOnMapClick كما هو موضح في المثال التالي:

// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
  },
});

إعداد خيارات Map الداخلية

بمجرد أن يكون لديك مثيل LocalContextMapView، يمكنك تعيين MapOptions على مثيل Map الداخلي. تدعم Map المضمنة في LocalContextMapView جميع خيارات الخريطة نفسها مثل أي واجهة برمجة تطبيقات قياسية للخرائط في JavaScript. يوضّح المثال التالي إنشاء مثيل LocalContextMapView جديد، وضبط بعض الخيارات على جهاز Map الداخلي:

// Instantiate LocalContextMapView.
function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
  });

  // Set inner map options.
  localContextMapView.map.setOptions({
    center: pos,
    zoom: 14,
    mapTypeId: 'satellite',
  });
}