الحصول على معلومات من تنسيق

مقالة
10/18/2023

توضح هذه المقالة كيفية إجراء بحث عكسي عن العناوين يعرض عنوان موقع منبثق محدد.

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

إجراء طلب بحث عكسي عبر 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>");

    // Update the style of mouse cursor to a pointer
    map.getCanvasContainer().style.cursor = "pointer";

    // Create a popup
    const popup = new atlas.Popup();

    // Upon a mouse click, open a popup at the selected location and render in the popup the address of the selected location
    map.events.add("click", async (e) => {
      const position = [e.position[1], e.position[0]];

      // Execute the reverse address search query and open a popup once a response is received
      const response = await client.path("/search/address/reverse/{format}", "json").get({
        queryParameters: { query: position }
      });

      // Get address data from response
      const data = response.body.addresses;

      // Construct the popup
      var popupContent = document.createElement("div");
      popupContent.classList.add("popup-content");
      popupContent.innerHTML = data.length !== 0 ? data[0].address.freeformAddress : "No address for that location!";
      popup.setOptions({
        position: e.position,
        content: popupContent
      });

      // Render the popup on the map
      popup.open(map);
    });
  });
};

document.body.onload = onload;

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

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

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

الكتلة الرابعة من التعليمات البرمجية تضيف موزع رسائل الأحداثعند النقر بالماوس. عند تشغيله، فإنه ينشئ استعلام بحث مع إحداثيات النقطة المحددة. ثم يقدم طلب GET للاستعلام عن Get Search Address Reverse API لعنوان الإحداثيات.

تقوم الكتلة الخامسة من التعليمات البرمجية بإعداد محتوى HTML المنبثق لعرض عنوان الاستجابة لموضع الإحداثيات المحدد.

يتم إنشاء تغيير المؤشر والعنصر المنبثق والحدث click في وحدة استماع حدث تحميل الخريطة. تضمن بنية التعليمات البرمجية هذه تحميل الخريطة بالكامل قبل استرداد معلومات الإحداثيات.

إجراء طلب بحث عكسي عبر Fetch API

حدد موقعا على الخريطة لتقديم طلب رمز جغرافي عكسي لهذا الموقع باستخدام الجلب.

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", async () => {
    // Update the style of mouse cursor to a pointer
    map.getCanvasContainer().style.cursor = "pointer";

    // Create a popup
    const popup = new atlas.Popup();

    // Upon a mouse click, open a popup at the selected location and render in the popup the address of the selected location
    map.events.add("click", async (e) => {
      //Send a request to Azure Maps reverse address search API
      let url = "https://atlas.microsoft.com/search/address/reverse/json?";
      url += "&api-version=1.0";
      url += "&query=" + e.position[1] + "," + e.position[0];

      // Process request
      fetch(url, {
        headers: {
          Authorization: "Bearer " + map.authentication.getToken(),
          "x-ms-client-id": "<Your Azure Maps Client Id>"
        }
      })
        .then((response) => response.json())
        .then((response) => {
          const popupContent = document.createElement("div");
          popupContent.classList.add("popup-content");
          const address = response["addresses"];
          popupContent.innerHTML =
            address.length !== 0 ? address[0]["address"]["freeformAddress"] : "No address for that location!";
          popup.setOptions({
            position: e.position,
            content: popupContent
          });
          // render the popup on the map
          popup.open(map);
        });
    });
  });
};

document.body.onload = onload;

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

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

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

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