Oktatóanyag: Közeli érdekes pontok keresése az Azure Térképek használatával

Cikk
04/30/2024

Ez az oktatóanyag bemutatja, hogyan állíthat be egy fiókot az Azure Maps használatához, és hogyan használhatja a Maps API-kat egy hasznos hely kereséséhez. Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

Azure Maps-fiók létrehozása
A Térképek-fiók előfizetési kulcsának lekérése
Új weblap létrehozása a térképkezelési API használatával
A Maps keresőszolgáltatásának használata egy közeli hasznos hely kereséséhez

Előfeltételek

Ha még nincs Azure-előfizetése, kezdés előtt hozzon létre egy ingyenes fiókot.

Azure-Térképek-fiók
Előfizetési kulcs

Feljegyzés

Az Azure Térképek-hitelesítéssel kapcsolatos további információkért lásd az Azure Térképek hitelesítésének kezelését.

Új térkép létrehozása

A Map Control API egy kényelmes ügyfélkódtár. Ezzel az API-val egyszerűen integrálhatja a Térképek a webalkalmazásba. Elrejti a nem használt REST szolgáltatáshívások összetettségét, és testre szabható összetevőkkel növeli a termelékenységet. Az alábbi lépések bemutatják, hogyan hozhat létre egy statikus HTML-oldalt, amelybe be van ágyazva a térképkezelési API.

A helyi gépén hozzon létre egy új fájlt MapSearch.html néven.

Adja a következő HTML-összetevőket a fájlhoz:

 <!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éhány tudnivaló a fenti HTML-ről:

A HTML-fejléc tartalmazza az Azure Map Control-kódtár által üzemeltetett CSS- és JavaScript-erőforrásfájlokat.
Az onload oldal törzsében lévő esemény meghívja a GetMap függvényt, amikor az oldal törzse betöltődött.
A GetMap függvény tartalmazza az Azure Térképek API-k eléréséhez használt beágyazott JavaScript-kódot. A következő lépésben hozzá lesz adva.

Adja hozzá a következő JavaScript-kódot a HTML-fájl GetMap függvényéhez. Cserélje le a sztringet <Your Azure Maps Subscription Key> az Azure Térképek-fiókjából másolt előfizetési kulcsra.
```
//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éhány tudnivaló a fenti JavaScriptről:
- A függvény magjaGetMap, amely inicializálja a Map Control API-t az Azure Térképek-fiókkulcshoz.
- atlas az API-t és a kapcsolódó vizuális összetevőket tartalmazó névtér.
- atlas.Map vizuális és interaktív webes térkép vezérlését biztosítja.
Mentse a fájl módosításait, és nyissa meg a HTML-oldalt egy böngészőben. A megjelenített térkép a legalapvetőbb térkép, amelyet a fiókkulcs használatával atlas.Map hívhat meg.
A GetMap függvényben adja hozzá az alábbi JavaScript-kódot a térkép inicializálása után.
```
//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);
});
```
A kód ismertetése:
- A rendszer hozzáad egy ready eseményt a térképhez, amely aktiválódik, amikor a térkép erőforrásai betöltődnek, és a térkép készen áll a hozzáférésre.
- A térképes ready eseménykezelőben létrejön egy adatforrás az eredményadatok tárolásához.
- Létrejön egy szimbólumréteg, amelyet a rendszer az adatforráshoz csatol. Ez a réteg határozza meg, hogyan jelenjenek meg az adatforrás eredményadatai. Ebben az esetben az eredmény egy sötétkék kerek tű ikonnal jelenik meg, amely az eredménykoordináta fölé van igazítva, amely lehetővé teszi más ikonok átfedését.
- A rendszer hozzáadja az eredményréteget a leképezési rétegekhez.

Keresési képességek hozzáadása

Ez a szakasz bemutatja, hogyan kereshet érdekes pontot a térképen a Térképek Search API használatával. Ez az API egy fejlesztőknek szánt RESTful API, amely lehetővé teszi a címek, hasznos helyek és egyéb földrajzi adatok keresését. A Search szolgáltatás szélességi és hosszúsági koordinátákat rendel egy adott címhez.

Tipp.

Az Azure Térképek npm-modulokat kínál az Azure Térképek JavaScript REST SDK-hoz. Ezek a modulok olyan ügyfélkódtárakat tartalmaznak, amelyek leegyszerűsítik az Azure Térképek REST-szolgáltatások használatát Node.js alkalmazásokban. Az elérhető modulok teljes listáját a JavaScript/TypeScript REST SDK fejlesztői útmutatója (előzetes verzió) tartalmazza.

Keresési szolgáltatás

Adja hozzá a következő szkriptblokkot a térképes ready eseménykezelőben. Ez a keresési lekérdezés létrehozásához szükséges kód. A keresési szolgáltatás alapszintű keresési API-ját, a Fuzzy Search szolgáltatás használja. A fuzzy Search szolgáltatás kezeli a legtöbb homályos bemenetet, például a címeket, a helyeket és az érdekes pontokat (POI). Ez a kód megkeresi a közeli benzinkutakat a megadott szélesség és hosszúság megadott sugarán belül. Ezután a rendszer kinyer egy GeoJSON-funkciógyűjteményt, és hozzáadja az adatforráshoz, amely automatikusan megjeleníti az adatokat a térképek szimbólumrétegén. A szkriptblokk utolsó része a Térképkészlet Kamera tulajdonság használatával állítja be a térkép kameranézetét az eredmények határolókeretével.

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
    });
});

Mentse a MapSearch.html fájlt, és frissítse a böngészőt. Látnia kell a seattle-i térképet, gömbkék kitűzőkkel a környéken található benzinkutak helyéhez.
A térkép által renderelt nyers adatok megtekintéséhez írja be a böngészőbe a következő HTTPRequest kérést. A <Your Azure Maps Subscription Key> helyére írja be az előfizetési kulcsot.
```
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
```

Ezen a ponton a MapSearch lap meg tudja jeleníteni az intelligens keresési lekérdezés által visszaadott hasznos helyek helyét. Adjunk hozzá néhány interaktív képességet, valamint további információkat a helyekről.

Interaktív adatok hozzáadása

A létrehozott térkép ezen a ponton még csak a keresési eredmények hosszúsági/szélességi adatait vizsgálja. A Térképek Search szolgáltatás által visszaadott nyers JSON azonban további információkat tartalmaz az egyes benzinkútokról. Beleértve a nevet és a lakcímet. Ezeket az adatokat interaktív felugró ablakokkal beépítheti a térképbe.

Adja hozzá a következő kódsorokat a térképes ready eseménykezelőben a kód után a homályos keresési szolgáltatás lekérdezéséhez. Ez a kód létrehoz egy előugró példányt, és hozzáad egy egérmutató eseményt a szimbólumréteghez.
```
// 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);
```
Az API atlas.Popup egy információs ablakot biztosít a térképen a szükséges pozícióhoz rögzítve.

Adja hozzá a következő kódsorokat a térképes ready eseménykezelőben a kód után, hogy létrehozhasson egy előugró példányt, és hozzáadjon egy egérmutató eseményt a szimbólumréteghez. Ez a kód egy előugró ablakot jelenít meg, amely az eredményeket jeleníti meg, amikor egy érdekes pontra mutat.

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);
}

Mentse a fájlt, és frissítse a böngészőt. Most a böngésző térképe megjeleníti az előugró információkat, amikor a keresőtűk bármelyikére mutat.

Az oktatóanyagban használt befejezett kódért tekintse meg a GitHubon található keresési oktatóanyagot .
A minta élő megtekintéséhez tekintse meg az Azure Térképek Kódminták webhelyen található érdekes pontok keresését.

Következő lépések

A következő oktatóanyag bemutatja, hogyan lehet megjeleníteni egy útvonalat két hely között.

Útvonal egy adott úti célhoz