向您的应用程序中添加 Amazon Location 交互式地图 - Amazon Location Service

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

向您的应用程序中添加 Amazon Location 交互式地图

现在您已经有了框架和一个 div 占位符，您可以将地图控件添加到您的应用程序中。本教程使用 MapLibre GL JS 作为地图控件，从 Amazon Location Service 获取数据。您还将使用JavaScript 身份验证助手来简化使用API密钥签名到 Amazon 营业地点APIs的电话。

向应用程序添加交互式地图

  1. 打开您在上一部分中创建的 quickstart.html 文件。

  2. 添加对所需库的引用，以及将要创建的脚本文件。green 中显示了您需要进行的更改。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Quick start tutorial</title>

    <!-- Styles -->
    <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" />
    <link href="main.css" rel="stylesheet" />
  </head>
  
  <body>
    ...
    <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer>
    
    <!-- JavaScript dependencies -->
    <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-client@1.x/dist/amazonLocationClient.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-utilities-auth-helper@1.x/dist/amazonLocationAuthHelper.js"></script>
    
    <!-- JavaScript for the app -->
    <script src="main.js"></script>
  </body>
</html>

    这将以下依赖项添加到您的应用程序：

    • MapLibre GL JS。该库和样式表包括一个显示地图图块的地图控件，并包括平移和缩放等交互性。该控件还允许扩展，例如在地图上绘制自己的要素。

    • Amazon Location 客户端。这为获取地图数据和在地图上搜索地点所需的 Amazon Location 功能提供了接口。Amazon Location 客户端基于 f AWS SDK or JavaScript v3。

    • Amazon Location 认证帮助程序。这为使用API密钥或 Amazon Cognito 对亚马逊定位服务进行身份验证提供了有用的功能。

    此步骤还添加了对 main.js 的引用，接下来您将创建该引用。

  3. 保存 quickstart.html 文件。

  4. 在与您的HTML和文件相同的文件夹main.js中创建一个名为的新CSS文件，然后将其打开进行编辑。

  5. 在您的文件中添加以下脚本：中的文字 red 应替换为您之前创建的API键值、地图资源名称和地点资源名称以及您所在地区的区域标识符（例如us-east-1）。

    // Amazon Location Service resource names:
const mapName = "explore.map";
const placesName = "explore.place";
const region = "your_region";
const apiKey = "v1.public.a1b2c3d4...

// Initialize a map
async function initializeMap() {
  const mlglMap = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-77.03674, 38.891602], // Initial map centerpoint
    zoom: 16, // Initial map zoom
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key
  });

  // Add navigation control to the top left of the map
  mlglMap.addControl(new maplibregl.NavigationControl(), "top-left");
  
  return mlglMap;
}

async function main() {
  // Initialize map and Amazon Location SDK client:
  const map = await initializeMap();
}

main();

    此代码设置 Amazon Location 资源，然后配置和初始化 MapLibre GL JS 地图控件，并将其放置在带有 ID 的<div>元素中。map

    理解 initializeMap() 函数很重要。它会创建一个新的 MapLibre 地图控件（map在mlglMap本地调用，但在代码的其余部分中调用），用于在应用程序中渲染地图。

      // Initialize the map
  const mlglMap = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-77.03674, 38.891602], // Initial map centerpoint
    zoom: 16, // Initial map zoom
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key
  });

    创建新的 MapLibre 地图控件时，您传递的参数表示地图控件的初始状态。这里，我们设置以下参数。

    • HTML容器，它使用我们的 map div 元素HTML。

    • 地图的初始中心到华盛顿特区某一点。

    • 缩放级别为 16（放大到邻里或街区级别）。

    • 用于地图的样式，它 MapLibre 提供了URL用于获取地图图块和其他信息以渲染地图。请注意，这URL包括您的身份验证API密钥。

  6. 保存您的 JavaScript 文件，然后用浏览器将其打开。现在，您的页面上有一张地图，可以在其中使用平移和缩放操作。

    注意

    您可以使用此应用程序来查看 MapLibre 地图控件的行为方式。在使用拖动操作时，可以尝试使用 Ctrl 或 Shift 来查看与地图交互的其他方式。所有这些功能都是可定制的。

    Map of Washington D.C. showing Constitution Gardens and Independence Ave SW in an Amazon Location Service app.

您的应用程序已接近完成。在下一部分中，您将负责在地图上选择一个位置，并显示所选位置的地址。您还将在页面JSON上显示结果，以查看完整结果。