Självstudie: Söka efter intressanta platser i närheten med Hjälp av Azure Maps

Artikel
12/04/2024

Den här självstudiekursen visar hur du skapar ett konto med Azure Maps och sedan använder API:er för Maps för att söka efter en orienteringspunkt. I den här självstudien lär du dig att:

Skapa ett Azure Maps-konto
Hämta prenumerationsnyckeln för ditt Maps-konto
Skapa en ny webbsida med API:n för kartkontroll
Använda Maps-söktjänsten för att hitta orienteringspunkter i närheten

Förutsättningar

Om du inte har någon Azure-prenumeration skapar du ett kostnadsfritt konto innan du börjar.

Ett Azure Maps-konto
En prenumerationsnyckel

Kommentar

Mer information om autentisering i Azure Maps finns i Hantera autentisering i Azure Maps.

Skapa en ny karta

Map Control API är ett praktiskt klientbibliotek. Med det här API:et kan du enkelt integrera Maps i webbappen. Det döljer komplexiteten i de tomma REST-tjänstanropen och ökar produktiviteten med anpassningsbara komponenter. Följande steg visar hur du skapar en statisk HTML-sida inbäddad med API:et Kartkontroll.

Skapa en ny fil på den lokala datorn och ge den namnet MapSearch.html.

Lägg till följande HTML-komponenter i filen:

 <!DOCTYPE html>
 <html>
 <head>
     <title>Map Search</title>
     <meta charset="utf-8" />

     <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
     <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
     <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

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

Några saker att veta om html-koden ovan:

HTML-huvudet innehåller CSS- och JavaScript-resursfiler som hanteras av Azure Map Control-biblioteket.
Händelsen onload i sidtexten anropar GetMap funktionen när sidans brödtext har lästs in.
Funktionen GetMap innehåller den infogade JavaScript-koden som används för att komma åt Azure Maps-API:erna. Det läggs till i nästa steg.

Lägg till följande JavaScript-kod i HTML-filens GetMap-funktion. Ersätt strängen <Your Azure Maps Subscription Key> med den prenumerationsnyckel som du kopierade från ditt Azure Maps-konto.
```
//Instantiate a map object
var map = new atlas.Map("myMap", {
    view: 'Auto',

    // Add your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Subscription Key>'
    }
});
```
Några saker att veta om detta JavaScript:
- Kärnan i GetMap funktionen, som initierar MAP Control-API:et för din Azure Maps-kontonyckel.
- atlas är namnområdet som innehåller API:et och relaterade visuella komponenter.
- atlas.Map tillhandahåller kontrollen för en visuell och interaktiv webbkarta.
Spara dina ändringar i filen och öppna HTML-sidan i en webbläsare. Kartan som visas är den mest grundläggande kartan som du kan göra genom att anropa atlas.Map med hjälp av din kontonyckel.
I funktionen GetMap, när du har initierat kartan, lägger du till följande JavaScript-kod.
```
//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 point data.
    var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            image: 'pin-round-darkblue',
            anchor: 'center',
            allowOverlap: true
        },
        textOptions: {
            anchor: "top"
        }
    });

    map.layers.add(resultLayer);
});
```
Om den här koden:
- En ready händelse läggs till på kartan, vilket utlöses när kartresurserna har lästs in och kartan är redo att nås.
- I karthändelsehanteraren ready skapas en datakälla för att lagra resultatdata.
- Ett symbollager skapas och ansluts till datakällan. Det här lagret anger hur resultatdata i datakällan ska återges. I det här fallet renderas resultatet med en mörkblå fästikon, centrerad över resultatkoordinaten som gör att andra ikoner kan överlappa varandra.
- Resultatskiktet läggs till i kartskikten.

Lägga till sökfunktioner

Det här avsnittet visar hur du använder API:et för Maps Search för att hitta en intressant plats på kartan. Det är ett RESTful-API för utvecklare för att söka efter adresser, orienteringspunkter och annan geografisk information. Search Service tilldelar en angiven adress latitud- och longitudinformation.

Dricks

Azure Maps erbjuder en uppsättning npm-moduler för Azure Maps JavaScript REST SDK. Dessa moduler omfattar klientbibliotek som förenklar användningen av Azure Maps REST-tjänster i Node.js program. En fullständig lista över tillgängliga moduler finns i JavaScript/TypeScript REST SDK Developers Guide (förhandsversion).

Söktjänst

Lägg till följande skriptblock i mappningshändelsehanteraren ready . Det här är koden för att skapa sökfrågan. Den använder Fuzzy tjänsten Search, ett grundläggande sök-API för söktjänsten. Fuzzy tjänsten Search hanterar de flesta fuzzy-indata som adresser, platser och intressanta platser (POI). Den här koden söker efter närliggande bensinstationer inom den angivna radien för den angivna latitud och longitud. En GeoJSON-funktionssamling extraheras sedan och läggs till i datakällan, vilket automatiskt resulterar i att data återges på kartsymbollagret. Den sista delen av det här skriptblocket anger mappningskameravyn med hjälp av avgränsningsrutan för resultaten med hjälp av map-egenskapen setCamera .

var query = 'gasoline-station';
var radius = 9000;
var lat = 47.64452336193245;
var lon = -122.13687658309935;
var url = `https://atlas.microsoft.com/search/poi/json?api-version=1.0&query=${query}&lat=${lat}&lon=${lon}&radius=${radius}`;

fetch(url, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var bounds = [];

    //Extract GeoJSON feature collection from the response and add it to the datasource
    var data = response.results.map((result) => {
        var position = [result.position.lon, result.position.lat];
        bounds.push(position);
        return new atlas.data.Feature(new atlas.data.Point(position), { ...result });
    });
    datasource.add(data);

    //Set camera to bounds to show the results
    map.setCamera({
        bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
        zoom: 10,
        padding: 15
    });
});

Spara filen MapSearch.html och uppdatera webbläsaren. Du bör se kartan centrerad på Seattle med runda blå stift för platser för bensinstationer i området.

Du kan visa rådata som kartan återger genom att ange följande HTTP-förfrågan i webbläsaren. Ersätt <Your Azure Maps Subscription Key> med din prenumerationsnyckel.

https://atlas.microsoft.com/search/poi/json?api-version=1.0&query=gasoline%20station&subscription-key={Your-Azure-Maps-Subscription-key}&lat=47.6292&lon=-122.2337&radius=100000

I det här läget kan MapSearch-sidan visa orienteringspunkterna som returneras från en fuzzy-sökfråga. Lägg till vissa interaktiva funktioner och mer information om platser.

Lägga till interaktiva data

Kartan hittills tittar bara på longitud-/latituddata för sökresultaten. Den råa JSON som Maps tjänsten Search returnerar innehåller dock ytterligare information om varje bensinstation. Inklusive namn och gatuadress. Du kan införliva dessa data i kartan med interaktiva popup-rutor.

Lägg till följande kodrader i mappningshändelsehanteraren ready efter koden för att fråga fuzzy-söktjänsten. Den här koden skapar en instans av ett popup-fönster och lägger till en mouseover-händelse i symbollagret.
```
// Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup();

//Add a mouse over event to the result layer and display a popup when this event fires.
map.events.add('mouseover', resultLayer, showPopup);
```
API: atlas.Popup et tillhandahåller ett informationsfönster som är förankrat vid den position som krävs på kartan.

Lägg till följande kodrader i karthändelsehanteraren ready efter koden för att skapa en instans av ett popup-fönster och lägga till en mouseover-händelse i symbollagret. Den här koden visar ett popup-fönster med resultatet när du muspekaren över en intressepunkt.

function showPopup(e) {
    //Get the properties and coordinates of the first shape that the event occurred on.

    var p = e.shapes[0].getProperties();
    var position = e.shapes[0].getCoordinates();

    //Create HTML from properties of the selected result.
    var html = `
      <div style="padding:5px">
        <div><b>${p.poi.name}</b></div>
        <div>${p.address.freeformAddress}</div>
        <div>${position[1]}, ${position[0]}</div>
      </div>`;

    //Update the content and position of the popup.
    popup.setPopupOptions({
        content: html,
        position: position
    });

    //Open the popup.
    popup.open(map);
}

Spara filen och uppdatera webbläsaren. Nu visar kartan i webbläsaren informations-popup-fönster när du hovrar över någon av sökstiften.

Den färdiga koden som används i den här självstudien finns i sökguiden på GitHub.
Information om hur du visar det här exemplet live finns i Söka efter intressanta platser på azure Maps Code Samples-webbplatsen .

Nästa steg

Nästa självstudie demonstrerar hur du visar en väg mellan två platser.

Dirigera mot ett mål

Dela via