快速入門：使用 Azure 地圖服務建立互動式地圖搜尋

快速入門將示範如何使用 Azure 地圖服務建立一個地圖，為使用者建立提供互動式搜尋體驗。 文中會逐步引導您完成下列基本步驟：

• 建立您自己的 Azure 地圖服務帳戶。
• 取得 Azure 地圖服務訂用帳戶金鑰以便在 Web 應用程式示範中使用。
• 下載並開啟示範地圖應用程式。

必要條件

• 如果您沒有 Azure 訂用帳戶，請在開始前建立免費帳戶。

• 登入 Azure 入口網站。

建立 Azure 地圖服務帳戶

使用下列步驟建立新的 Azure 地圖服務帳戶：

1. 選取 Azure 入口網站左上角的 [建立資源]。

2. 在 搜尋服務和 Marketplace 方塊中輸入 Azure 地圖服務。

3. 在出現的下拉式清單中選取 [Azure 地圖服務]，然後選取 [建立] 按鈕。

4. 在 [建立 Azure 地圖服務帳戶資源] 頁面上，輸入下列值，然後選取 [建立] 按鈕：

   • 您想要使用於此帳戶的 [訂用帳戶]。
   • 此帳戶的 [資源群組] 名稱。 您可以選擇 [建立新的] 或 [選取現有的] 資源群組。
   • 新 Azure 地圖服務帳戶的「名稱」。
   • 此帳戶的 [定價層]。 確認 Gen2 已被選中。
   • 閱讀「授權」和「隱私權聲明」，然後選取核取方塊以接受條款。

   

取得您帳戶的訂閱金鑰

成功建立 Azure 地圖服務帳戶後，擷取訂用帳戶金鑰以便能查詢地圖服務 API。

1. 在入口網站中開啟地圖服務帳戶。
2. 在 [設定] 區段上，選取 [驗證]。
3. 複製 [主索引鍵] 並在本機加以儲存，以供本教學課程稍後使用。

下載並更新Azure 地圖服務示範

1. 複製 Interactive Search Quickstart.html 檔案的內容。
2. 將此檔案的內容在本機另存為 AzureMapDemo.html。 在文字編輯器中將其開啟。
3. 新增您在上一節中取得的 主鍵 值
   1. 將 authOptions 函式中的所有程式碼註解掉，此程式碼用於 Microsoft Entra 驗證。
   2. 取消註解 authOptions 函式中的最後兩行，此程式碼用於共用金鑰驗證，這是本快速入門中使用的方法。
   3. 將 <Your Azure 地圖服務 Key> 取代為來自上一節的訂用帳戶金鑰值。

開啟示範應用程式

1. 在您選擇的瀏覽器中開啟 AzureMapDemo.html 檔案。

2. 請觀察洛杉磯市的地圖。 放大或縮小地圖，以查看地圖如何根據縮放層級，自動顯示更多或更少的資訊。

3. 變更地圖的預設中心。 在 AzureMapDemo.html 檔案中，搜尋名為 center 的變數。 以新的值 [-74.0060, 40.7128] 取代此變數的 [經度, 緯度] 值組。 儲存檔案並重新整理瀏覽器。

4. 試用互動式搜尋體驗。 在示範 Web 應用程式左上角的搜尋方塊中，搜尋餐廳。

5. 將滑鼠移到搜尋方塊下所出現的地址和位置清單。 注意地圖上對應的圖釘如何彈出該位置的相關資訊。 為了保護私人公司的隱私權，在此顯示的是虛構的名稱和地址。

   

清除資源

如果您不打算繼續教學課程，則請採取下列步驟來清除資源：

1. 關閉執行 AzureMapDemo.html Web 應用程式的瀏覽器。
2. 瀏覽至 Azure 入口網站。 從主要入口網站頁面選取 [所有資源]，或選取左上角的功能表圖示，然後選取 [所有資源]。
3. 選取您的 Azure 地圖服務帳戶，然後選取頁面頂端的 [刪除]。

如需更多程式碼範例和互動式編碼體驗，請參閱以下文章：

• 使用 Azure 地圖服務搜尋服務尋找位址
• 使用 Azure 地圖服務的地圖控制項

下一步

在本快速入門中，您已建立 Azure 地圖服務帳戶和示範應用程式。 查看下列教學課程，以深入了解 Azure 地圖服務：