En İyi Uygulamalar

JS En İyi Uygulamaları

Maps JavaScript API yalnızca standart bir ECMAScript ve W3C DOM ile çalışır. bahsedeceğim. Bu, yerleşik yapılandırmanın davranışını değiştirmek veya geçersiz kılmak için tarayıcı tarafından sağlanan sınıflar ve nesneler, Maps JavaScript API'yi işlevsel değildir. Bazen diğer kitaplıklar Haritalar JavaScript'i ile çakışabilir Tarayıcının davranışını artık standart olmaktan çıkaracak şekilde değiştirerek API ECMAScript ortamı. Maps JavaScript API, kitaplıklar.

Maps JavaScript API ile uyumlu olmadığı bilinen kitaplıklar:

  • Prototip: Array.from() ve Element.prototype.remove() özelliklerini standart olmayan yöntemlerle geçersiz kılar.
  • MooAraçlar (eski sürümler): Array.from() öğesini standart olmayan bir şekilde geçersiz kılar.
  • DateJS (eski sürümler): Date.now() öğesini standart olmayan bir şekilde geçersiz kılar.

Bazen uyumlu olmayan kitaplıkları değiştirerek standart dışı geçersiz kılma işlemleri.

CSS en iyi uygulamaları

Maps JavaScript API ile bir harita eklediğinizde veya haritayı özelleştirdiğinizde, harita stillerinizi geçersiz kılabilir ve CSS çakışmalarına neden olabilir. Stil için bir CSS çerçevesi veya JavaScript bileşeni kullanıyorsanız bu harita stillerinizle daha fazla CSS çakışıyor.

CSS çerçeveleri ve JavaScript stil bileşenleri, genellikle bir CSS sıfırlaması ya da normalleştirici kullanmanızı öneririz. Çerçeveleri sıklıkla web sayfasının kenar boşluklarını ve kenarlıklarını ölçeklendirmek için box-sizing öğesini kullanma öğeler. Bu işlem genellikle, varsayılan tarayıcı davranışının content-box - border-box.

Bu tür CSS sıfırlaması, CSS'nin Maps JavaScript API ile çakışmalarına neden olabilir Çünkü API, kullanıcı aracısı stil sayfasında yapılan değişiklikleri desteklemez. Ek bilgiler Çerçeve veya bileşen CSS sınıflarına referans veriyorsa CSS çakışmaları Maps JavaScript API'nin DOM öğeleri.

Bu çakışmaları önlemek için dikkate almamız gereken birkaç önerimiz var.

Belirginlik

Yerleştirilmiş ve bağlı CSS, haritanıza Google Haritalar stillerinden önce uygulanır. Eğer tüm sayfa stillerinizin yerleştirilmiş veya bağlantılı CSS'de tanımlanmış olması durumunda, spesifiklik kuralları kontrol edin.

img, button ve a gibi genel CSS öğelerinin üzerine . En sık karşılaşılan senaryolardan biri, max-width img öğesinin özelliği yüzde 100 olarak ayarlanmış. Bu durum, sitenizin veya gizli harita bileşenlerini kullanıyorsanız, özellikle InfoWindow.

Bu sorunu düzeltmek için haritanızın img öğesini güncelleyerek max-width özelliği none olarak ayarlandı. Örneğin:

#map img
{
    max-width : none;
}

Sınıf adları

JavaScript Haritaları'nın sınıf adlarına ve dahili DOM öğelerine referans vermeyin API'ye gidin. Bu işlem desteklenmez ve web sitenizde zarar veren değişikliklere neden olabilir. bildirimde bulunmadan. Bunun yerine, kendi CSS sınıflarınızı container'lar oluşturun.

Bir CSS çerçevesi veya JavaScript bileşeni bu tür referansları kullanıyorsa kutu boyutu geçersiz kılma önerisi, bir çözüm olabilir.

CSS kutu boyutunu geçersiz kılma

CSS kutu boyutu geçersiz kılmaları, harita stillerine yönelik olası bir çözüm sağlar çatışmaya neden olabilir. Bu, özellikle CSS çerçevesi kullanıyorsanız veya JavaScript stil bileşeni. Örneğin, box-sizing border-box için aşağıdakileri deneyin:

  • <html> öğesini border-box olarak ayarlayan bir box-sizing geçersiz kılması oluşturun.
  • Haritanız dışındaki tüm öğeler için box-sizing: inherit kullanın.
  • box-sizing öğesini initial olarak sıfırlayan özel bir harita kapsayıcısı oluşturun.

CSS örneği:

html {
  box-sizing: border-box;
}

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

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