تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

عرض رمز المصدر

TypeScript

let map: google.maps.Map;

function initMap() {
  const center = { lat: 37.4219998, lng: -122.0840572 };
  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 },
  });

  map = localContextMapView.map!;

  new google.maps.Marker({ position: center, map: map });

  map.setOptions({
    center: center,
    zoom: 16,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

let map;

function initMap() {
  const center = { lat: 37.4219998, lng: -122.0840572 };
  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 },
  });

  map = localContextMapView.map;
  new google.maps.Marker({ position: center, map: map });
  map.setOptions({
    center: center,
    zoom: 16,
  });
}

window.initMap = initMap;index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Local Context Restrictions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
      defer
    ></script>
  </body>
</html>index.html

تجربة عيّنة من المحتوى

JSFiddle.net CodeSandbox.io Google Cloud Shell

فهم الرمز

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

حدِّد حدود البحث الصارم 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 },
});index.ts

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 },
});
index.js

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

عندما تقع نقطة اهتمام محدّدة (POS) خارج إطار العرض الحالي، يتم عرض عرض الخريطة المحلية تلقائيًا لعرض نقطة الاهتمام هذه ضمن الحدود المرئية بدون الحاجة إلى أي رمز لإدارة الخريطة.

إذا لم تحدِّد نقطة انطلاق لخاصية 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 },
});index.ts

JavaScript

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

تجربة عيّنة من المحتوى

JSFiddle.net CodeSandbox.io Google Cloud Shell

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

عرض رمز المصدر

TypeScript

JavaScript

CSS

HTML

تجربة عيّنة من المحتوى

فهم الرمز

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

TypeScript

JavaScript

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

TypeScript

JavaScript

تجربة عيّنة من المحتوى

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