Övning – Skapa en app för ruttsökning

  • 12 minuter

I den här lektionen kodar vi appen. Vi gör det i steg så att det blir mer begripligt.

  1. Skapa en ny HTML-fil med hjälp av ett verktyg som Visual Studio Code och klistra in följande kod. Layouten är en standardbas för en HTML-sida i Azure Maps.

        <!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/mapcontrol/2/atlas-service.min.js"></script>


                ADD JavaScript CODE IN HERE


                ADD HTML STYLE CODE IN HERE

        </head>


            ADD HTML BODY CODE IN HERE


    </html>

  2. Vi börjar med LÄGG TILL KOD I HTML-FORMAT HÄR. Vi lägger till format för att skapa appens banderoll:

    Screenshot showing the html banner for our Azure Maps app.

  3. Kopiera nästa avsnitt och ersätt LÄGG TILL KOD I HTLM-FORMAT med det.

    <style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  #myMap {
    width: 100%;
    height: 75%;
  }

  .tclass {
    border: 5px solid white;
    border-radius: 20px;
    background-color: #1a1a1d;
    width: 100%;
  }

  label {
    font-size: 14pt;
    font-weight: bold;
    color: #c3073f;
  }

  .whitetext {
    color: antiquewhite;
  }

  .styled,
  .styledButtonL,
  .styledButtonS {
    border: 0;
    line-height: 2;
    padding: 0 20px;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 1px #000;
    border-radius: 8px;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px #4e4e50;
  }

  .styled {
    font-size: 12pt;
    background-color: #6f2232;
  }

  .styledButtonS {
    font-size: 11pt;
    background-color: #4e4e50;
    margin-top: 10px;
  }

  .styledButtonL {
    font-size: 18pt;
    background-color: #4e4e50;
  }

  .styledButtonL:hover,
  .styledButtonS:hover {
    background-color: #6e6e70;
  }

  .styledButtonLX:hover {
    background-color: #c3073f;
  }
</style>

  4. Ersätt sedan LÄGG TILL KOD FÖR HTML-BRÖDTEXT HÄR, med följande kod:

    <body onload="InitMap()">
  <form>
    <table class="tclass">
      <tr>
        <td align="center">
          <h3 class="whitetext">Azure Maps Cross-Country Demo</h3>
        </td>
        <td width="400px" align="center">
          <table class="styled">
            <tr>
              <td>
                <input type="radio" name="rad1" id="west1" checked="checked" />
                <label for="west1">Seattle</label>
                <input type="radio" name="rad1" id="west2" />
                <label for="west2">Portland</label>
                <input type="radio" name="rad1" id="west3" />
                <label for="west3">San Francisco</label>
              </td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" class="styledButtonS" id="viaChicago" onclick="checkMidpoint()" />
                <label for="viaChicago">via Chicago</label>
              </td>
            </tr>
          </table>
        </td>

        <td width="200px" align="center">
          <input type="button" class="styledButtonL" value="Go..." id="go" onclick="GetMap()" />
          <input type="button" class="styledButtonS" value="USHazmatClass2" id="hazmat" onclick="Hazmat()" />
        </td>

        <td align="center" width="400px">
          <table class="styled">
            <tr>
              <td>
                <input type="radio" name="rad2" id="east1" checked="checked" />
                <label for="east1">New York</label>
                <input type="radio" name="rad2" id="east2" />
                <label for="east2">Charleston</label>
                <input type="radio" name="rad2" id="east3" />
                <label for="east3">Miami</label>
              </td>
            </tr>
          </table>
        </td>

        <td width="400px" align="center">
          <table class="styled">
            <tr>
              <td>Truck:</td>
              <td id="truckkm"></td>
              <td id="truckh"></td>
            </tr>
            <tr>
              <td>Car:</td>
              <td id="carkm"></td>
              <td id="carh"></td>
            </tr>
            <tr>
              <td>Bicycle:</td>
              <td id="bicyclekm"></td>
              <td id="bicycleh"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <hr />
  </form>

  <div id="myMap"></div>
</body>

  5. Slutligen avsnittet som utför den tunga uppgiften. Ersätt LÄGG TILL JavaScript-KOD HÄR med följande kod:

            <script>
            // Global variables.
            var map, datasource, routeURL;
            var viaMidpoint = false;

            // Function to cycle through the hazardous material truck classes.
            function Hazmat() {
                var currentHazmat = document.getElementById('hazmat').value;
                var p = currentHazmat.length;
                var n = parseInt(currentHazmat.charAt(p - 1));
                if (n == 9) {
                    n = 0;
                }
                ++n;
                document.getElementById("hazmat").value = currentHazmat.substr(0, p - 1) + n.toString();
            }

            // Check to see if the Chicago midpoint as been selected.
            function checkMidpoint(){
                viaMidpoint = document.getElementById("viaChicago").checked;
            }

            // InitMap is called one time, when the <body> html is loaded.
            function InitMap() {

                // Instantiate a map object.
                map = new atlas.Map("myMap", {

                    // Add your Azure Maps subscription key to the map SDK.
                    authOptions: {
                        authType: 'subscriptionKey',
                        subscriptionKey: '<YOUR AZURE MAPS PRIMARY KEY>'
                    }
                });

                // 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.
                routeURL = new atlas.service.RouteURL(pipeline);

                // Wait until the map resources are ready before adding to them.
                map.events.add('ready', function () {

                    // Create a data source and add it to the map.
                    datasource = new atlas.source.DataSource();
                    map.sources.add(datasource);
                });
            }

            // GetMap is called each time the user clicks the "Go..." button.
            function GetMap() {

                // Add a layer for rendering the route lines, and have it render under the map 'labels' layer.
                map.layers.add(new atlas.layer.LineLayer(datasource, null, {
                    strokeColor: ['get', 'strokeColor'],
                    strokeWidth: ['get', 'strokeWidth'],
                    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]
                    },

                    // Only render Point or MultiPoints in this layer.
                    filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']]
                }));

                // Add Traffic Flow to the Map (adds a "flow" layer).
                map.setTraffic({
                    incidents: false,
                    flow: "relative"
                });

                // Create the GeoJSON objects which represent the start and end point of the route.
                var westTitle = "none";
                var westLat = 0;
                var westLon = 0;

                if (document.getElementById("west1").checked == true) {
                    westTitle = "Seattle";
                    westLat = 47.60357;
                    westLon = -122.32945;
                } else

                    if (document.getElementById("west2").checked == true) {
                        westTitle = "Portland";
                        westLat = 45.5051;
                        westLon = -122.6750;
                    } else

                        if (document.getElementById("west3").checked == true) {
                            westTitle = "San Francisco";
                            westLat = 37.7749;
                            westLon = -122.4194;
                        }

                var eastTitle = "none";
                var eastLat = 0;
                var eastLon = 0;

                if (document.getElementById("east1").checked == true) {
                    eastTitle = "New York";
                    eastLat = 40.7128;
                    eastLon = -74.0060;
                } else

                    if (document.getElementById("east2").checked == true) {
                        eastTitle = "Charleston";
                        eastLat = 32.7765;
                        eastLon = -79.9311;
                    } else

                        if (document.getElementById("east3").checked == true) {
                            eastTitle = "Miami";
                            eastLat = 25.7617;
                            eastLon = -80.1918;
                        }

                // Icon options are:
                // marker-black, marker-blue, marker-darkblue, marker-red, marker-yellow,
                // pin-blue, pin-darkblue, pin-red, pin-round-blue, pin-round-darkblue, pin-round-red.
                var startPoint = new atlas.data.Feature(new atlas.data.Point([westLon, westLat]), {
                    title: westTitle,
                    icon: 'pin-round-blue'
                });

                var midPoint = new atlas.data.Feature(new atlas.data.Point([-87.6298, 41.8781]), {
                    title: 'Chicago',
                    icon: 'pin-red'
                });

                var endPoint = new atlas.data.Feature(new atlas.data.Point([eastLon, eastLat]), {
                    title: eastTitle,
                    icon: 'pin-blue'
                });

                // Add the data to the data source. This adds the pin icons.
                // The first call to datasource uses setShapes, to remove all previous route geometry.
                datasource.setShapes([startPoint, midPoint, endPoint]);

                // Fit the map window to the bounding box defined by the start and end positions.
                // Add more points to the bounding box data, if there are mid points in the route.
                map.setCamera({
                    bounds: atlas.data.BoundingBox.fromData([startPoint, midPoint, endPoint]),
                    padding: 100
                });

                // Points input to the routeURL. Minimum of two (start and end points).
                var coordinates = [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]]];
                if (viaMidpoint)
                {
                    coordinates.push([midPoint.geometry.coordinates[0],midPoint.geometry.coordinates[1]]);
                }
                coordinates.push([endPoint.geometry.coordinates[0],endPoint.geometry.coordinates[1]]);

                // Define an internal function to find a route, and update the UI.
                function GetRoute(milliseconds, mode, vWidth, vHeight, vLength, vLoad, strokeClr, strokeWidth, index, docKm, docH) {

                    document.getElementById(docKm).textContent = "searching...";
                    document.getElementById(docH).textContent = "";

                    // Mode can be one of: bicycle, bus, car, motorcycle, pedestrian, taxi, truck, van.
                    // Vehicle dimensions are in meters.
                    // Load type is only considered for trucks.
                    routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(milliseconds), coordinates, {
                        travelMode: mode,
                        vehicleWidth: vWidth,
                        vehicleHeight: vHeight,
                        vehicleLength: vLength,
                        vehicleLoadType: vLoad
                    }).then((directions) => {

                        // Get data features from the response.
                        var data = directions.geojson.getFeatures();

                        // Get the route line, and add some style properties to it.
                        var routeLine = data.features[0];
                        routeLine.properties.strokeColor = strokeClr;
                        routeLine.properties.strokeWidth = strokeWidth;

                        // Add the route line to the data source.
                        datasource.add(routeLine, index);

                        // Calculate travel distance and times.
                        var km = directions.routes[0].summary.lengthInMeters / 1000;
                        var hours = directions.routes[0].summary.travelTimeInSeconds / 3600;
                        document.getElementById(docKm).textContent = km.toFixed(1) + " Km";
                        document.getElementById(docH).textContent = hours.toFixed(1) + " Hours";
                    }, reason => {

                        document.getElementById(docKm).textContent = "";
                        document.getElementById(docH).textContent = "No route found";
                    });
                }

                // Truck load types: USHazmatClass1 through 9, otherHazmatHarmfulToWater, otherHazmatGeneral, and otherHazmatExplosive.
                // Make a search route request for a truck.
                GetRoute(20000, "truck", 3, 3, 10, document.getElementById("hazmat").value, '#2272B9', 9, 0, "truckkm", "truckh");

                // Make a search route request for a car.
                GetRoute(20000, "car", 2, 2, 5, null, '#B76DAB', 4, 1, "carkm", "carh");

                // Make a search route request for a bicycle.
                GetRoute(20000, "bicycle", 1, 2, 2, null, '#053305', 3, 2, "bicyclekm", "bicycleh");
            }
        </script>

  6. Ersätt strängen <YOUR AZURE MAPS PRIMARY KEY> med den primära nyckeln du sparade i en tidigare lektion. Du behöver inte göra några andra kodändringar.

  7. Ägna några minuter åt att läsa kommentarerna i JavaScript-avsnittet. Observera hur mycket av den teori vi pratat om i tidigare lektioner som märks i koden.

  8. Spara HTML-filen i mappen Dokument och ge den ett lämpligt namn – "Översiktsapp" eller något liknande.

Det är all kod som behövs. I nästa lektion testar vi den.