Arama sonuçlarını haritada gösterme

Makale
10/18/2023

Bu makalede, ilgilendiğiniz konumu nasıl arayabileceğiniz ve arama sonuçlarını haritada nasıl gösterdiğiniz gösterilir.

İlgi çekici bir konum aramanın iki yolu vardır. Bunun bir yolu, arama isteğinde bulunmak için TypeScript REST SDK'sını @azure-rest/maps-search kullanmaktır. Diğer yol, Getirme API'sini kullanarak Benzer arama API'sini Azure Haritalar için bir arama isteğinde bulunmaktır. Her iki yaklaşım da bu makalede açıklanmıştır.

REST SDK aracılığıyla arama isteğinde bulunma

import * as atlas from "azure-maps-control";
import MapsSearch from "@azure-rest/maps-search";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Use Azure Active Directory authentication.
      authType: "aad",
      clientId: "<Your Azure Maps Client Id>",
      aadAppId: "<Your Azure Active Directory Client Id>",
      aadTenant: "<Your Azure Active Directory Tenant Id>"
    }
  });

  map.events.add("load", async () => {
    // Use the access token from the map and create an object that implements the TokenCredential interface.
    const credential = {
      getToken: () => {
        return {
          token: map.authentication.getToken()
        };
      }
    };

    // Create a Search client.
    const client = MapsSearch(credential, "<Your Azure Maps Client Id>");

    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Add a layer for rendering point data.
    const resultLayer = new atlas.layer.SymbolLayer(datasource);
    map.layers.add(resultLayer);

    // Search for gas stations near Seattle.
    const response = await client.path("/search/fuzzy/{format}", "json").get({
      queryParameters: {
        query: "gasoline station",
        lat: 47.6101,
        lon: -122.34255
      }
    });

    // Arrays to store bounds for results.
    const bounds = [];

    // Convert the response into Feature and add it to the data source.
    const searchPins = response.body.results.map((result) => {
      const position = [result.position.lon, result.position.lat];
      bounds.push(position);
      return new atlas.data.Feature(new atlas.data.Point(position), {
        position: result.position.lat + ", " + result.position.lon
      });
    });

     // Add the pins to the data source.
    datasource.add(searchPins);

    // Set the camera to the bounds of the pins
    map.setCamera({
      bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
      padding: 40
    });
  });
};

document.body.onload = onload;

Önceki kod örneğinde, ilk blok bir eşleme nesnesi oluşturur ve kimlik doğrulama mekanizmasını Microsoft Entra Id kullanacak şekilde ayarlar. Daha fazla bilgi için bkz . Harita oluşturma.

İkinci kod bloğu, erişim belirteci ile Azure Haritalar http isteklerinin kimliğini doğrulamak için TokenCredential arabirimini uygulayan bir nesne oluşturur. Ardından kimlik bilgisi nesnesini Haritalar Search'e geçirir ve istemcinin bir örneğini oluşturur.

Üçüncü kod bloğu, DataSource sınıfını kullanarak bir veri kaynağı nesnesi oluşturur ve buna arama sonuçları ekler. Sembol katmanı, DataSource'ta kaydırılan nokta tabanlı verileri haritada semboller olarak işlemek için metin veya simgeler kullanır. Ardından bir sembol katmanı oluşturulur. Veri kaynağı simge katmanına eklenir ve ardından haritaya eklenir.

Dördüncü kod bloğu, Haritalar Search istemcisinde bir GET isteğinde bulunur. İlgi çekici noktayı aramak için Arama Benzerini Al rest API'sini kullanarak ücretsiz form metin araması yapmanıza olanak tanır. Arama Benzeri API'sine istek alma, belirsiz girişlerin herhangi bir bileşimini işleyebilir. Yanıt daha sonra Özellik nesnelerine dönüştürülür ve veri kaynağına eklenir ve bu da verilerin sembol katmanı aracılığıyla haritada işlenmesine neden olur.

Son kod bloğu, Harita'nın set Kamera özelliğini kullanarak haritanın kamera sınırlarını ayarlar.

Arama isteği, veri kaynağı, sembol katmanı ve kamera sınırları haritanın olay dinleyicisinin içindedir. Harita tamamen yüklendikten sonra sonuçların görüntülendiğinden emin olmak istiyoruz.

Fetch API aracılığıyla arama isteğinde bulunma

import * as atlas from "azure-maps-control";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Use Azure Active Directory authentication.
      authType: "aad",
      clientId: "<Your Azure Maps Client Id>",
      aadAppId: "<Your Azure Active Directory Client Id>",
      aadTenant: "<Your Azure Active Directory Tenant Id>"
    }
  });

  map.events.add("load", () => {
    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Add a layer for rendering point data.
    const resultLayer = new atlas.layer.SymbolLayer(datasource);
    map.layers.add(resultLayer);

    // Send a request to Azure Maps search API
    let url = "https://atlas.microsoft.com/search/fuzzy/json?";
    url += "&api-version=1";
    url += "&query=gasoline%20station";
    url += "&lat=47.6101";
    url += "&lon=-122.34255";
    url += "&radius=100000";

    // Parse the API response and create a pin on the map for each result
    fetch(url, {
      headers: {
        Authorization: "Bearer " + map.authentication.getToken(),
        "x-ms-client-id": "<Your Azure Maps Client Id>"
      }
    })
      .then((response) => response.json())
      .then((response) => {
        // Arrays to store bounds for results.
        const bounds = [];

        // Convert the response into Feature and add it to the data source.
        const searchPins = response.results.map((result) => {
          const position = [result.position.lon, result.position.lat];
          bounds.push(position);
          return new atlas.data.Feature(new atlas.data.Point(position), {
            position: result.position.lat + ", " + result.position.lon
          });
        });

        // Add the pins to the data source.
        datasource.add(searchPins);

        // Set the camera to the bounds of the pins
        map.setCamera({
          bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
          padding: 40
        });
      });
  });
};

document.body.onload = onload;

Önceki kod örneğinde, ilk kod bloğu bir eşleme nesnesi oluşturur. Kimlik doğrulama mekanizmasını Microsoft Entra Id kullanacak şekilde ayarlar. Daha fazla bilgi için bkz . Harita oluşturma.

İkinci kod bloğu, DataSource sınıfını kullanarak bir veri kaynağı nesnesi oluşturur ve buna arama sonuçları ekler. Sembol katmanı, DataSource'ta kaydırılan nokta tabanlı verileri haritada semboller olarak işlemek için metin veya simgeler kullanır. Ardından bir sembol katmanı oluşturulur. Veri kaynağı simge katmanına eklenir ve ardından haritaya eklenir.

Üçüncü kod bloğu, arama isteğinde bulunmak için bir URL oluşturur.

Dördüncü kod bloğu Fetch API'sini kullanır. Getirme API'si, ilgi çekici noktaları aramak için Benzer arama API'sini Azure Haritalar bir istekte bulunmak için kullanılır. Benzer Arama API'si, belirsiz girişlerin herhangi bir bileşimini işleyebilir. Ardından arama yanıtını işler ve ayrıştırarak sonuç pinlerini searchPins dizisine ekler.

Son kod bloğu bir BoundingBox nesnesi oluşturur. Sonuç dizisini kullanır ve ardından Harita'nın kümesini kullanarak haritanın kamera sınırlarını ayarlar Kamera. Ardından sonuç raptiyelerini işler.

Arama isteği, veri kaynağı, sembol katmanı ve kamera sınırları haritanın olay dinleyicisi içinde ayarlanır ve harita tamamen yüklendikten sonra sonuçların görüntülenmesini sağlar.

Aşağıdaki görüntüde iki kod örneğinin sonuçlarını gösteren bir ekran görüntüsü yer alır.