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

Artikel
04/07/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 Kartor-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 Kartor-konto
En prenumerationsnyckel

Kommentar

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

Skapa en ny karta

Map Control API är ett praktiskt klientbibliotek. Med det här API:et kan du enkelt integrera Kartor 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>

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

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 Kartor-API:er. 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 prenumerationsnyckeln som du kopierade från ditt Azure Kartor-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 ovanstående JavaScript:
- Kärnan i GetMap funktionen, som initierar MAP Control-API:et för din Azure Kartor-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 Kartor 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. Tjänstmodulen som beskrivs härnäst kan användas för att söka efter en plats med hjälp av api:et Kartor Search.

Kommentar

Tillbakadragning av Azure Kartor Web SDK-tjänstmodul

Azure Kartor Web SDK-tjänstmodulen är nu inaktuell och dras tillbaka den 26-09-30. För att undvika avbrott i tjänsten rekommenderar vi att du migrerar till Azure Kartor JavaScript REST SDK senast 26-09-30. Mer information finns i Utvecklarguide för JavaScript/TypeScript REST SDK (förhandsversion).

Tjänstmodul

I karthändelsehanteraren ready skapar du söktjänstens URL genom att lägga till följande JavaScript-kod omedelbart efter map.layers.add(resultLayer);:
```
//Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));

// Construct the SearchURL object
var searchURL = new atlas.service.SearchURL(pipeline); 
```
- Använd MapControlCredential för att dela autentisering mellan en kartkontroll och tjänstmodulen när du skapar ett nytt pipelineobjekt .
- SearchURL representerar en URL till Azure Kartor MapControlCredential.
Lägg sedan till följande skriptblock precis under den tidigare koden som just lagts till 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 från svaret extraheras sedan med hjälp av geojson.getFeatures() metoden 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 egenskapen Map Kamera.
```
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,
    view: 'Auto'
}).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<Your Azure Maps Subscription Key> show the results
    map.setCamera({
        bounds: data.bbox,
        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

Karta som har vi gjort tittar hittills bara på longitud-/latituddata för sökresultaten. Den råa 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 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.
Om du vill visa det här exemplet live läser du Sök efter intressanta platser på webbplatsen Azure Kartor Code Samples.

Nästa steg

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

Dirigera mot ett mål