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()veElement.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>öğesiniborder-boxolarak ayarlayan birbox-sizinggeçersiz kılması oluşturun.- Haritanız dışındaki tüm öğeler için
box-sizing: inheritkullanın. box-sizingöğesiniinitialolarak 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;
}