Megosztás a következőn keresztül:


Rövid útmutató: Interaktív keresési térkép létrehozása az Azure Maps használatával

Ez a rövid útmutató bemutatja, hogyan hozhat létre interaktív keresési élményt nyújtó térképet az Azure Maps használatával. Végigvezeti az alábbi alapvető lépéseken:

  • Hozzon létre saját Azure Maps-fiókot.
  • Szerezze be az Azure Maps előfizetési kulcsát a bemutató webalkalmazásban való használathoz.
  • Töltse le és nyissa meg a demo térképalkalmazást.

Előfeltételek

Azure Maps-fiók létrehozása

Hozzon létre egy új Azure Maps-fiókot a következő lépésekkel:

  1. Válassza az Erőforrás létrehozása lehetőséget az Azure Portal bal felső sarkában.

  2. Írja be az Azure Mapst a Search szolgáltatás és a Marketplace mezőbe.

  3. Válassza az Azure Maps lehetőséget a megjelenő legördülő listában, majd válassza a Létrehozás gombot.

  4. Az Azure Maps-fiók erőforráslapján adja meg a következő értékeket, majd válassza a Létrehozás gombot:

    • A fiókhoz használni kívánt előfizetés.
    • A fiókhoz tartozó erőforráscsoport neve. Dönthet úgy, hogy új vagy meglévő erőforráscsoportot választ.
    • Az új Azure Maps-fiók neve .
    • A fiók tarifacsomagja . Válassza a Gen2 lehetőséget.
    • Olvassa el a licenc- és adatvédelmi nyilatkozatot, majd jelölje be a jelölőnégyzetet a feltételek elfogadásához.

    Képernyőkép az Azure Maps-fiók erőforráslapjáról az Azure Portalon.

A fiók előfizetési kulcsának lekérése

Az Azure Maps-fiók sikeres létrehozása után kérje le az előfizetési kulcsot, amely lehetővé teszi a Térképek API-k lekérdezését.

  1. Nyissa meg a Maps-fiókot a portálon.
  2. A beállítások szakaszban válassza a Hitelesítés lehetőséget.
  3. Másolja ki az elsődleges kulcsot , és mentse helyileg az oktatóanyag későbbi részében való használatra.

Képernyőkép az Azure Maps-előfizetési kulcsról az Azure Portalon.

Feljegyzés

Ez a rövid útmutató a közös kulcsos hitelesítési megközelítést használja bemutató célokra, de az éles környezetek előnyben részesített megközelítése a Microsoft Entra ID-hitelesítés használata.

Az Azure Maps bemutatójának letöltése és frissítése

  1. Másolja ki a fájl tartalmát: Interaktív keresés Quickstart.html.
  2. Mentse a fájl tartalmát helyileg AzureMapDemo.html. Nyissa meg egy szövegszerkesztőben.
  3. Adja hozzá az előző szakaszban kapott elsődleges kulcsértéket
    1. A függvény összes authOptions kódjának megjegyzése: ez a kód a Microsoft Entra-hitelesítéshez használatos.
    2. Bontsa ki a függvény utolsó két sorát, és ezt a authOptions kódot használja a közös kulcsú hitelesítéshez. Ezt a megközelítést használja ebben a rövid útmutatóban.
    3. Cserélje le <Your Azure Maps Key> az előző szakasz előfizetéskulcs-értékére.

A bemutató alkalmazás megnyitása

  1. Nyissa meg az AzureMapDemo.html fájlt egy tetszőleges böngészőben.

  2. Figyelje meg Los Angeles városának térképét. Nagyítson és kicsinyítsen, ekkor a térkép automatikusan több vagy kevesebb információt jelenít meg a nagyítás mértékétől függően.

  3. Módosítsa a térkép alapértelmezett középpontját. Az AzureMapDemo.html fájlban keresse meg a center nevű változót. A változó szélesség–hosszúság értékpárt cserélje le a következő új értékre: [-74.0060, 40.7128]. Mentse a fájlt, és frissítse a böngészőt.

  4. Próbálja ki az interaktív keresést. A demo webalkalmazás bal felső sarkában található keresőmezőben keressen éttermeket.

  5. Vigye az egeret a keresőmező alatt megjelenő címek és helyek listájára. Figyelje meg, hogy a térképen lévő megfelelő pin-kód hogyan jelenik meg az adott helyről. A magánvállalkozások adatainak védelme érdekében az itt látható nevek és címek nem valósak.

    Képernyőkép az interaktív térképkeresési webalkalmazásról.

Az erőforrások eltávolítása

Fontos

A Következő lépések szakaszban felsorolt oktatóanyagok részletesen ismertetik az Azure Maps használatát és konfigurálását a fiókjával. Ne törölje az ebben a rövid útmutatóban létrehozott erőforrásokat, ha folytatni szeretné az oktatóanyagokat.

Ha nem tervezi folytatni az oktatóanyagokat, végezze el az alábbi lépéseket az erőforrások megtisztításához:

  1. Zárja be a AzureMapDemo.html webalkalmazást futtató böngészőt.
  2. Lépjen az Azure Portalra. Válassza az Összes erőforrás lehetőséget a fő portállapon, vagy válassza a bal felső sarokban lévő menüikont, majd a Minden erőforrás lehetőséget.
  3. Válassza ki az Azure Maps-fiókját, majd válassza a Törlés lehetőséget a lap tetején.

További kód példákért és interaktív kódolási élményért tekintse meg az alábbi cikkeket:

Következő lépések

Ebben a rövid útmutatóban létrehozott egy Azure Maps-fiókot és egy bemutató alkalmazást. Az Azure Maps szolgáltatással kapcsolatos további információkért tekintse meg az alábbi oktatóanyagokat: