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

ملف LocalContextMapsView الأساسي

في ما يلي عرض خريطة الخريطة المحلية الأساسية بدون تخصيصات. نحدّد الخصائص المطلوبة الخاصة بمكتبة السياقات المحلية، مثل placeTypePreferences وmaxPlaceCount، بالإضافة إلى سمات Map الأساسية في center وzoom.

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

TypeScript

let map: google.maps.Map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

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

JavaScript

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

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 Basic</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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
      defer
    ></script>
  </body>
</html>index.html

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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

فهم الشفرة

خيارات خريطة السياقات المحلية

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

TypeScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [
    { type: "restaurant" },
    { type: "tourist_attraction" },
  ],
  maxPlaceCount: 12,
});index.ts

JavaScript

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

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

يتم تحديد حدود locationRestriction التلقائية للبحث عن الأماكن من خلال إطار عرض الخريطة. يتم إنشاء إطار عرض الخريطة عند الاستدعاء الأول إلى google.maps.localContext.LocalContextMapView.map.setOptions() عندما يتم تحديد مستوى الوسط والتكبير/التصغير لتحميل الخريطة.

TypeScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});index.ts

JavaScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});index.js

لن تؤدي المكالمات اللاحقة إلى setOptions() إلى إعادة تحميل الأماكن المميزة التي تعرضها مكتبة السياقات المحلية.

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

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell