Självstudie: Söka efter platser av intresse i närheten med hjälp av Azure Kartor

Artikel
11/04/2021
6 minuter för att läsa

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 guiden får du lära dig att:

Skapa ett Azure Maps-konto
Hämta primärnyckeln 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

Logga in på Azure-portalen. Om du inte har någon Azure-prenumeration kan du skapa ett kostnadsfritt konto innan du börjar.
Skapa ett Azure Kartor konto
Skaffa en primär prenumerationsnyckel, som även kallas primärnyckel eller prenumerationsnyckel. Mer information om autentisering i Azure Kartor finns i Hantera autentisering i Azure Kartor.

Skapa en ny karta

Api:Kartkontroll är ett praktiskt klientbibliotek. Med det här API:et kan du enkelt Kartor i din webbapp. Det döljer komplexiteten i de bare 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">
     <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>
     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>

Observera att HTML-huvudet innehåller CSS- och JavaScriptresursfiler som med Azure Kartkontroll-biblioteket som värd. Observera onload-händelsen i innehållet på sidan, som anropar funktionen GetMap när sidans innehåll har lästs in. Funktionen GetMap innehåller den infogade JavaScript-koden för att komma åt Azure Kartor-API:er.

Lägg till följande JavaScript-kod i HTML-filens GetMap-funktion. Ersätt strängen <Your Azure Maps Key> med den primärnyckel som du kopierade från ditt Kartor konto.
```
//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>'
    }
});
```
Det här segmentet initierar API:et Kartkontroll för din Azure Maps-kontonyckel. atlas är det namnområde som innehåller API:et och relaterade visuella komponenter. atlas.Map ger kontroll över 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 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);
});
```
I det här kodsegmentet läggs en händelse till på kartan, som kommer att skjutas upp när kartresurserna har lästs in och kartan ready är redo att nås. I händelsehanteraren ready map 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å, runda stiftikon, centrerad över resultatkoordinaten och tillåter att andra ikoner överlappar varandra. Resultatskiktet läggs till i kartskikten.

Lägga till sökfunktioner

Det här avsnittet visar hur du använder KARTOR Search-API:et för att hitta en punkt av intresse 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. Tjänstemodulen som beskrivs nedan kan användas till att söka efter en plats med hjälp av API:et för kartsökning.

Tjänstmodul

I händelsehanteraren ready för kartan skapar du söktjänstens URL genom att lägga till följande JavaScript-kod.
```
// 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 SearchURL object
var searchURL = new atlas.service.SearchURL(pipeline); 
```
skapar SubscriptionKeyCredential en för att autentisera SubscriptionKeyCredentialPolicy HTTP-begäranden till Azure Kartor med prenumerationsnyckeln. atlas.service.MapsURL.newPipeline()tar i principen och skapar en SubscriptionKeyCredential Pipeline-instans. representerar searchURL en URL till Azure Kartor Search-åtgärder.
Lägg därefter till följande skriptblock för att skapa sökfrågan. Den använder det enkla söknings-API:et i Search Service, som kallas Fuzzy Search. Fuzzy Search-tjänsten hanterar de flesta fuzzy-indata som adresser, platser och platser av intresse (POI). Den här koden söker efter närliggande bensinstationer inom den angivna radien för angiven latitud och longitud. En GeoJSON-funktionssamling från svaret extraheras sedan med hjälp av metoden och läggs till i datakällan, vilket automatiskt resulterar i geojson.getFeatures() att data återges på kartan via symbollagret. Den sista delen av skriptet ställer in kameravyn med hjälp av avgränsningsrektangeln för resultat med kartans setCamera-egenskap.
```
var query =  'gasoline-station';
var radius = 9000;
var lat = 47.64452336193245;
var lon = -122.13687658309935;

searchURL.searchPOI(atlas.service.Aborter.timeout(10000), query, {
    limit: 10,
    lat: lat,
    lon: lon,
    radius: radius
}).then((results) => {

    // Extract GeoJSON feature collection from the response and add it to the datasource
    var data = results.geojson.getFeatures();
    datasource.add(data);

    // set camera to bounds to show the results
    map.setCamera({
        bounds: data.bbox,
        zoom: 10
    });
});
```
Spara filen MapSearch.html och uppdatera webbläsaren. Du bör se kartan centrerad i 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 Key> med din primärnyckel.

https://atlas.microsoft.com/search/poi/json?api-version=1.0&query=gasoline%20station&subscription-key={Your-Azure-Maps-Primary-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

Karta som har vi gjort tittar hittills bara på longitud-/latituddata för sökresultaten. Rådata-JSON som Kartor 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 händelsehanteraren map 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 mushändelse till 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);
```
*atlas.PopupAPI:et innehåller ett informationsfönster som är fäst vid den position som krävs på kartan.

Lägg till följande kod i GetMap funktionen för att visa informationen om resultatet i popup-rutan.

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 popup-fönster med information när du hovrar över någon av sökstiften.

Om du vill visa den fullständiga koden för den här självstudien klickar du här. Om du vill visa live-exemplet klickar du här

Rensa resurser

Det finns inga resurser som kräver rensning.

Nästa steg

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

Dirigera mot ett mål