Samouczek: wyszukiwanie pobliskich punktów orientacyjnych przy użyciu usługi Azure Mapy

Artykuł
04/07/2024

W tym samouczku przedstawiono konfigurowanie konta przy użyciu usługi Azure Maps, a następnie wyszukiwanie punktu orientacyjnego za pomocą interfejsów API usługi Maps. Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Tworzenie konta usługi Azure Maps
Pobieranie klucza subskrypcji dla konta Mapy
Tworzenie nowej strony internetowej przy użyciu interfejsu API kontrolki mapy
Wyszukiwanie pobliskiego punktu orientacyjnego przy użyciu usługi wyszukiwania Maps

Wymagania wstępne

Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.

Uwaga

Aby uzyskać więcej informacji na temat uwierzytelniania w usłudze Azure Mapy, zobacz Zarządzanie uwierzytelnianiem w usłudze Azure Mapy.

Tworzenie nowej mapy

Interfejs API kontrolki mapy jest wygodną biblioteką klienta. Ten interfejs API umożliwia łatwą integrację Mapy z aplikacją internetową. Ukrywa złożoność nagich wywołań usługi REST i zwiększa produktywność dzięki dostosowywalnym składnikom. Poniższe kroki pokazują, jak utworzyć statyczną stronę HTML osadzoną przy użyciu interfejsu API kontrolki mapy.

Na maszynie lokalnej utwórz nowy plik i nadaj mu nazwę MapSearch.html.

Dodaj następujące składniki HTML do pliku:

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

Niektóre informacje dotyczące powyższego kodu HTML:

Nagłówek HTML zawiera pliki zasobów CSS i JavaScript, które są hostowane przez bibliotekę kontrolki mapy platformy Azure.
Zdarzenie onload w treści strony wywołuje GetMap funkcję, gdy treść strony została załadowana.
Funkcja GetMap zawiera wbudowany kod JavaScript używany do uzyskiwania dostępu do interfejsów API usługi Azure Mapy. Zostanie on dodany w następnym kroku.

Dodaj następujący kod JavaScript do funkcji GetMap w pliku HTML. Zastąp ciąg <Your Azure Maps Subscription Key> kluczem subskrypcji skopiowanymi z konta usługi 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>'
    }
});
```
Niektóre informacje dotyczące powyższego kodu JavaScript:
- Rdzeniem funkcji, która inicjuje GetMap interfejs API kontrolki mapy dla klucza konta usługi Azure Mapy.
- atlas to przestrzeń nazw zawierająca interfejs API i powiązane składniki wizualne.
- atlas.Map udostępnia kontrolkę wizualizacji i interaktywnej mapy internetowej.
Zapisz zmiany w pliku i otwórz stronę HTML w przeglądarce. Wyświetlona mapa jest najbardziej podstawową mapą, którą można wykonać, wywołując atlas.Map przy użyciu klucza konta.
W funkcji GetMap po zainicjowaniu mapy dodaj następujący kod JavaScript.
```
//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);
});
```
Informacje o tym kodzie:
- Do ready mapy jest dodawane zdarzenie, które jest uruchamiane po zakończeniu ładowania zasobów mapy, a mapa jest gotowa do uzyskania dostępu.
- W procedurze obsługi zdarzeń mapy ready jest tworzone źródło danych w celu przechowywania danych wynikowych.
- Tworzona jest warstwa symboli, która jest następnie dołączana do źródła danych. Ta warstwa określa sposób renderowania danych wynikowych w źródle danych. W takim przypadku wynik jest renderowany z ciemnoniebieską ikoną okrągłego pinezki, wyśrodkowaną nad współrzędną wyników, która umożliwia nakładanie się innych ikon.
- Warstwa wyników jest dodawana do warstw mapy.

Dodawanie funkcji wyszukiwania

W tej sekcji pokazano, jak za pomocą interfejsu API wyszukiwania Mapy znaleźć punkt orientacyjny na mapie. Jest to interfejs API RESTful umożliwiający deweloperom wyszukiwanie adresów, punktów orientacyjnych i innych informacji geograficznych. Usługa Search Service przypisuje informacje o długości i szerokości geograficznej do określonego adresu. Opisany dalej moduł usługi może służyć do wyszukiwania lokalizacji przy użyciu interfejsu API wyszukiwania Mapy.

Uwaga

Wycofanie modułu usługi azure Mapy Web SDK

Moduł usługi azure Mapy Web SDK jest teraz przestarzały i zostanie wycofany w dniu 30.09.26. Aby uniknąć przerw w działaniu usługi, zalecamy migrację do zestawu SDK REST języka JavaScript platformy Azure Mapy do 30.09.26. Aby uzyskać więcej informacji, zobacz JavaScript/TypeScript REST SDK Developers Guide (wersja zapoznawcza).

Moduł usługi

W procedurze obsługi zdarzeń mapy ready skonstruuj adres URL usługi wyszukiwania, dodając następujący kod JavaScript bezpośrednio po :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); 
```
- Użyj kontrolki MapControlCredential , aby współużytkować uwierzytelnianie między kontrolką mapy a modułem usługi podczas tworzenia nowego obiektu potoku .
- Element searchURL reprezentuje adres URL usługi Azure Mapy MapControlCredential.
Następnie dodaj następujący blok skryptu tuż poniżej poprzedniego kodu dodanego właśnie w procedurze obsługi zdarzeń mapy ready . Jest to kod do skompilowania zapytania wyszukiwania. Używa on usługa wyszukiwania rozmytego, podstawowego interfejsu API wyszukiwania usługi wyszukiwania. Rozmyte usługa wyszukiwania obsługuje większość rozmytych danych wejściowych, takich jak adresy, miejsca i punkty orientacyjne (POI). Ten kod wyszukuje pobliskie stacje benzynowe w określonym promieniu podanej szerokości i długości geograficznej. Kolekcja funkcji GeoJSON z odpowiedzi jest następnie wyodrębniona przy użyciu geojson.getFeatures() metody i dodawana do źródła danych, co powoduje automatyczne renderowanie danych w warstwie symboli map. Ostatnia część tego bloku skryptu ustawia widok aparatu mapy przy użyciu pola ograniczenia wyników przy użyciu właściwości mapowania Aparat.
```
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
    });
});
```
Zapisz plik MapSearch.html i odśwież przeglądarkę. Powinna zostać wyświetlona mapa wyśrodkowana w Seattle z okrągłymi niebieskimi szpilkami dla lokalizacji stacji benzynowych w okolicy.
Wprowadzenie następującego żądania HTTP w przeglądarce spowoduje wyświetlenie danych pierwotnych renderowanych przez mapę. Zastąp element <Your Azure Maps Subscription Key> kluczem subskrypcji.
```
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
```

Na stronie MapSearch można teraz wyświetlić lokalizacje punktów orientacyjnych, zwracanych przez zapytanie wyszukiwania rozmytego. Do lokalizacji dodamy informacje oraz interaktywne funkcje.

Dodawanie interaktywnych danych

W wynikach wyszukiwania na utworzonej mapie są używane tylko dane o długości i szerokości geograficznej. Jednak nieprzetworzone dane JSON zwracane przez Mapy usługa wyszukiwania zawierają dodatkowe informacje o każdej stacji benzynowej. Uwzględnianie nazwy i adresu ulicznego. Dane te można zintegrować z mapą za pomocą interaktywnych wyskakujących okienek.

Dodaj następujące wiersze kodu w procedurze obsługi zdarzeń mapy ready po kodzie, aby wysłać zapytanie do usługi wyszukiwania rozmytego. Ten kod tworzy wystąpienie okna podręcznego i dodaje zdarzenie myszy do warstwy symboli.
```
// 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);
```
Interfejs API atlas.Popup udostępnia okno informacji zakotwiczone na wymaganej pozycji na mapie.

Dodaj następujące wiersze kodu w procedurze obsługi zdarzeń mapy ready po kodzie, aby utworzyć wystąpienie okna podręcznego i dodać zdarzenie myszy do warstwy symboli. Ten kod wyświetla okno podręczne z wynikami po kliknięciu wskaźnika orientacyjnego.

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

Zapisz plik i odśwież przeglądarkę. Teraz mapa w przeglądarce wyświetla wyskakujące okienka informacyjne po umieszczeniu wskaźnika myszy na dowolnym numerze PIN wyszukiwania.

Aby zapoznać się z ukończonym kodem używanym w tym samouczku, zobacz samouczek wyszukiwania w witrynie GitHub.
Aby wyświetlić ten przykład na żywo, zobacz Wyszukiwanie punktów orientacyjnych w witrynie Przykłady kodu usługi Azure Mapy.

Następne kroki

Następny samouczek przedstawia sposób wyświetlenia trasy między dwiema lokalizacjami.

Trasa do miejsca docelowego