التشغيل السريع: إنشاء خريطة بحث تفاعلية باستخدام Azure Maps

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

  • قم بإنشاء حساب خرائط Azure الخاص بك.
  • احصل على مفتاح اشتراك خرائط Azure لاستخدامه في تطبيق الويب التجريبي.
  • قم بتنزيل فتح تطبيق الخريطة التجريبية.

يستخدم التشغيل السريع Azure Maps Web SDK، بالرغم من أنه يمكن استخدام خدمة Azure Maps مع أي عنصر تحكم في الخريطة، مثل عناصر تحكم الخريطة المفتوحة المصدر الشائعة التي أنشأ فريق Azure Maps المكون الإضافي لها.

المتطلبات الأساسية

أنشئ حساب خرائط Azure

إنشاء حساب جديد لخرائط Azure بالخطوات التالية:

  1. حدد إنشاء مورد في الزاوية العلوية اليمنى من مدخل Microsoft Azure.

  2. اكتب خرائط Azure في المربع خدمات البحث وMarketplace.

  3. حدّد خرائط Azure في القائمة المنسدلة التي تظهر، ثم انقر الزر"Create".

  4. في صفحة إنشاء مورد حساب خرائط Azure، أدخِل القيم التالية ثم حدد الزر إنشاء:

    • الاشتراك الذي تريد استخدامه لهذا الحساب.
    • اسم "مجموعة الموارد" لهذا الحساب. يمكنك اختيار مجموعة الموارد إنشاء جديد أو تحديد الحالي.
    • اسم حسابك الجديد على خرائط Azure.
    • مستوى التسعير لهذا الحساب. حدد Gen2.
    • اقرأ الترخيصوبيان الخصوصية، ثم حدد خانة الاختيار لقبول الشروط.

    Screenshot showing the Create an Azure Maps Account resource page in the Azure portal.

الحصول على مفتاح الاشتراك لحسابك

بمجرد إنشاء حساب خرائط Azure بنجاح، قم باسترداد مفتاح الاشتراك الذي يمكنك من الاستعلام عن واجهات برمجة التطبيقات الخرائط.

  1. افتح حساب الخرائط الخاص بك في البوابة الإلكترونية.
  2. في قسم الإعدادات، حدد "المصادقة".
  3. انسخ Primary Key واحفظه محليًا لاستخدامه لاحقًا في هذا البرنامج التعليمي.

Screenshot showing your Azure Maps subscription key in the Azure portal.

إشعار

يستخدم هذا التشغيل السريع نهج مصادقة المفتاح المشترك لأغراض العرض التوضيحي، ولكن النهج المفضل لأي بيئة إنتاج هو استخدام مصادقة [معرف Microsoft Entra].

تنزيل وتحديث العرض التوضيحي لخرائط Azure.

  1. انسخ محتويات الملف: Interactive Search Quickstart.html.
  2. قم بحفظ محتويات هذا الملف محليا كما AzureMapDemo.html. افتح محرر النصوص.
  3. إضافة قيمة المفتاح الأساسي التي حصلت عليها في القسم السابق
    1. التعليق خارج كافة التعليمات البرمجية في الدالة authOptions ، يتم استخدام هذه التعليمة البرمجية لمصادقة Microsoft Entra.
    2. إلغاء اتصال السطرين الأخيرين في authOptionsالدالة، يتم استخدام هذه التعليمات البرمجية لمصادقة المفتاح المشترك، والنهج المستخدم في هذا التشغيل السريع.
    3. استبدل <Your Azure Maps Key> بقيمة مفتاح الاشتراك من القسم السابق.

فتح التطبيق التجريبي

  1. افتح الملف AzureMapDemo.html في مستعرض ويب من اختيارك.

  2. لاحظ الخريطة المعروضة لمدينة لوس أنجلوس. قم بالتكبير والتصغير لمعرفة كيفية عرض الخريطة تلقائيا بمعلومات أكثر أو أقل اعتمادا على مستوى التكبير/ التصغير.

  3. تغيير الوسط الافتراضي للخريطة. في ملف AzureMapDemo.html، ابحث عن مركزالمتغير المسمى . استبدل خط الطول، قيمة زوج خطوط العرض لهذا المتغير بالقيم الجديدة [-74.0060، 40.7128]. احفظ الملف وقم بتحديث متصفحك.

  4. جرب تجربة البحث التفاعلية. في مربع البحث في الزاوية العلوية اليسرى من تطبيق الويب التجريبي، ابحث عن المطاعم.

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

    Screenshot showing the interactive map search web application.

تنظيف الموارد

هام

توضح البرامج التعليمية المدرجة في قسم "الخطوات التالية" بالتفصيل كيفية استخدام Azure Maps وتكوينها مع حسابك. لا تقم بتنظيف الموارد التي تم إنشاؤها في هذه البداية السريعة إذا كنت تخطط لمتابعة الدروس.

إذا كنت لا تخطط لمتابعة الدروس، واتخاذ هذه الخطوات لتنظيف الموارد:

  1. أغلق المستعرض الذي يقوم بتشغيل تطبيق الويب AzureMapDemo.html.
  2. انتقل إلى مدخل Azure. حدد جميع الموارد من صفحة المدخل الرئيسية، أو حدد أيقونة القائمة في الزاوية العلوية اليمنى ثم جميع الموارد.
  3. حدد حساب خرائط Azure الخاص بك، ثم حدد حذف في أعلى الصفحة.

لمزيد من أمثلة التعليمات البرمجية وتجربة ترميز تفاعلية، راجع هذه المقالات:

الخطوات التالية

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