بهترین شیوه ها

بهترین شیوه های JS

Maps JavaScript API فقط با محیط استاندارد ECMAScript و W3C DOM کار می کند. این بدان معناست که تغییر یا نادیده گرفتن رفتار کلاس‌ها و اشیاء داخلی ارائه‌شده توسط مرورگر می‌تواند Maps JavaScript API را غیر کاربردی کند. گاهی اوقات کتابخانه‌های دیگر می‌توانند با تغییر رفتار مرورگر با Maps JavaScript API تداخل داشته باشند تا دیگر یک محیط استاندارد ECMAScript نباشد. Maps JavaScript API با آن کتابخانه ها سازگار نیست.

کتابخانه هایی که با Maps JavaScript API ناسازگار شناخته شده اند:

  • Prototype: Array.from() و Element.prototype.remove() را به روش های غیر استاندارد لغو می کند.
  • MooTools (نسخه های قدیمی): Array.from() به روشی غیر استاندارد لغو می کند.
  • DateJS (نسخه های قدیمی): Date.now() را به روشی غیر استاندارد لغو می کند.

گاهی اوقات می توان کتابخانه های ناسازگار را برای حذف موارد غیر استاندارد تغییر داد.

بهترین روش های CSS

وقتی نقشه‌ای را با Maps JavaScript API اضافه یا سفارشی می‌کنید، برخی از سبک‌هایی که در صفحه وب خود اعمال می‌کنید ممکن است سبک‌های نقشه شما را لغو کنند و باعث تداخل CSS شوند. اگر از یک چارچوب CSS یا یک مؤلفه جاوا اسکریپت برای استایل‌سازی استفاده می‌کنید، ممکن است تضادهای اضافی CSS با سبک‌های نقشه شما اضافه شود.

فریم‌ورک‌های CSS و مؤلفه‌های استایل جاوا اسکریپت اغلب از یک تنظیم مجدد CSS یا یک نرم‌افزار برای رسیدگی به تفاوت‌های رندر بین مرورگرها استفاده می‌کنند. فریم‌ورک‌ها اغلب از عنصر box-sizing برای مقیاس‌بندی حاشیه‌ها و مرزهای عناصر صفحه وب استفاده می‌کنند. این معمولاً شامل تغییر رفتار پیش‌فرض مرورگر از استفاده از content-box به border-box است.

این نوع بازنشانی CSS می‌تواند باعث تداخل CSS با Maps JavaScript API شود زیرا API از تغییرات در شیوه نامه عامل کاربر پشتیبانی نمی‌کند. اگر چارچوب یا مؤلفه به کلاس‌های CSS یا عناصر DOM از Maps JavaScript API ارجاع دهد، تداخل CSS اضافی ممکن است رخ دهد.

برای جلوگیری از این درگیری ها، ما چندین توصیه برای بررسی داریم.

خاص بودن

CSS جاسازی شده و پیوند داده شده قبل از سبک های نقشه های گوگل بر روی نقشه شما اعمال می شود. اگر همه سبک‌های صفحه شما در CSS تعبیه‌شده یا پیوندی تعریف شده‌اند، قوانین اختصاصی بودن را دنبال کنید تا مطمئن شوید که سبک‌های صحیح روی نقشه شما اعمال می‌شود.

عناصر رایج CSS، مانند img ، button و a را می توان با سبک های صفحه شما بازنویسی کرد. یکی از رایج ترین سناریوها زمانی است که ویژگی max-width عنصر img روی 100 درصد تنظیم شده است. این می تواند باعث مخدوش یا مخفی شدن اجزای نقشه شود، به خصوص اگر از InfoWindow استفاده می کنید.

برای رفع این مشکل، می توانید عنصر img را برای نقشه خود به روز کنید تا ویژگی max-width روی none تنظیم شود. به عنوان مثال:

#map img
{
    max-width : none;
}

نام کلاس ها

به نام کلاس ها و عناصر DOM داخلی JavaScript Maps API ارجاع ندهید. این مورد پشتیبانی نمی‌شود و می‌تواند بدون اطلاع قبلی باعث ایجاد تغییراتی در وب‌سایت شما شود. در عوض، توصیه می کنیم کلاس های CSS خود را به عنوان کانتینر برای نقشه خود ایجاد کنید.

اگر یک چارچوب CSS یا مؤلفه جاوا اسکریپت از این نوع مراجع استفاده کند، توصیه نادیده گرفتن اندازه جعبه ما ممکن است به عنوان یک راه حل عمل کند.

لغو اندازه جعبه CSS

نادیده گرفتن اندازه جعبه CSS یک راه حل ممکن برای تضادهای سبک نقشه ارائه می دهد. اگر از چارچوب CSS یا مؤلفه استایل جاوا اسکریپت استفاده می کنید، این می تواند به ویژه مفید باشد. برای مثال، اگر box-sizing روی border-box تنظیم شده است، موارد زیر را امتحان کنید:

  • یک تغییر box-sizing ایجاد کنید که عنصر <html> را روی border-box تنظیم می کند.
  • box-sizing: inherit .
  • یک محفظه نقشه سفارشی ایجاد کنید که عنصر box-sizing را به initial بازنشانی کند.

مثال CSS:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}