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
Ha még nincs Azure-előfizetése, kezdés előtt hozzon létre egy ingyenes fiókot.
Jelentkezzen be az Azure Portalra.
Azure Maps-fiók létrehozása
Hozzon létre egy új Azure Maps-fiókot a következő lépésekkel:
Válassza az Erőforrás létrehozása lehetőséget az Azure Portal bal felső sarkában.
Írja be az Azure Mapst a Search szolgáltatás és a Marketplace mezőbe.
Válassza az Azure Maps lehetőséget a megjelenő legördülő listában, majd válassza a Létrehozás gombot.
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.
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.
- Nyissa meg a Maps-fiókot a portálon.
- A beállítások szakaszban válassza a Hitelesítés lehetőséget.
- Másolja ki az elsődleges kulcsot , és mentse helyileg az oktatóanyag későbbi részében való használatra.
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
- Másolja ki a fájl tartalmát: Interaktív keresés Quickstart.html.
- Mentse a fájl tartalmát helyileg AzureMapDemo.html. Nyissa meg egy szövegszerkesztőben.
- Adja hozzá az előző szakaszban kapott elsődleges kulcsértéket
- A függvény összes
authOptions
kódjának megjegyzése: ez a kód a Microsoft Entra-hitelesítéshez használatos. - 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. - Cserélje le
<Your Azure Maps Key>
az előző szakasz előfizetéskulcs-értékére.
- A függvény összes
A bemutató alkalmazás megnyitása
Nyissa meg az AzureMapDemo.html fájlt egy tetszőleges böngészőben.
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.
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.
Próbálja ki az interaktív keresést. A demo webalkalmazás bal felső sarkában található keresőmezőben keressen éttermeket.
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.
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:
- Zárja be a AzureMapDemo.html webalkalmazást futtató böngészőt.
- 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.
- 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: