Affichage de cartes dans un site pages Web ASP.NET (Razor)
par Tom FitzMacken
Cet article explique comment afficher des cartes interactives sur des pages d’un site web pages Web ASP.NET (Razor) en fonction des services de mappage fournis par Bing, Google, MapQuest et Yahoo.
Ce que vous allez apprendre :
- Comment générer une carte basée sur une adresse.
- Comment générer une carte basée sur des coordonnées de latitude et de longitude.
- Comment inscrire un compte de développeur Bing Cartes et obtenir une clé à utiliser avec Bing Cartes.
Il s’agit de la fonctionnalité ASP.NET introduite dans l’article :
- L’assistance
Maps.Versions logicielles utilisées dans le tutoriel
- pages Web ASP.NET (Razor) 2
- WebMatrix 2
Ce tutoriel fonctionne également avec WebMatrix 3.
Dans Pages web, vous pouvez afficher des cartes sur une page à l’aide Maps de l’assistance. Vous pouvez générer des cartes basées sur une adresse ou sur un ensemble de coordonnées de longitude et de latitude. La Maps classe vous permet d’appeler des moteurs de carte populaires, notamment Bing, Google, MapQuest et Yahoo.
Les étapes d’ajout de mappage à une page sont les mêmes, quel que soit le moteur de carte que vous appelez. Il vous suffit d’ajouter une référence de fichier JavaScript qui met à disposition des méthodes pour afficher la carte, puis vous appelez les méthodes de l’assistance Maps .
Vous choisissez un service de carte en fonction de la méthode d’assistance que Maps vous utilisez. Vous pouvez utiliser l’un des éléments suivants :
Maps.GetBingHtmlMaps.GetGoogleHtmlMaps.GetYahooHtmlMaps.GetMapQuestHtml
Installation des pièces dont vous avez besoin
Pour afficher des cartes, vous avez besoin des éléments suivants :
- L’assistance
Maps. Cette assistance se trouve dans la version 2 de la bibliothèque ASP.NET Web Helpers. Si vous n’avez pas encore ajouté la bibliothèque, vous pouvez l’installer dans votre site en tant que package NuGet. Pour plus d’informations, consultez Installation d’assistance dans un site pages Web ASP.NET. (Dans la galerie, recherchez lemicrosoft-web-helperspackage.) - Bibliothèque jQuery. Plusieurs modèles de site WebMatrix incluent déjà des bibliothèques jQuery dans leurs dossiers de script . Si vous n’avez pas ces bibliothèques, vous pouvez télécharger la dernière bibliothèque jQuery directement à partir du site jQuery.org . Vous pouvez également créer un site à l’aide d’un modèle (par exemple, le modèle site de démarrage ), puis copier les fichiers jQuery de ce site vers votre site actuel.
Enfin, si vous souhaitez utiliser bing maps, vous devez d’abord créer un compte (gratuit) et obtenir une clé. Pour obtenir une clé, procédez comme suit :
Créez un compte sur le compte de développeur Bing Cartes. Vous devez également disposer d’un compte Microsoft (Windows Live ID).
Vous pouvez spécifier que vous souhaitez utiliser la clé pour l’évaluation/test. Si vous testez la fonction de mappage sur votre propre ordinateur à l’aide de WebMatrix et IIS Express, accédez à l’espace de travail Site et notez l’URL de votre site (par exemple,
http://localhost:50408, bien que votre numéro de port soit probablement différent). Vous pouvez utiliser cette adresse localhost comme site lorsque vous vous inscrivez.Une fois que vous êtes inscrit pour un compte, accédez au Centre des comptes Bing Cartes, puis cliquez sur Créer ou afficher les clés :
Enregistrez la clé créée par Bing.
Création d’une carte basée sur une adresse (à l’aide de Google)
L’exemple suivant montre comment créer une page qui affiche une carte basée sur une adresse. Cet exemple montre comment utiliser Google Maps.
Créez un fichier nommé MapAddress.cshtml à la racine du site. Cette page génère une carte basée sur une adresse que vous lui transmettez.
Copiez le code suivant dans le fichier, en remplaçant le contenu existant.
<!DOCTYPE html> <html lang="en"> <head> <title>Map an Address</title> <script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> </head> <body> <h1>Map an Address</h1> <form method="post"> <fieldset> <div> <label for="address">Address:</label> <input style="width: 300px" type="text" name="address" value="@Request["address"]"/> <input type="submit" value="Map It!" /> </div> </fieldset> </form> @if(IsPost) { @Maps.GetGoogleHtml(Request.Form["address"], width: "400", height: "400") } </body> </html>Notez les fonctionnalités suivantes de la page :
Élément
<script>dans l’élément<head>. Dans l’exemple, l’élément<script>fait référence au fichier jquery-1.6.4.min.js , qui est une version minifiée (compressée) de la bibliothèque jQuery, version 1.6.4. Notez que la référence suppose que le fichier .js se trouve dans le dossier Scripts de votre site.Notes
Si vous utilisez une autre version de la bibliothèque jQuery, assurez-vous simplement que vous pointez correctement vers cette version.
Appel à dans
@Maps.GetGoogleHtmlle corps de la page. Pour mapper une adresse, vous devez passer une chaîne d’adresse. Les méthodes des autres moteurs de carte fonctionnent de la même manière (@Maps.GetYahooHtml,@Maps.GetMapQuestHtml).
Exécutez la page et entrez une adresse. La page affiche une carte, basée sur Google Maps, qui indique l’emplacement que vous avez spécifié.
Création d’une carte basée sur des coordonnées de latitude et de longitude (à l’aide de Bing)
Cet exemple montre comment créer une carte basée sur des coordonnées. Cet exemple montre comment utiliser des cartes Bing et comment inclure votre clé Bing. (Vous pouvez également créer une carte basée sur des coordonnées à l’aide des autres moteurs de carte, sans utiliser de clé Bing.)
Créez un fichier nommé MapCoordinates.cshtml à la racine du site et remplacez le contenu existant par le code et le balisage suivants :
<!DOCTYPE html> <html lang="en"><head> <title>Map Coordinates</title> <script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> </head> <body> <h1>Map Coordinates</h1> <form method="post"> <fieldset> <div> <label for="latitude">Latitude: </label> <input type="text" name="latitude" value="@Request["latitude"]"/> </div> <div> <label for="longitude">Longitude:</label> <input type="text" name="longitude" value="@Request["longitude"]"/> </div> <div> <input type="submit" value="Map It!" /> </div> </fieldset> </form> @if(IsPost) { @Maps.GetBingHtml(key: "your-key-here", latitude: Request["latitude"], longitude: Request["longitude"], width: "300", height: "300" ) } </body> </html>Remplacez par
your-key-herela clé Bing Cartes que vous avez générée précédemment.Exécutez la page MapCoordinates.cshtml, entrez les coordonnées de latitude et de longitude, puis cliquez sur le bouton Mapper. (Si vous ne connaissez aucune coordonnée, essayez ce qui suit. Il s’agit d’un emplacement sur le campus Microsoft Redmond.)
Latitude : 47,6781005859375
Longitude : -122.158317565918
La page s’affiche à l’aide des coordonnées que vous avez spécifiées.
