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

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

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

此快速入門會使用 Azure 地圖服務 Web SDK，不過，Azure 地圖服務可與任何地圖控制項搭配使用，例如 Azure 地圖服務小組已為其建立外掛程式的熱門開放原始碼地圖控制項。

必要條件

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

• 登入 Azure 入口網站。

建立 Azure 地圖服務帳戶

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

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

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

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

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

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

   

取得您帳戶的訂用帳戶金鑰

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

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

注意

本快速入門使用共用金鑰驗證方法進行示範，但任何生產環境的慣用方法是使用 Microsoft Entra ID 驗證。

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

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

開啟示範應用程式

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

2. 查看地圖所顯示的洛杉磯市。 縮放地圖大小，以查看地圖依據縮放層級搭配較多或較少資訊縮放時，自動轉譯的情況。

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

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

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

   

清除資源

重要

後續步驟一節中所列出的教學課程詳述了如何利用您的帳戶來使用及設定 Azure 地圖服務。 如果您打算繼續進行教學課程，請勿清除在此快速入門中建立的資源。

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

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

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

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

下一步

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

使用 Azure 地圖服務來搜尋附近景點