تعديل حدود البحث المحلي في السياق

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

يمكنك تغيير المعلمة locationRestriction لبحث المكان LocalContextMapView عن القيمة الافتراضية من خلال الالتزام الصارم بإطار عرض الخريطة. في هذا المثال، نعيّن حدود locationRestriction لتكون أكبر بكثير من إطار العرض الأولي للخريطة. جرّب النقر على مكان في منتقي الأماكن لرؤية الخريطة تتحرك لإظهار المكان المحدد.

فهم الشفرة

تحديد حدود البحث في السياق المحلي

حدِّد حدود البحث الصارمة التي تبلغ locationRestriction باستخدام السمة LatLngBounds. يستخدم هذا المثال واجهة LatLngBoundsLiteral لإنشاء كائن LatLngBounds.

TypeScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

JavaScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

العلاقة بين إطار عرض خريطة السياق المحلي وdirectionsOptions

عندما تقع نقطة اهتمام محددة (POI) خارج إطار العرض الحالي، يتحرك عرض الخريطة "السياق المحلي" تلقائيًا لإظهار هذه النقطة المهمة ضمن الحدود المرئية دون طلب أي رمز لإدارة الخريطة.

إذا لم يتم تحديد نقطة الانطلاق لخاصية directionsOptions في LocalContextMapView، سيتم نقل الخريطة لإظهار نقطة الاهتمام المحددة فقط.

إذا حددت directionsOptions باستخدام نقطة المنشأ، ستعرض الخريطة كل من نقطة الاهتمام والنقطة المختارة مع مسار المشي بين النقطتين.

TypeScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

JavaScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

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