Share via

Anzeigen von Karten auf einer ASP.NET Web Pages -Website (Razor)

  • Artikel

von Tom FitzMacken

In diesem Artikel wird erläutert, wie interaktive Karten auf Seiten einer ASP.NET Web Pages -Website (Razor) basierend auf Kartendiensten von Bing, Google, MapQuest und Yahoo angezeigt werden.

Sie lernen Folgendes:

  • Generieren einer Karte basierend auf einer Adresse.
  • Erstellen einer Karte basierend auf Breiten- und Längengradkoordinaten
  • Registrieren eines Bing Maps-Entwicklerkontos und Abrufen eines Schlüssels für die Verwendung mit Bing Maps

Dies ist die ASP.NET Funktion, die im Artikel vorgestellt wird:

  • Das Maps Hilfsprogramm.

Im Tutorial verwendete Softwareversionen

  • ASP.NET Web Pages (Razor) 2
  • WebMatrix 2

Dieses Tutorial funktioniert auch mit WebMatrix 3.

In Webseiten können Sie Karten auf einer Seite anzeigen, indem Sie das Hilfsprogramm verwenden Maps . Sie können Karten entweder basierend auf einer Adresse oder auf einer Reihe von Längen- und Breitenkoordinaten generieren. Mit Maps der -Klasse können Sie gängige Karten-Engines wie Bing, Google, MapQuest und Yahoo aufrufen.

Die Schritte zum Hinzufügen der Zuordnung zu einer Seite sind identisch, unabhängig davon, welche Karten-Engines Sie aufrufen. Sie fügen einfach einen JavaScript-Dateiverweis hinzu, der Methoden zum Anzeigen der Karte zur Verfügung stellt, und rufen dann Methoden des Maps Hilfsprogramm auf.

Sie wählen einen Kartendienst basierend auf der Maps verwendeten Hilfsmethode aus. Sie können eine der folgenden Optionen verwenden:

  • Maps.GetBingHtml
  • Maps.GetGoogleHtml
  • Maps.GetYahooHtml
  • Maps.GetMapQuestHtml

Installieren der benötigten Teile

Zum Anzeigen von Karten benötigen Sie die folgenden Teile:

  • Das Maps Hilfsprogramm. Dieses Hilfsprogramm ist in Version 2 der ASP.NET-Webhilfsprogrammebibliothek enthalten. Wenn Sie die Bibliothek noch nicht hinzugefügt haben, können Sie sie als NuGet-Paket an Ihrem Standort installieren. Weitere Informationen finden Sie unter Installieren von Hilfsprogrammen an einem ASP.NET Web Pages Standort. (Suchen Sie im Katalog nach dem microsoft-web-helpers Paket.)
  • Die jQuery-Bibliothek. Einige der WebMatrix-Websitevorlagen enthalten bereits jQuery-Bibliotheken in ihren Skriptordnern . Wenn Sie nicht über diese Bibliotheken verfügen, können Sie die neueste jQuery-Bibliothek direkt von der jQuery.org Website herunterladen. Alternativ können Sie mithilfe einer Vorlage (z. B. der Vorlage Starterwebsite ) eine neue Website erstellen und dann die jQuery-Dateien von dieser Website auf Ihre aktuelle Website kopieren.

Wenn Sie Schließlich Bing-Karten verwenden möchten, müssen Sie zunächst ein (kostenloses) Konto erstellen und einen Schlüssel abrufen. Führen Sie die folgenden Schritte aus, um einen Schlüssel abzurufen:

  1. Erstellen Sie ein Konto im Bing Maps-Entwicklerkonto. Sie benötigen auch ein Microsoft-Konto (Windows Live ID).

    Sie können angeben, dass Sie den Schlüssel für Evaluation/Test verwenden möchten. Wenn Sie die Zuordnungsfunktion auf Ihrem eigenen Computer mit WebMatrix und IIS Express testen, wechseln Sie zum Arbeitsbereich Website, und notieren Sie sich die URL Ihrer Website (z. B. , http://localhost:50408obwohl Ihre Portnummer wahrscheinlich anders sein wird). Sie können diese localhost-Adresse bei der Registrierung als Website verwenden.

  2. Nachdem Sie sich für ein Konto registriert haben, wechseln Sie zum Bing Maps-Kontocenter, und klicken Sie auf Schlüssel erstellen oder anzeigen:

    mapping-2

  3. Notieren Sie sich den Schlüssel, den Bing erstellt.

Erstellen einer Karte basierend auf einer Adresse (mit Google)

Das folgende Beispiel zeigt, wie Sie eine Seite erstellen, die eine Karte basierend auf einer Adresse rendert. In diesem Beispiel wird gezeigt, wie Sie Google Maps verwenden.

  1. Erstellen Sie im Stammverzeichnis der Website eine Datei namens MapAddress.cshtml . Diese Seite generiert eine Karte basierend auf einer Adresse, die Sie an sie übergeben.

  2. Kopieren Sie den folgenden Code in die Datei, und überschreiben Sie den vorhandenen Inhalt.

    <!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>

    Beachten Sie die folgenden Features der Seite:

    • Das <script> -Element im <head> -Element. Im Beispiel verweist das <script> Element auf die jquery-1.6.4.min.js-Datei , bei der es sich um eine minimierte (komprimierte) Version der jQuery-Bibliothek, Version 1.6.4, handelt. Beachten Sie, dass der Verweis davon ausgeht, dass sich die .js-Datei im Ordner Skripts Ihrer Website befindet.

      Hinweis

      Wenn Sie eine andere Version der jQuery-Bibliothek verwenden, stellen Sie sicher, dass Sie ordnungsgemäß auf diese Version verweisen.

    • Der Aufruf von im @Maps.GetGoogleHtml Textkörper der Seite. Zum Zuordnen einer Adresse müssen Sie eine Adresszeichenfolge übergeben. Die Methoden für die anderen Karten-Engines funktionieren auf ähnliche Weise (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).

  3. Führen Sie die Seite aus, und geben Sie eine Adresse ein. Auf der Seite wird eine Karte angezeigt, die auf Google Maps basiert und den von Ihnen angegebenen Standort anzeigt.

    mapping-1

Erstellen einer Karte basierend auf Breiten- und Längengradkoordinaten (mit Bing)

In diesem Beispiel wird gezeigt, wie eine Karte basierend auf Koordinaten erstellt wird. In diesem Beispiel wird gezeigt, wie Sie Bing-Karten verwenden und Ihren Bing-Schlüssel einschließen. (Sie können eine Karte basierend auf Koordinaten auch mit den anderen Karten-Engines erstellen, ohne einen Bing-Schlüssel zu verwenden.)

  1. Erstellen Sie im Stammverzeichnis der Website eine Datei mit dem Namen MapCoordinates.cshtml , und ersetzen Sie den vorhandenen Inhalt durch den folgenden Code und das folgende Markup:

    <!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:&nbsp;&nbsp;&nbsp;</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>

  2. Ersetzen Sie durch your-key-here den Zuvor generierten Bing Maps-Schlüssel.

  3. Führen Sie die Seite MapCoordinates.cshtml aus, geben Sie Breiten- und Längengradkoordinaten ein, und klicken Sie dann auf die Schaltfläche Map It! . (Wenn Sie keine Koordinaten kennen, versuchen Sie Folgendes. Dies ist ein Standort auf dem Microsoft Redmond Campus.)

    • Breitengrad: 47.6781005859375

    • Längengrad: -122.158317565918

      Die Seite wird mit den von Ihnen angegebenen Koordinaten angezeigt.

      mapping-3

Zusätzliche Ressourcen

Referenz zur Microsoft.Maps-API