Usa il plug-in Amazon Location MapLibre Geocoder GL - Servizio di posizione Amazon
InstallazioneUtilizzo con modulo: SDK standalone GeoPlaces Utilizzo con un browser: SDK autonomo GeoPlaces Funzioni

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Usa il plug-in Amazon Location MapLibre Geocoder GL

Il plug-in di MapLibre geocodifica Amazon Location è progettato per semplificare l'integrazione della funzionalità di Amazon Location nelle tue JavaScript applicazioni, quando lavori con il rendering di mappe e la geocodifica utilizzando la libreria. maplibre-gl-geocoder

Installazione

Installa il plug-in Amazon Location MapLibre geocoder da NPM per l'utilizzo con i moduli. Digita questo comando:

npm install @aws/amazon-location-for-maplibre-gl-geocoder

Puoi anche importare file HTML e CSS da utilizzare direttamente nel browser con uno script:

<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2"></script>
<link
  href="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2/dist/amazon-location-for-mlg-styles.css"
  rel="stylesheet"
/>

Utilizzo con modulo: SDK standalone GeoPlaces

Questo esempio utilizza l'AWS SDK per JavaScript V3 per ottenere un file da fornire GeoPlacesClient alla libreria e AuthHelperper autenticare il. GeoPlacesClient Abilita tutto per il geocoder APIs .

// Import MapLibre GL JS
import maplibregl from "maplibre-gl";
// Import from the AWS JavaScript SDK V3
import { GeoPlacesClient } from "@aws-sdk/client-geo-places";
// Import the utility functions
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";
// Import the AmazonLocationMaplibreGeocoder
import {
  buildAmazonLocationMaplibreGeocoder,
  AmazonLocationMaplibreGeocoder,
} from "@aws/amazon-location-for-maplibre-gl-geocoder";

const apiKey = "<API Key>";
const mapName = "Standard";
const region = "<Region>"; // region containing Amazon Location API Key

// Create an authentication helper instance using an API key and region
const authHelper = await withAPIKey(apiKey, region);

const client = new GeoPlacesClient(authHelper.getClientConfig());

// Render the map
const map = new maplibregl.Map({
  container: "map",
  center: [-123.115898, 49.295868],
  zoom: 10,
  style: `https://maps.geo.${region}.amazonaws.com/maps/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
});

// Gets an instance of the AmazonLocationMaplibreGeocoder Object.
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, { enableAll: true });

// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());

Utilizzo con un browser: SDK autonomo GeoPlaces

Questo esempio utilizza il client Amazon Location per effettuare una richiesta di autenticazione tramite una chiave API.

Nota

Alcuni di questi esempi utilizzano Amazon Location GeoPlacesClient. Questo client è basato sull'AWS SDK per JavaScript V3 e consente di effettuare chiamate ad Amazon Location tramite uno script a cui si fa riferimento in un file HTML.

Includi quanto segue in un file HTML:

<!-- Import the Amazon Location For Maplibre Geocoder -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2"></script>
<link
  href="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2/dist/amazon-location-for-mlg-styles.css"
  rel="stylesheet"
/>
<!-- Import the Amazon GeoPlacesClient -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-client@1"></script>

Includi quanto segue in un JavaScript file:

const apiKey = "<API Key>";
const mapStyle = "Standard";
const region = "<Region>"; // region containing Amazon Location API key

// Create an authentication helper instance using an API key and region
const authHelper = await amazonLocationClient.withAPIKey(apiKey, region);

const client = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig());

// Render the map
const map = new maplibregl.Map({
  container: "map",
  center: [-123.115898, 49.295868],
  zoom: 10,
  style: `https://maps.geo.${region}.amazonaws.com/maps/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
});

// Initialize the AmazonLocationMaplibreGeocoder object
const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(
  client,
  { enableAll: true },
);

// Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());

Funzioni

Di seguito sono elencate le funzioni utilizzate nel plug-in di MapLibre geocodifica Amazon Location:

  • buildAmazonLocationMaplibreGeocoder

    Questa classe crea un'istanza diAmazonLocationMaplibreGeocder, che è il punto di ingresso per tutte le altre chiamate.

    Utilizzo di chiamate GeoPlacesClient API autonome (il client è un'istanza diGeoPlacesClient):

    const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, { enableAll: true });

    Utilizzo di chiamate LocationClient API consolidate (il client è un'istanza diLocationClient):

    const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, {
  enableAll: true,
  placesIndex: placeIndex,
});

  • getPlacesGeocoder

    Restituisce un ready-to-use IControl oggetto che può essere aggiunto direttamente a una mappa.

    const geocoder = getPlacesGeocoder();

// Initialize map see: <insert link to initializing a map instance here>
let map = await initializeMap();

// Add the geocoder to the map.
map.addControl(geocoder);