تخصيص خريطة السياق المحلية

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

في هذا المثال، نطبق نمط الخريطة المخصصة على الخريطة الأساسية. وتنظر هذه الخريطة إلى وايكيكي في هاواي، وهي مزوّدة بنمط ألوان استوائية. وقد تم ضبط maxPlaceCount على 18 لعرض المزيد من نقاط الاهتمام.

فهم الشفرة

الوصول إلى الخريطة الأساسية

يمكن الوصول إلى الخريطة الأساسية كسمة map لكائن google.maps.localContext.LocalContextMapView. هذه الخريطة هي كائن google.maps.Map عادي ويمكن تخصيصها باستخدام جميع المعلمات والأساليب المتاحة لهذه الفئة. على سبيل المثال، يمكنك إضافة أدوات تمييز مخصصة وأدوات استماع للأحداث.

var marker = new google.maps.Marker({position: center, map:  localContextMapView.map});
localContextMapView.map.addListener('click', () => {
    localContextMapView.hidePlaceDetailsView();
  });

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

نظرًا لأن google.maps.localContext.LocalContextMapView.map له أنماط تلقائية تختلف عن Map العادي، يمكنك اختيار إلغاء الإعدادات التلقائية أو دمج نمطك المخصّص مع الإعدادات التلقائية لمكتبة السياقات المحلية. راجع تصميم الخريطة لمزيد من التفاصيل.

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

TypeScript

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

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

JavaScript

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

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

إضافة علامة مخصصة

يستخدم هذا المثال رمز فندق لتمييز النقطة المركزية عن محدّد موقع الدبوس الأحمر الافتراضي. اطّلع على مزيد من المعلومات حول طرق تخصيص محدّد الموقع عن طريق تعديل السمتَين label وicon في Marker.

بشكل افتراضي، ستظهر هذه العلامات أسفل علامات نقاط الاهتمام في مكتبة السياقات المحلية. للتأكّد من أنّ علامات "مكتبة السياقات المحلية" لا تحجب العلامة المخصّصة، اضبط السمة zIndex على العلامة على قيمة أعلى من maxPlaceCount.

TypeScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

JavaScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

تجربة النموذج