Menyesuaikan Batas Penelusuran Konteks Lokal

Anda dapat mengubah parameter locationRestriction pada penelusuran tempat LocalContextMapView dari default, yaitu benar-benar terikat oleh area pandang peta. Dalam contoh ini, kita menetapkan batas locationRestriction menjadi jauh lebih besar daripada area pandang awal peta. Coba klik tempat di pemilih tempat untuk melihat peta dipindahkan untuk menampilkan tempat yang dipilih.

Melihat kode sumber

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

Mencoba Contoh

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

Memahami kode

Menentukan batas penelusuran Konteks Lokal

Tentukan batas penelusuran ketat locationRestriction dengan properti LatLngBounds. Contoh ini menggunakan antarmuka LatLngBoundsLiteral untuk membuat objek 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

Hubungan antara area pandang peta Konteks Lokal dan `directionsOptions`

Saat lokasi menarik (POI) yang dipilih berada di luar area pandang saat ini, tampilan peta Konteks Lokal akan otomatis bergerak untuk menampilkan POI tersebut dalam batas-batas yang terlihat tanpa memerlukan kode untuk mengelola peta.

Jika Anda tidak menentukan titik asal untuk properti directionsOptions dari LocalContextMapView, peta akan bergerak untuk hanya menampilkan POI yang dipilih.

Jika Anda menentukan directionsOptions dengan titik asal, peta akan menampilkan tempat asal dan POI yang dipilih beserta rute jalan kaki di antara kedua titik tersebut.

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

Mencoba Contoh

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

Menyesuaikan Batas Penelusuran Konteks Lokal

Melihat kode sumber

TypeScript

JavaScript

CSS

HTML

Mencoba Contoh

Memahami kode

Menentukan batas penelusuran Konteks Lokal

TypeScript

JavaScript

Hubungan antara area pandang peta Konteks Lokal dan directionsOptions

TypeScript

JavaScript

Mencoba Contoh

Hubungan antara area pandang peta Konteks Lokal dan `directionsOptions`