Tutorial: Route zu einem Point of Interest mit Azure MapsTutorial: Route to a point of interest using Azure Maps

In diesem Tutorial wird veranschaulicht, wie Sie Ihr Azure Maps-Konto und das Routendienst-SDK verwenden, um die Route zum Point of Interest zu ermitteln.This tutorial shows how to use your Azure Maps account and the Route Service SDK to find the route to your point of interest. In diesem Tutorial lernen Sie Folgendes:In this tutorial, you learn how to:

  • Erstellen einer neuen Webseite mit der Kartensteuerelement-APICreate a new web page using the map control API
  • Festlegen von AdressenkoordinatenSet address coordinates
  • Abfragen des Routendiensts nach der Wegbeschreibung zum Point of InterestQuery Route Service for directions to point of interest

VoraussetzungenPrerequisites

Befolgen Sie vor dem Fortfahren die Anleitung unter Erstellen eines Kontos. Sie benötigen ein Abonnement mit dem Tarif „S1“.Before you continue, follow instructions in Create an account, you need a subscription with S1 pricing tier. Führen Sie die Schritte unter Abrufen des Primärschlüssels aus, um den Primärschlüssel für Ihr Konto zu erhalten.Follow the steps in get primary key to get the primary key for your account. Weitere Informationen zur Authentifizierung in Azure Maps finden Sie unter Verwalten der Authentifizierung in Azure Maps.For more information on authentication in Azure Maps, see manage authentication in Azure Maps.

Erstellen einer neuen KarteCreate a new map

Die folgenden Schritte veranschaulichen, wie Sie eine statische HTML-Seite erstellen, in die die Kartensteuerelement-API eingebettet ist.The following steps show you how to create a static HTML page embedded with the Map Control API.

  1. Erstellen Sie auf dem lokalen Computer eine neue Datei, und nennen Sie sie MapRoute.html.On your local machine, create a new file and name it MapRoute.html.

  2. Fügen Sie der Datei die folgenden HTML-Komponenten hinzu:Add the following HTML components to the file:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Map Route</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    
        <!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
        <script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
    
        <script>
            var map, datasource, client;
    
            function GetMap() {
                //Add Map Control JavaScript code here.
            }
        </script>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
    
            #myMap {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body onload="GetMap()">
        <div id="myMap"></div>
    </body>
    </html>
    

    Beachten Sie, dass der HTML-Header die CSS- und JavaScript-Ressourcendateien enthält, die von der Azure-Kartensteuerelement-Bibliothek gehostet werden.Notice that the HTML header includes the CSS and JavaScript resource files hosted by the Azure Map Control library. Beachten Sie das Ereignis onload im Textkörper der Seite. Dieses Ereignis ruft die Funktion GetMap auf, wenn der Textkörper der Seite geladen wurde.Note the onload event on the body of the page, which will call the GetMap function when the body of the page has loaded. Diese Funktion enthält den JavaScript-Inlinecode für den Zugriff auf die Azure Maps-APIs.This function will contain the inline JavaScript code to access the Azure Maps APIs.

  3. Fügen Sie der Funktion GetMap den folgenden JavaScript-Code hinzu.Add the following JavaScript code to the GetMap function. Ersetzen Sie die Zeichenfolge <Your Azure Maps Key> durch den Primärschlüssel, den Sie aus Ihrem Maps-Konto kopiert haben.Replace the string <Your Azure Maps Key> with the primary key that you copied from your Maps account.

    //Instantiate a map object
    var map = new atlas.Map("myMap", {
        //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
        authOptions: {
           authType: 'subscriptionKey',
           subscriptionKey: '<Your Azure Maps Key>'
        }
    });
    

    Mit atlas.Map – einer Komponente der Azure-Kartensteuerelement-API – wird das Steuerelement für eine visuelle und interaktive Webkarte bereitgestellt.The atlas.Map provides the control for a visual and interactive web map, and is a component of the Azure Map Control API.

  4. Speichern Sie die Datei, und öffnen Sie sie im Browser.Save the file and open it in your browser. Nun besitzen Sie eine einfache Karte, die Sie weiter anpassen können.At this point, you have a basic map that you can develop further.

    Anzeigen der einfachen Karte

Definieren, wie die Route dargestellt werden sollDefine how the route will be rendered

In diesem Tutorial wird eine einfache Route mit einem Symbol für Anfang und Ende und einer Linie für den Routenverlauf dargestellt.In this tutorial, a simple route will be rendered using a symbol icon for the start and end of the route, and a line for the route path.

  1. Fügen Sie nach der Karteninitialisierung den folgenden JavaScript-Code hinzu:After initializing the map, add the following JavaScript code.

    //Wait until the map resources are ready.
    map.events.add('ready', function() {
    
        //Create a data source and add it to the map.
        datasource = new atlas.source.DataSource();
        map.sources.add(datasource);
    
        //Add a layer for rendering the route lines and have it render under the map labels.
        map.layers.add(new atlas.layer.LineLayer(datasource, null, {
            strokeColor: '#2272B9',
            strokeWidth: 5,
            lineJoin: 'round',
            lineCap: 'round'
        }), 'labels');
    
        //Add a layer for rendering point data.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
            iconOptions: {
                image: ['get', 'icon'],
                allowOverlap: true
           },
            textOptions: {
                textField: ['get', 'title'],
                offset: [0, 1.2]
            },
            filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
        }));
    });
    

    Im Kartenereignishandler ready wird eine Datenquelle zum Speichern der Routenlinie und der Start- und Endpunkte erstellt.In the maps ready event handler, a data source is created to store the route line and the start and end points. Eine Linienebene wird erstellt und an die Datenquelle angefügt, um zu definieren, wie die Routenlinie dargestellt werden soll.A line layer is created and attached to the data source to defined how the route line will be rendered. Die Routenlinie wird in einer schönen blauen Farbe dargestellt.The route line will be rendered as a nice shade of blue. Sie verfügt über eine Breite von fünf Pixeln und abgerundete Linienverbindungen und -abschlüsse.It will have a width of five pixels, rounded line joins, and caps. Beim Hinzufügen der Ebene zur Karte wird ein zweiter Parameter mit dem Wert 'labels' übergeben. Dieser gibt an, dass diese Ebene unterhalb der Kartenbeschriftungen gerendert werden soll.When adding the layer to the map a second parameter with the value of 'labels' is passed in which specifies to render this layer below the map labels. Dadurch wird sichergestellt, dass die Routenlinie keine Straßenbezeichnungen verdeckt.This will ensure that the route line doesn't cover up the road labels. Eine Symbolebene wird erstellt und an die Datenquelle angefügt.A symbol layer is created and attached to the data source. Diese Ebene gibt an, wie die Start- und Endpunkte gerendert werden.This layer specifies how the start and end points are rendered. In diesem Fall wurden Ausdrücke hinzugefügt, um das Symbol und die Beschriftungsinformationen aus Eigenschaften für das jeweilige Punktobjekt abzurufen.In this case, expressions have been added to retrieve the icon image and text label information from properties on each point object.

  2. Legen Sie in diesem Tutorial als Startpunkt Microsoft und als Endpunkt eine Tankstelle in Seattle fest.For this tutorial, set the start point as Microsoft, and the end point as a gas station in Seattle. Fügen Sie im Kartenereignishandler ready den folgenden Code hinzu:In the maps ready event handler, add the following code.

    //Create the GeoJSON objects which represent the start and end points of the route.
    var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
        title: "Redmond",
        icon: "pin-blue"
    });
    
    var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.3352, 47.61397]), {
        title: "Seattle",
        icon: "pin-round-blue"
    });
    
    //Add the data to the data source.
    datasource.add([startPoint, endPoint]);
    
    map.setCamera({
        bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
        padding: 80
    });
    

    Mit diesem Code werden zwei GeoJSON-Punktobjekte erstellt, die für den Start- bzw. Endpunkt der Route stehen, und der Datenquelle hinzugefügt.This code creates two GeoJSON Point objects to represent the start and end points of the route and adds the points to the datasource. Den Punkten wird jeweils eine Eigenschaft vom Typ title und icon hinzugefügt.A title and icon property is added to each point. Mit dem letzten Block wird mithilfe der Breiten- und Längengrade der Start- und Endpunkte sowie der Karteneigenschaft setCamera die Kameraansicht festgelegt.The last block sets the camera view using the latitude and longitude of the start and end points, using the Map's setCamera property.

  3. Speichern Sie die Datei MapRoute.html, und aktualisieren Sie den Browser.Save the MapRoute.html file and refresh your browser. Die Karte ist nun auf Seattle zentriert, und Sie sehen die blaue Markierung für den Startpunkt und die runde blaue Markierung für das Ziel.Now the map is centered over Seattle, and you can see the blue pin marking the start point and the round blue pin marking the finish point.

    Anzeigen des Start- und Endpunkts einer Route auf der Karte

Abrufen einer WegbeschreibungGet directions

In diesem Abschnitt wird veranschaulicht, wie Sie die Routendienst-API von Azure Maps verwenden.This section shows how to use Azure Maps route service API. Die Routendienst-API ermittelt die Route von einem bestimmten Startpunkt zu einem Endpunkt.The route service API finds the route from a given start point to an end point. Dieser Dienst verfügt über APIs zum Planen der schnellsten, kürzesten, umweltfreundlichsten oder schönsten Route zwischen zwei Orten.Within this service, there are APIs to plan fastest, shortest, eco, or thrilling routes between two locations. Darüber hinaus ermöglicht dieser Dienst auch das Planen von zukünftigen Routen, indem die umfangreiche Azure-Datenbank für den Verkehrsverlauf verwendet wird.This service also allows users to plan routes in the future by using Azure's extensive historic traffic database. Benutzer können die Vorhersage der Routendauern für jeden Tag und jede Uhrzeit anzeigen.Users can see the prediction of the route durations at any chosen day and time. Weitere Informationen finden Sie unter Get route directions (Abrufen von Wegbeschreibungen).For more information, see Get route directions. Alle folgenden Funktionen müssen innerhalb des eventListener-Elements für die Bereitschaft der Karte hinzugefügt werden, um sicherzustellen, dass die Kartenressourcen für den Zugriff bereit sind.All of the following functionalities should be added within the map ready eventListener to ensure that they load after the map resources are ready to be accessed.

  1. Fügen Sie dem JavaScript-Code in der GetMap-Funktion Folgendes hinzu:In the GetMap function, add the following to the JavaScript code.

    // Use SubscriptionKeyCredential with a subscription key
    var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
    
    // Use subscriptionKeyCredential to create a pipeline
    var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
    
    // Construct the RouteURL object
    var routeURL = new atlas.service.RouteURL(pipeline);
    

    SubscriptionKeyCredential erstellt ein SubscriptionKeyCredentialPolicy-Element, um HTTP-Anforderungen für Azure Maps mit dem Abonnementschlüssel zu authentifizieren.The SubscriptionKeyCredential creates a SubscriptionKeyCredentialPolicy to authenticate HTTP requests to Azure Maps with the subscription key. atlas.service.MapsURL.newPipeline() verwendet die Richtlinie SubscriptionKeyCredential und erstellt eine Pipeline-Instanz.The atlas.service.MapsURL.newPipeline() takes in the SubscriptionKeyCredential policy and creates a Pipeline instance. routeURL stellt eine URL zu Routenvorgängen von Azure Maps dar.The routeURL represents a URL to Azure Maps Route operations.

  2. Fügen Sie nach dem Einrichten von Anmeldeinformationen und URL den folgenden JavaScript-Code hinzu, um die Route vom Start- zum Endpunkt zu erstellen.After setting up credentials and the URL, add the following JavaScript code to construct the route from start to end point. routeURL fordert beim Azure Maps-Routendienst die Berechnung von Wegbeschreibungen an.The routeURL requests the Azure Maps route service to calculate route directions. Anschließend wird mit der Methode geojson.getFeatures() eine GeoJSON-Merkmalsauswahl extrahiert und der Datenquelle hinzugefügt.A GeoJSON feature collection from the response is then extracted using the geojson.getFeatures() method and added to the data source.

    //Start and end point input to the routeURL
    var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];
    
    //Make a search route request
    routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
        //Get data features from response
        var data = directions.geojson.getFeatures();
        datasource.add(data);
    });
    
  3. Speichern Sie die Datei MapRoute.html, und aktualisieren Sie den Webbrowser.Save the MapRoute.html file and refresh your web browser. Bei einer erfolgreichen Verbindungsherstellung mit den Maps-APIs sollte eine Karte angezeigt werden, die in etwa wie folgt aussieht:For a successful connection with the Maps APIs, you should see a map similar to the following.

    Azure-Kartensteuerelement und -Routendienst

Nächste SchritteNext steps

In diesem Tutorial haben Sie Folgendes gelernt:In this tutorial, you learned how to:

  • Erstellen einer neuen Webseite mit der Kartensteuerelement-APICreate a new web page using the map control API
  • Festlegen von AdressenkoordinatenSet address coordinates
  • Abfragen des Routendiensts nach der Wegbeschreibung zum Point of InterestQuery the route service for directions to point of interest

Im nächsten Tutorial erfahren Sie, wie Sie eine Routenabfrage mit Einschränkungen wie Fortbewegungsart oder Frachttyp erstellen und anschließend mehrere Routen auf der gleichen Karte anzeigen.The next tutorial demonstrates how to create a route query with restrictions like mode of travel or type of cargo, then display multiple routes on the same map.