Einfache LocalContextMapView

Unten sehen Sie die grundlegende Kartenansicht mit lokalem Kontext ohne Anpassungen. Die für das UI-Widget „Lokale Kontextbibliothek“ erforderlichen Eigenschaften placeTypePreferences und maxPlaceCount sowie die Basis-Map-Eigenschaften center und zoom werden von Google definiert.

Quellcode ansehen

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.
      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

Testbeispiel

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

Code verstehen

Optionen für Karten mit lokalem Kontext

Statt mit der Klasse google.maps.Map wird eine Karte mit lokalem Kontext durch die Klasse google.maps.localContext.LocalContextMapView dargestellt. Die drei erforderlichen Parameter des LocalContextMapView-Konstruktors sind das Element im Document Object Model (DOM), das als Container für die Kartenansicht dient, die Liste der einzubeziehenden Ortstypen sowie die maximale Anzahl der Ortsergebnisse, die angezeigt werden sollen.

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

Darstellungsbereich der Karte mit lokalem Kontext definieren

Die standardmäßigen locationRestriction-Grenzen der Place Search werden durch den Darstellungsbereich der Karte definiert. Der Darstellungsbereich der Karte wird beim ersten Aufruf von google.maps.localContext.LocalContextMapView.map.setOptions() erstellt, wenn Mittelpunkt und Zoomfaktor für den Kartenaufruf definiert werden.

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

Bei nachfolgenden Aufrufen von setOptions() werden die in der lokalen Kontextbibliothek angezeigten Orte nicht aktualisiert.

Testbeispiel

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