Suchgrenzen für „Lokaler Kontext“ anpassen

Sie können den Parameter locationRestriction der LocalContextMapView-Ortssuche so ändern, dass sie nicht streng an den Darstellungsbereich der Karte gebunden ist (Standardeinstellung). In diesem Beispiel wurden die Grenzen von locationRestriction so festgelegt, dass der Suchbereich viel größer als der ursprüngliche Darstellungsbereich der Karte ist. Klicken Sie auf einen Ort in der Ortsauswahl und sehen Sie sich an, wie die Karte verschoben wird, um den ausgewählten Ort anzuzeigen.

Quellcode ansehen

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

Testbeispiel

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

Code verstehen

Suchgrenzen für „Lokaler Kontext“ angeben

Die strikten locationRestriction-Suchgrenzen werden mit einer LatLngBounds-Eigenschaft definiert. In diesem Beispiel wird die Schnittstelle LatLngBoundsLiteral verwendet, um ein LatLngBounds-Objekt zu erstellen.

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

Die Beziehung zwischen dem Darstellungsbereich der Karte für „Lokaler Kontext“ und `directionsOptions`

Wenn ein ausgewählter POI außerhalb des aktuellen Darstellungsbereichs liegt, wird die Kartenansicht für „Lokaler Kontext“ automatisch so verschoben, dass er innerhalb der sichtbaren Grenzen liegt. Es ist kein Code zum Verwalten der Karte erforderlich.

Wenn Sie für die Eigenschaft directionsOptions von LocalContextMapView keinen Startpunkt angeben, wird die Karte so verschoben, dass nur der ausgewählte POI angezeigt wird.

Wenn Sie für directionsOptions einen Startpunkt angeben, werden auf der Karte sowohl der Startpunkt als auch der ausgewählte POI zusammen mit der Fußgängerroute zwischen beiden Punkten angezeigt.

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

Testbeispiel

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

Suchgrenzen für „Lokaler Kontext“ anpassen

Quellcode ansehen

TypeScript

JavaScript

CSS

HTML

Testbeispiel

Code verstehen

Suchgrenzen für „Lokaler Kontext“ angeben

TypeScript

JavaScript

Die Beziehung zwischen dem Darstellungsbereich der Karte für „Lokaler Kontext“ und directionsOptions

TypeScript

JavaScript

Testbeispiel

Die Beziehung zwischen dem Darstellungsbereich der Karte für „Lokaler Kontext“ und `directionsOptions`