تصميم "LocalContext MapView"

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

تطبيق أنماط الخريطة المخصصة

يمكنك تخصيص المظهر المرئي لخرائط LocalContextMapView من خلال تطبيق الأنماط المخصصة. ولكن لاحظ أن LocalContextMapView مزوّد بأنماط تلقائية مختلفة عن الأنماط العادية المستخدمة في Map.

لإلغاء الأنماط الافتراضية البالغ عددها LocalContextMapView تمامًا بالأنماط المخصصة (يحتفظ styles بمصفوفة الأنماط المخصصة):

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

للاعتماد على LocalContextMapView نمط تلقائي مع أنماط مخصصة (styles):

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.ts

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.js

تخصيص رموز العلامات

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

  • يتم دمج الأنماط المخصصة أعلى الأنماط الافتراضية.
  • يتم دعم جميع تركيبات ألوان CSS، بما في ذلك نموذج أحمر أخضر أزرق (RGB)، وسداسي عشري، وHSL، وكلمة رئيسية ملونة.
  • المقياس عبارة عن قيمة رقمية، بمقياس يبلغ 2 ضعفه بمقياس 1، وهكذا. بشكل افتراضي، يحتوي الدبوس على قيم تدرج مختلفة تم تعيينها للولايات المختلفة. المقياس مطلق، لذا لن تغيّر القيمة التي تمرّرها حجم الدبوس بالنسبة إلى القيمة الافتراضية، بل تتجاوز القيمة الافتراضية. على سبيل المثال، يؤدي ضبط المقياس على 1 لكل الولايات إلى ضبط الدبوس على الحجم نفسه بغض النظر عن الولاية.

تعيين لون ومقياس رمز العلامة بشكل ثابت

يمكنك تعيين اللون الافتراضي والحجم لرموز العلامات والرموز. للقيام بذلك، حدّد قيم الألوان لـ glyphColor وbackground، وقيمة رقمية لـ scale في pinOptionsSetup. في المثال التالي يتمّ تعيين الرموز إلى اللون الأسود، والأحرف الرمزية إلى اللون الأبيض، ويزيد المقياس إلى 2:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

تعيين لون ورمز محدّد الموقع ديناميكيًا

لتعيين الألوان الافتراضية لرموز العلامات والأحرف الرسومية بناءً على الحالة (افتراضي أو محدد أو محدد)، استخدم عبارة شرطية لتعيين القيم المطلوبة لكل حالة. عندما يمرر المستخدم مؤشر الماوس فوق علامة، يصبح isHighlighted true. عندما ينقر المستخدم على علامة، تصبح isSelected صحيحة. عند إغلاق عرض تفاصيل المكان، تعود رموز العلامات إلى النمط الافتراضي. يوضح المثال التالي تغيير نمط رمز العلامة بناءً على الحالة:

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

استخدام نمط الخرائط المستندة إلى السحاب مع الإصدار التجريبي للسياق المحلي

لاستخدام نمط الخرائط المستندة إلى السحاب إلى جانب الإصدار التجريبي للسياق المحلي، اتبع الخطوات التالية:

  1. إنشاء Map باستخدام mapId وتمريره إلى LocalContextMapView
  2. إيقاف التصنيفات والرموز لنقاط الاهتمام العامة (POIs).
  3. أوقف بعض العناصر في خيارات Map الداخلية. هذه الخطوات اختيارية.

إنشاء Map باستخدام mapId وتمريره إلى LocalContextMapView

لإضافة خريطة باستخدام رقم تعريف نمط الخرائط المستندة إلى السحاب، حدد العنصر map (بما في ذلك رقم التعريف وجميع خيارات Map الداخلية)، واستخدم هذا لإعداد LocalContextMapView، كما هو موضح في المثال التالي:

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

إيقاف التصنيفات والرموز لنقاط الاهتمام العامة

لإيقاف التصنيفات والرموز لنقاط الاهتمام العامة، اتبع الخطوات التالية:

  1. انتقل إلى Google Cloud Console، وحدد أنماط الخريطة لفتح شاشة "أنماط الخريطة".
  2. في تهيئة النمط لنقاط الاهتمام، عيّن مستوى الرؤية على إيقاف للتصنيفات والرموز.
  3. في تهيئة النمط لنقاط الاهتمام، عيّن مستوى الرؤية على تشغيل لتصنيفات المتنزهات.

تعيين خيارات Map الداخلية (اختياري)

يمكنك أيضًا ضبط خيارات Map الداخلية التالية، بالإضافة إلى أي خيارات داخلية أخرى في Map تم ضبطها، كما هو موضَّح هنا:

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});