Vue LocalContextMapView de base

Vous trouverez ci-dessous la vue de base de la carte de contexte local, sans personnalisation. Nous spécifions les propriétés obligatoires spécifiques à placeTypePreferences et maxPlaceCount et propres à la bibliothèque de contexte local, et les propriétés Map de base de center et zoom.

Afficher le code source

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

Essayer l'exemple

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

Comprendre le code

Options de carte de contexte local

Au lieu de la classe google.maps.Map, les cartes de contexte local sont représentées par la classe google.maps.localContext.LocalContextMapView. Les trois paramètres obligatoires du constructeur LocalContextMapView sont l'élément du Document Object Model (DOM) qui sera le conteneur de la vue de carte, la liste des types de lieux à inclure et un nombre maximal de lieux à afficher.

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

Définir la fenêtre d'affichage de la carte de contexte local

Les limites locationRestriction par défaut de la recherche de lieux sont définies par la fenêtre d'affichage de la carte. La fenêtre d'affichage de la carte est établie lors du premier appel à google.maps.localContext.LocalContextMapView.map.setOptions(), lorsque le centre et le niveau de zoom sont définis pour le chargement de la carte.

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

Les appels suivants à setOptions() n'actualiseront pas les lieux sélectionnés affichés par la bibliothèque de contexte local.

Essayer l'exemple

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