您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

快速入门:使用 Azure Maps 创建交互式搜索地图Quickstart: Create an interactive search map with Azure Maps

本文演示如何使用 Azure Maps 创建地图,为用户提供交互式搜索体验。This article shows you how to use Azure Maps to create a map that gives users an interactive search experience. 本文演示如何完成以下基本步骤:It walks you through these basic steps:

  • 创建自己的 Azure Maps 帐户。Create your own Azure Maps account.
  • 获取要在演示版 Web 应用程序中使用的主密钥。Get your primary key to use in the demo web application.
  • 下载并打开演示版地图应用程序。Download and open the demo map application.

先决条件Prerequisites

创建 Azure Maps 帐户Create an Azure Maps account

通过以下步骤创建新的 Azure Maps 帐户:Create a new Azure Maps account with the following steps:

  1. Azure 门户的左上角单击“创建资源”。In the upper left-hand corner of the Azure portal, click Create a resource.

  2. 在“在市场中搜索”框中,键入“Azure Maps”。In the Search the Marketplace box, type Azure Maps.

  3. 从“结果”中,选择“Azure Maps”。From the Results, select Azure Maps. 单击地图下面显示的“创建”按钮。Click Create button that appears below the map.

  4. 在“创建 Maps 帐户”页上,输入以下值:On the Create Maps Account page, enter the following values:

    • 要用于此帐户的订阅。The Subscription that you want to use for this account.
    • 此帐户的资源组名称。The Resource group name for this account. 可以选择新建或使用现有的资源组。You may choose to Create new or Use existing resource group.
    • 新帐户的名称。The Name of your new account.
    • 此帐户的定价层。The Pricing tier for this account.
    • 阅读许可证和隐私声明,并选择复选框接受这些条款 。Read the License and Privacy Statement, and check the checkbox to accept the terms.
    • 单击“创建” 按钮。Click the Create button.

    在门户中创建 Maps 帐户

获取帐户的主密钥Get the primary key for your account

成功创建 Maps 帐户后,检索查询 Maps API 的主密钥。Once your Maps account is successfully created, retrieve the primary key that enables you to query the Maps APIs.

  1. 在门户中打开 Maps 帐户。Open your Maps account in the portal.
  2. 在设置部分中,选择“身份验证”。In the settings section, select Authentication.
  3. 将“主密钥”复制到剪贴板。Copy the Primary Key to your clipboard. 本地保存它以便稍后在本教程中使用。Save it locally to use later in this tutorial.

备注

如果使用订阅密钥而不是主密钥,则映射不会正确呈现。If you use the subscription key instead of the primary key, your map won't render properly. 此外,出于安全考虑,建议轮换使用主密钥和辅助密钥。Also, for security purposes, it is recommended that you rotate between your primary and secondary keys. 若要轮换密钥,请更新应用以使用辅助密钥、进行部署,然后按主密钥旁边的循环/刷新按钮以生成新的主密钥。To rotate keys, update your app to use the secondary key, deploy, then press the cycle/refresh button beside the primary key to generate a new primary key. 将禁用旧的主密钥。The old primary key will be disabled. 有关密钥轮换的详细信息,请参阅使用密钥轮换和审核功能设置 Azure Key VaultFor more information on key rotation, see Set up Azure Key Vault with key rotation and auditing

在 Azure 门户中获取主密钥 Azure Maps 密钥

下载演示应用程序Download the demo application

  1. 转到 interactiveSearch.htmlGo to interactiveSearch.html. 复制文件的内容。Copy the content of the file.
  2. 在本地将此文件的内容另存为 AzureMapDemo.htmlSave the contents of this file locally as AzureMapDemo.html. 在文本编辑器中将其打开。Open it in a text editor.
  3. 搜索字符串 <Your Azure Maps Key>Search for the string <Your Azure Maps Key>. 将其替换为在上一部分获取的主密钥值。Replace it with the Primary Key value from the preceding section.

打开演示版应用程序Open the demo application

  1. 在所选的浏览器中打开文件 AzureMapDemo.htmlOpen the file AzureMapDemo.html in a browser of your choice.

  2. 观察显示的洛杉矶市地图。Observe the map shown of the City of Los Angeles. 进行缩放,查看地图如何自动根据缩放级别呈现更多或更少信息。Zoom in and out to see how the map automatically renders with more or less information depending on the zoom level.

  3. 更改地图的默认中心。Change the default center of the map. 在“AzureMapDemo.html”文件中,搜索名为“center”的变量 。In the AzureMapDemo.html file, search for the variable named center. 将此变量的经度、纬度对值替换为新值“[-74.0060, 40.7128]”。Replace the longitude, latitude pair value for this variable with the new values [-74.0060, 40.7128]. 保存文件并刷新浏览器。Save the file and refresh your browser.

  4. 尝试交互式搜索体验。Try out the interactive search experience. 在演示版 Web 应用程序左上角的搜索框中,搜索“餐厅”。In the search box on the upper-left corner of the demo web application, search for restaurants.

  5. 将鼠标移到搜索框下面显示的地址/位置列表上。Move your mouse over the list of addresses and locations that appear below the search box. 可以看到,地图上的相应图钉会弹出有关该位置的信息。Notice how the corresponding pin on the map pops out information about that location. 为保护私营企业的隐私,地图中显示的名称和地址都是虚构的。For privacy of private businesses, fictitious names and addresses are shown.

    交互式地图搜索 Web 应用程序

清理资源Clean up resources

警告

后续步骤部分中列出的教程详细介绍了如何通过帐户使用和配置 Azure Maps。The tutorials listed in the Next Steps section detail how to use and configure Azure Maps with your account. 如何打算继续学习这些教程,请勿清除本快速入门中创建的资源。Don't clean up the resources created in this quickstart if you plan to continue to the tutorials.

如果不打算继续学习这些教程,请通过以下步骤来清理资源:If you don't plan to continue to the tutorials, take these steps to clean up the resources:

  1. 关闭运行 AzureMapDemo.html Web 应用程序的浏览器。Close the browser that runs the AzureMapDemo.html web application.
  2. 导航到 Azure 门户页面。Navigate to the Azure portal page. 选择门户主页中的“所有资源”。Select All resources from the main portal page. 或者,单击左上角的菜单图标。Or, click on the menu icon in the upper left-hand corner. 选择“所有资源”,Select All resources.
  3. 单击你的 Azure Maps 帐户。Click on your Azure Maps account. 在页面顶部,单击“删除”。At the top of the page, click Delete.

后续步骤Next steps

在本快速入门中,你创建了 Azure Maps 帐户和演示版应用程序。In this quickstart, you created your Azure Maps account and created a demo application. 请查看以下教程,详细了解 Azure Maps:Take a look at the following tutorials to learn more about Azure Maps:

有关更多代码示例和交互式编码体验,请参阅以下指南:For more code examples and an interactive coding experience, see these guides: