Démarrage rapide : Créer une carte de recherche interactive avec Azure Maps

Ce guide de démarrage rapide montre comment utiliser Azure Maps pour créer une carte qui offre aux utilisateurs une expérience de recherche interactive. Il vous guide pas à pas durant ces étapes de base :

• Créer votre propre compte Azure Maps.
• Obtenir votre clé d’abonnement Azure Maps à utiliser dans l’application Web de démonstration.
• Téléchargez et ouvrez l’application de carte de démonstration.

Ce guide de démarrage rapide utilise le kit SDK Azure Maps Web. Toutefois, le service Azure Maps peut être utilisé avec n’importe quel contrôle de carte, par exemple les fameux contrôles de carte open source pour lesquels l’équipe Azure Maps a créé des plug-ins.

Prérequis

• Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.

• Connectez-vous au portail Azure.

Créer un compte Azure Maps

Créez un compte Azure Maps en effectuant les étapes suivantes :

1. Sélectionnez Créer une ressource en haut à gauche du portail Azure.

2. Tapez Azure Maps dans la zone Rechercher dans les services et la Place de marché.

3. Sélectionnez Azure Maps dans la liste déroulante qui s’affiche, puis sélectionnez le bouton Créer.

4. Dans la page Créer une ressource de compte Azure Maps, entrez les valeurs suivantes, puis sélectionnez le bouton Créer :

   • L’Abonnement à utiliser pour ce compte.
   • Le Groupe de ressources pour ce compte. Vous avez le choix entre Créer un groupe de ressources ou Sélectionner un groupe de ressources existant.
   • Nom de votre nouveau compte Azure Maps.
   • Le niveau tarifaire pour ce compte. Sélectionnez Gen2.
   • Lisez les informations relatives à la Licence et à la Déclaration de confidentialité, puis cochez la case pour accepter les conditions.

   

Obtenir la clé d’abonnement pour votre compte

Une fois le compte Azure Maps correctement créé, récupérez la clé d’abonnement vous permettant d’interroger les API Maps.

1. Ouvrez votre compte Maps dans le portail.
2. Dans la section des paramètres, sélectionnez Authentification.
3. Copiez la clé primaire, puis enregistrez-la localement pour l’utiliser plus tard dans ce tutoriel.

Remarque

Ce guide de démarrage rapide utilise l’approche basée sur l’authentification par clé partagée à des fins de démonstration. Toutefois, l’approche recommandée pour tout environnement de production est celle de l’authentification [Microsoft Entra ID].

Télécharger et mettre à jour la version de démonstration d’Azure Maps

1. Copiez le contenu du fichier : Recherche interactive Quickstart.html.
2. Enregistrez le contenu de ce fichier localement sous le nom AzureMapDemo.html. Ouvrez le fichier dans un éditeur de texte.
3. Ajoutez la valeur de la clé primaire que vous avez obtenue dans la section précédente
   1. Commentez l’ensemble du code de la fonction authOptions. Ce code est utilisé pour l’authentification Microsoft Entra.
   2. Décommentez les deux dernières lignes de la fonction authOptions. Ce code est utilisé pour l’authentification par clé partagée, l’approche utilisée dans ce guide de démarrage rapide.
   3. Remplacez <Your Azure Maps Key> par la valeur de la clé primaire d’abonnement obtenue dans la section précédente.

Ouvrir l’application de démonstration

1. Ouvrez le fichier AzureMapDemo.html dans le navigateur de votre choix.

2. Observez la carte de la ville de Los Angeles. Effectuez un zoom avant et arrière : la carte affiche automatiquement plus ou moins d’informations selon le niveau de zoom.

3. Modifiez le centre par défaut de la carte. Dans le fichier AzureMapDemo.html, recherchez la variable nommée center. Remplacez la paire de valeurs longitude, latitude de cette variable par les nouvelles valeurs : [-74.0060, 40.7128] . Enregistrez le fichier et actualisez votre navigateur.

4. Testez l’expérience de recherche interactive. Dans la zone de recherche en haut à gauche de l’application web de démonstration, recherchez restaurants.

5. Déplacez votre souris sur la liste des adresses et emplacements qui s’affichent sous la zone de recherche. Le repère correspondant sur la carte affiche des informations à propos de cet emplacement. Pour des raisons de confidentialité des entreprises privées, des adresses et des noms fictifs sont présentés.

   

Nettoyer les ressources

Important

Les tutoriels répertoriés dans la section Étapes suivantes expliquent en détail comment utiliser et configurer Azure Maps avec votre compte. Si vous souhaitez suivre les tutoriels, ne nettoyez pas les ressources créées dans ce guide de démarrage rapide.

Sinon, effectuez ces étapes pour nettoyer les ressources :

1. Fermez le navigateur qui exécute l’application web AzureMapDemo.html.
2. Accédez au portail Azure. Sélectionnez Toutes les ressources dans la page principale du portail, ou sélectionnez l’icône de menu dans le coin supérieur gauche, puis sélectionnez Toutes les ressources.
3. Sélectionnez votre compte Azure Maps, puis sélectionnez Supprimer en haut de la page.

Pour obtenir davantage d’exemples de code et bénéficier d’une expérience de développement interactive, consultez les articles suivants :

• Rechercher une adresse avec le service Recherche Azure Maps
• Utiliser la bibliothèque Map Control d’Azure Maps

Étapes suivantes

Dans ce guide de démarrage rapide, vous avez créé un compte Azure Maps et une application de démonstration. Pour en savoir plus sur Azure Maps, consultez les tutoriels suivants :

Rechercher des points d’intérêt de proximité avec Azure Maps