Kurz: Hledání blízkých bodů zájmu pomocí Azure Mapy

Článek
04/30/2024

V tomto kurzu se dozvíte, jak nastavit účet s Azure Maps a pak pomocí rozhraní Maps API vyhledat bod zájmu. V tomto kurzu se naučíte:

Vytvoření účtu Azure Maps
Načtení klíče předplatného pro váš účet Mapy
Vytvoření nové webové stránky s použitím rozhraní API pro mapové ovládací prvky
Vyhledání okolního bodu zájmu pomocí vyhledávací služby Maps

Požadavky

Pokud ještě nemáte předplatné Azure, vytvořte si napřed bezplatný účet.

Účet Azure Mapy
Klíč předplatného

Poznámka:

Další informace o ověřování v Azure Mapy najdete v tématu správa ověřování v Azure Mapy.

Vytvoření nové mapy

Rozhraní API pro mapové řízení je pohodlná klientská knihovna. Toto rozhraní API umožňuje snadno integrovat Mapy do webové aplikace. Skryje složitost holých volání služby REST a zvyšuje produktivitu díky přizpůsobitelným komponentám. Následující kroky ukazují, jak vytvořit statickou stránku HTML s vloženým rozhraním API pro mapové ovládací prvky.

Na místním počítači vytvořte nový soubor s názvem MapSearch.html.

Přidejte do souboru následující součásti HTML:

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

Co je potřeba vědět o výše uvedeném kódu HTML:

Hlavička HTML obsahuje soubory prostředků CSS a JavaScriptu hostované knihovnou ovládacích prvků map Azure.
Událost onload v těle stránky volá GetMap funkci při načtení textu stránky.
Funkce GetMap obsahuje vložený javascriptový kód použitý pro přístup k rozhraním API azure Mapy. Přidá se v dalším kroku.

Do funkce GetMap v souboru HTML přidejte následující kód JavaScriptu. Nahraďte řetězec <Your Azure Maps Subscription Key> klíčem předplatného, který jste zkopírovali ze svého účtu Azure Mapy.
```
//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>'
    }
});
```
Co je potřeba vědět o výše uvedeném JavaScriptu:
- Jádrem GetMap funkce, která inicializuje rozhraní API mapového řízení pro klíč účtu Azure Mapy.
- atlas je obor názvů, který obsahuje rozhraní API a související vizuální komponenty.
- atlas.Map poskytuje ovládací prvek pro vizuální a interaktivní webovou mapu.
Uložte provedené změny do souboru a otevřete stránku HTML v prohlížeči. Zobrazená mapa je nejzásadnější mapa, kterou můžete provést voláním atlas.Map pomocí klíče účtu.
Do funkce GetMap za inicializaci mapy přidejte následující kód JavaScriptu.
```
//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);
});
```
O tomto kódu:
- Do ready mapy se přidá událost, která se aktivuje, když se prostředky mapy dokončí načítání a mapa je připravená k přístupu.
- V obslužné rutině události mapy ready se vytvoří zdroj dat pro ukládání výsledných dat.
- Vytvoří se vrstva symbolů, která se připojí ke zdroji dat. Tato vrstva určuje, jak se mají vykreslit výsledná data ve zdroji dat. V tomto případě se výsledek vykreslí tmavě modrou ikonou kolíku uprostřed nad souřadnicí výsledků, která umožňuje překrývání dalších ikon.
- Výsledná vrstva se přidá do vrstev mapy.

Přidání možností vyhledávání

V této části se dozvíte, jak pomocí rozhraní API pro vyhledávání Mapy najít na mapě bod zájmu. Jedná se o rozhraní RESTful API navržené pro vývojáře, kterým umožňuje hledat adresy, body zájmu a další geografické informace. Služba Search přiřazuje k zadané adrese informace o zeměpisné délce a šířce.

Tip

Azure Mapy nabízí sadu modulů npm pro sadu azure Mapy JavaScript REST SDK. Mezi tyto moduly patří klientské knihovny, které zjednodušují používání služeb AZURE Mapy REST v aplikacích Node.js. Úplný seznam dostupných modulů najdete v průvodci vývojáři v sadě JavaScript/TypeScript REST SDK (Preview).

Služba Search

Do obslužné rutiny události mapování ready přidejte následující blok skriptu. Toto je kód pro sestavení vyhledávacího dotazu. Používá fuzzy Search, základní vyhledávací rozhraní API vyhledávací služby. Přibližné Search zpracovává většinu přibližných vstupů, jako jsou adresy, místa a body zájmu (POI). Tento kód vyhledá nejbližší čerpací stanice v zadaném poloměru zadané zeměpisné šířky a délky. Kolekce funkcí GeoJSON se pak extrahuje a přidá do zdroje dat, což automaticky vede k vykreslení dat na vrstvě symbolů map. Poslední část tohoto bloku skriptu nastaví zobrazení kamery mapy pomocí ohraničujícího rámečku výsledků pomocí vlastnosti Mapa sady Kamera.

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

Uložte soubor MapSearch.html a aktualizujte prohlížeč. Měla by se zobrazit mapa uprostřed Seattlu s kulatými modrými špendlíky pro umístění čerpacích stanic v okolí.
Můžete zobrazit nezpracovaná data, která mapa vykresluje, zadáním následujícího požadavku HTTP v prohlížeči. Místo <Your Azure Maps Subscription Key> použijte váš klíč předplatného.
```
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
```

V tomto okamžiku může stránka MapSearch zobrazit umístění bodů zájmu, které se vrátí z dotazu na vyhledání přibližných shod. Teď přidáme několik interaktivních funkcí a další informace o umístěních.

Přidání interaktivních dat

Mapa, kterou jsme vytvořili, zatím z výsledků hledání používá pouze data o zeměpisné šířce a délce. Nezpracovaný kód JSON, který Mapy Search vrátí, ale obsahuje další informace o každé čerpací stanici. Včetně jména a adresy ulice. Tato data můžete zahrnout do mapy s použitím interaktivních, automaticky otevíraných oken.

Přidejte následující řádky kódu do obslužné rutiny události mapování ready za kód pro dotazování přibližné vyhledávací služby. Tento kód vytvoří instanci překryvného okna a přidá událost myši do vrstvy symbolů.
```
// 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);
```
Rozhraní API atlas.Popup poskytuje informační okno ukotvené na požadované pozici na mapě.

Přidejte následující řádky kódu do obslužné rutiny události mapy ready za kód pro vytvoření instance místní nabídky a přidání události myši do vrstvy symbolů. Tento kód zobrazí automaticky otevírané okno s výsledky, když najedete myší na bod zájmu.

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

Uložte soubor a aktualizujte prohlížeč. Když teď najedete myší na některý z špendlíků hledání, zobrazí se v prohlížeči automaticky otevírané okno s informacemi.

Dokončený kód použitý v tomto kurzu najdete ve vyhledávacím kurzu na GitHubu.
Pokud si chcete tuto ukázku prohlédnout živě, podívejte se na téma Hledání bodů zájmu na webu s ukázkami kódu Azure Mapy.

Další kroky

V dalším kurzu se dozvíte, jak zobrazit trasu mezi dvěma umístěními.

Trasa do cíle

Sdílet prostřednictvím