Rychlý start: Vytvoření interaktivní mapy vyhledávání pomocí Azure Mapy

  • Článek

Tento rychlý start ukazuje, jak pomocí Azure Mapy vytvořit mapu, která uživatelům poskytuje interaktivní vyhledávání. Provede vás těmito základními kroky:

  • Vytvořte si vlastní účet Azure Mapy.
  • Získejte klíč předplatného Azure Mapy pro použití v ukázkové webové aplikaci.
  • Stáhněte a otevřete ukázkovou mapovou aplikaci.

V tomto rychlém startu se používá sada Azure Mapy Web SDK, ale službu Azure Mapy je možné použít s libovolným ovládacím prvky mapování, jako jsou například tyto oblíbené opensourcové ovládací prvky map, pro které tým Azure Mapy vytvořil modul plug-in.

Požadavky

Vytvoření účtu Azure Maps

Vytvořte nový účet Azure Mapy pomocí následujícího postupu:

  1. V levém horním rohu webu Azure Portal vyberte Vytvořit prostředek.

  2. Do pole Search a Marketplace zadejte MapyAzure.

  3. V rozevíracím seznamu, který se zobrazí, vyberte Azure Mapy a pak vyberte tlačítko Vytvořit.

  4. Na stránce Vytvořit prostředek Účtu Mapy Azure zadejte následující hodnoty a pak vyberte tlačítko Vytvořit:

    • Předplatné, které chcete pro tento účet použít.
    • Název skupiny prostředků pro tento účet. Můžete se rozhodnout vytvořit novou nebo vybrat existující skupinu prostředků.
    • Název nového účtu Azure Mapy.
    • Cenová úroveň pro tento účet. Vyberte Gen2.
    • Přečtěte si licenční a prohlášení o zásadách ochrany osobních údajů a pak zaškrtnutím políčka přijměte podmínky.

    Screenshot showing the Create an Azure Maps Account resource page in the Azure portal.

Získání klíče předplatného pro váš účet

Po úspěšném vytvoření účtu Azure Mapy načtěte klíč předplatného, který vám umožní dotazovat se na Mapy rozhraní API.

  1. Otevřete svůj účet Maps na portálu.
  2. V části Nastavení vyberte Ověřování.
  3. Zkopírujte primární klíč a uložte ho místně, abyste ho mohli použít později v tomto kurzu.

Screenshot showing your Azure Maps subscription key in the Azure portal.

Poznámka:

Tento rychlý start používá metodu ověřování pomocí sdíleného klíče pro demonstrační účely, ale upřednostňovaným přístupem pro jakékoli produkční prostředí je použít ověřování [Microsoft Entra ID].

Stažení a aktualizace ukázky azure Mapy

  1. Zkopírujte obsah souboru: Interactive Search Quickstart.html.
  2. Uložte obsah tohoto souboru místně jako AzureMapDemo.html. Otevřete ho v textovém editoru.
  3. Přidejte hodnotu primárního klíče , kterou jste získali v předchozí části.
    1. Zakomentujte veškerý kód ve authOptions funkci, tento kód se používá pro ověřování Microsoft Entra.
    2. Odkomentujte poslední dva řádky funkce authOptions , tento kód se používá pro ověřování pomocí sdíleného klíče, který se používá v tomto rychlém startu.
    3. Nahraďte <Your Azure Maps Key> hodnotou klíče předplatného z předchozí části.

Otevření ukázkové aplikace

  1. V libovolném prohlížeči otevřete soubor AzureMapDemo.html.

  2. Prohlédněte si mapu zobrazenou na mapě města Los Angeles. Mapu můžete přiblížit nebo oddálit a ta pak v závislosti na úrovni přiblížení vykreslí více nebo méně informací.

  3. Změňte výchozí střed mapy. V souboru AzureMapDemo.html vyhledejte proměnnou center. Nahraďte hodnotu páru zeměpisné délky a šířky pro tuto proměnnou novými hodnotami [-74.0060, 40.7128]. Uložte soubor a aktualizujte prohlížeč.

  4. Vyzkoušejte interaktivní hledání. Do vyhledávacího pole v levém horním rohu ukázkové webové aplikace vyhledejte restaurace.

  5. Přesuňte myš na seznam adres a umístění, které se zobrazí pod vyhledávacím polem. Všimněte si, že odpovídající špendlík na mapě zobrazí informace o daném umístění. Z důvodu zajištění ochrany soukromých podniků jsou zobrazené fiktivní názvy a adresy.

    Screenshot showing the interactive map search web application.

Vyčištění prostředků

Důležité

Kurzy uvedené v části Další kroky podrobně uvádějí, jak používat a konfigurovat Azure Mapy s vaším účtem. Pokud chcete pokračovat v kurzech, nevyčistíte prostředky vytvořené v tomto rychlém startu.

Pokud nechcete pokračovat v kurzech, proveďte tyto kroky a vyčistíte prostředky:

  1. Zavřete prohlížeč, na kterém běží webová aplikace AzureMapDemo.html .
  2. Přejděte na Azure Portal. Na hlavní stránce portálu vyberte Všechny prostředky nebo vyberte ikonu nabídky v levém horním rohu a pak Všechny prostředky.
  3. Vyberte svůj účet Azure Mapy a pak v horní části stránky vyberte Odstranit.

Další příklady kódu a interaktivní prostředí pro kódování najdete v těchto článcích:

Další kroky

V tomto rychlém startu jste vytvořili účet Azure Mapy a ukázkovou aplikaci. Další informace o Azure Mapy najdete v následujících kurzech:

Hledání okolních bodů zájmu pomocí Azure Mapy