إظهار نتائج البحث على الخريطة

مقالة
10/18/2023

توضح لك هذه المقالة كيفية البحث عن موقع الاهتمام وإظهار نتائج البحث على الخريطة.

هناك طريقتان للبحث عن موقع الاهتمام. إحدى الطرق هي استخدام TypeScript REST SDK، @azure-rest/maps-search لتقديم طلب بحث. الطريقة الأخرى هي إجراء طلب بحث واجهة برمجة تطبيقات بحث خرائط Azure Fuzzy من خلال واجهة برمجة تطبيقات إحضار. يتم وصف كلا النهجين في هذه المقالة.

إجراء طلب بحث عبر REST SDK

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;

في مثال التعليمات البرمجية السابق، تقوم الكتلة الأولى بإنشاء كائن خريطة وتعيين آلية المصادقة لاستخدام معرف Microsoft Entra. لمزيد من المعلومات، راجع إنشاء خريطة.

تنشئ الكتلة الثانية من التعليمات البرمجية كائنا ينفذ واجهة TokenCredential لمصادقة طلبات HTTP خرائط Azure مع الرمز المميز للوصول. ثم يمرر كائن بيانات الاعتماد إلى الخرائط Search وينشئ مثيلا للعميل.

تقوم الكتلة الثالثة من التعليمات البرمجية بإنشاء كائن مصدر بيانات باستخدام فئة DataSource وإضافة نتائج البحث إليه. تستخدم طبقة الرموز نصا أو أيقونات لعرض البيانات المستندة إلى النقطة المغلفة في DataSource كرمز على الخريطة. ثم يتم إنشاء طبقة رمز. تتم إضافة مصدر البيانات إلى طبقة الرمز، والتي تتم إضافتها بعد ذلك إلى الخريطة.

تقوم كتلة التعليمات البرمجية الرابعة بإجراء طلب GET في عميل الخرائط Search. يسمح لك بإجراء بحث مجاني عن نص النموذج عبر واجهة برمجة تطبيقات Get Search Fuzzy rest للبحث عن نقطة الاهتمام. الحصول على طلبات إلى واجهة برمجة تطبيقات Search Fuzzy يمكنه التعامل مع أي مجموعة من المدخلات الغامضة. ثم يتم تحويل الاستجابة إلى كائنات Feature وإضافتها إلى مصدر البيانات، ما يؤدي تلقائيا إلى عرض البيانات على الخريطة عبر طبقة الرمز.

تقوم الكتلة الأخيرة من التعليمات البرمجية بضبط حدود الكاميرا للخريطة باستخدام خاصية setCamera الخاصة بالخريطة.

يوجد طلب البحث ومصدر البيانات وطبقة الرموز وحدود الكاميرا داخل مستمع الحدث للخريطة. نريد التأكد من عرض النتائج بعد تحميل الخريطة بالكامل.

تقديم طلب بحث عبر واجهة برمجة تطبيقات إحضار

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;

في مثال التعليمات البرمجية السابق، تقوم الكتلة الأولى من التعليمات البرمجية بإنشاء كائن خريطة. يقوم بتعيين آلية المصادقة لاستخدام معرف Microsoft Entra. لمزيد من المعلومات، راجع إنشاء خريطة.

تقوم الكتلة الثانية من التعليمات البرمجية بإنشاء كائن مصدر بيانات باستخدام فئة DataSource وإضافة نتائج البحث إليه. تستخدم طبقة الرموز نصا أو أيقونات لعرض البيانات المستندة إلى النقطة المغلفة في DataSource كرمز على الخريطة. ثم يتم إنشاء طبقة رمز. تتم إضافة مصدر البيانات إلى طبقة الرمز، والتي تتم إضافتها بعد ذلك إلى الخريطة.

تنشئ الكتلة الثالثة من التعليمات البرمجية عنوان URL لإجراء طلب بحث إليه.

تستخدم الكتلة الرابعة من التعليمات البرمجية واجهة برمجة تطبيقات Fetch. يتم استخدام واجهة برمجة التطبيقات الإحضاؤ لتقديم طلب خرائط واجهة برمجة تطبيقات بحث Azure Fuzzy للبحث عن نقاط الاهتمام. يمكن لواجهة برمجة تطبيقات البحث الغامضة التعامل مع أي مجموعة من المدخلات الغامضة. ثم يعالج استجابة البحث ويوزعها ويضيف دبابيس النتائج إلى صفيف searchPins.

تنشئ الكتلة الأخيرة من التعليمات البرمجية كائن BoundingBox. ويستخدم صفيف النتائج، ثم يضبط حدود الكاميرا للخريطة باستخدام setCamera للخريطة. ثم يعرض دبابيس النتائج.

يتم تعيين طلب البحث ومصدر البيانات وطبقة الرموز وحدود الكاميرا داخل وحدة إصغاء أحداث الخريطة لضمان عرض النتائج بعد تحميل الخريطة بالكامل.

الصورة التالية هي لقطة شاشة تعرض نتائج نموذجي التعليمات البرمجية.