Bu sayfada, vektör haritalar ve WebGL özellikleri ile ilgili bilinen sorunlar ve geçici çözümler listelenmektedir.
Tarayıcı/cihaz desteği
WebGL özellik önizlemesi, Maps JavaScript API ile aynı tarayıcıları ve cihazları destekler. Belirli bir cihazdaki tarayıcının WebGL'yi destekleyip desteklemediğini kontrol etmek için get.webgl.org veya caniuse.com adresini ziyaret edin. Lütfen tarayıcı ayarlarında donanım hızlandırmanın etkinleştirildiğinden de emin olun. Aksi takdirde vektör haritalar raster'a geri döner.
Raster mi yoksa vektör mü?
Bazen vektör haritalar raster haritaya geri dönebilir. Bu durumda, vektör haritaya bağlı özellikler kullanılamaz. Çeşitli nedenlerle raster haritaya geri dönüş yapılabilir. Bu bölümde, web tarayıcınızı nasıl doğru şekilde yapılandıracağınız ve vektör harita özelliğinin mevcut olup olmadığını programatik olarak nasıl kontrol edeceğiniz gösterilmektedir.
Chrome'da tarayıcı özelliklerini kontrol etme
Chrome'un belirli bir yüklemesinde hangi donanım hızlandırma özelliklerinin etkin olduğunu belirlemek için chrome://gpu/ adresine gidin ve aşağıdaki öğelerin etkin (yeşil renkte) olduğundan emin olun:
- "OpenGL: Etkin"
- "WebGL: Donanım hızlandırmalı"
- "WebGL2: Donanım hızlandırmalı"
(Bunlar yalnızca temel şartlardır. Desteği etkileyen başka faktörler de olabilir. Aşağıdaki "Bilinen hatalar" bölümüne bakın.)
Donanım hızlandırmayı etkinleştirme
Vektör haritaların desteklenmesi için çoğu tarayıcıda donanım hızlandırma etkinleştirilmelidir. Chrome ve Microsoft Edge'de donanım hızlandırmayı etkinleştirmek için Ayarlar'ı açın, Sistem'i seçin ve Kullanılabilir olduğunda donanım hızlandırmayı kullan seçeneğinin etkinleştirildiğinden emin olun.
- Safari'de web sitesi tercihlerini nasıl değiştireceğinizi öğrenin.
- Firefox'un performans ayarları hakkında bilgi edinin.
Raster veya vektör olup olmadığını programatik olarak kontrol etme
map.getRenderingType()
işlevini çağırarak bir haritanın raster mi yoksa vektör mü olduğunu programatik olarak kontrol edebilirsiniz. Aşağıdaki örnekte, renderingtype_changed
etkinliğini izlemek ve raster veya vektör haritanın kullanılıp kullanılmadığını gösteren bir bilgi penceresi görüntülemek için kullanılan kod gösterilmektedir.
TypeScript
/** * This example creates a map with an info window that shows whether * the map render type is raster or vector. */ function initMap() { const center = {lat: 0, lng: 0}; const map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center, zoom: 10, heading: 0.0, tilt: 0.0, // Map ID for a vector map. mapId: '6ff586e93e18149f', }); const canvas = document.createElement("canvas"); const infoWindow = new google.maps.InfoWindow({ content: '', ariaLabel: 'Raster/Vector', position: center, }); infoWindow.open({ map, }); map.addListener('renderingtype_changed', () => { infoWindow.setContent(`${map.getRenderingType()}`); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
/** * This example creates a map with an info window that shows whether * the map render type is raster or vector. */ function initMap() { const center = { lat: 0, lng: 0 }; const map = new google.maps.Map(document.getElementById("map"), { center, zoom: 10, heading: 0.0, tilt: 0.0, // Map ID for a vector map. mapId: "6ff586e93e18149f", }); const canvas = document.createElement("canvas"); const infoWindow = new google.maps.InfoWindow({ content: "", ariaLabel: "Raster/Vector", position: center, }); infoWindow.open({ map, }); map.addListener("renderingtype_changed", () => { infoWindow.setContent(`${map.getRenderingType()}`); }); } window.initMap = initMap;
WebGL 2 desteğini kontrol etmek için WebGL oluşturma bağlamını da kullanabilirsiniz:
const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");
WebGL oluşturma bağlamını programatik olarak algılamanın diğer yollarını öğrenin.
Mobil web desteği
Vektör haritalar için mobil web desteği hâlâ deneyseldir. Geliştiriciler, mobil web tarayıcılarını algılamak için istemci API'lerini kullanabilir ve vektör harita yerine raster haritayla ilişkili bir harita kimliği kullanabilir. Bazı mobil cihazlarda daha yavaş bir oluşturma performansı bekliyoruz. Mobil web'de vektör haritaları kullanmayı tercih ederseniz performans istatistiklerini ve geri bildirimlerinizi bizimle paylaşmanızı rica ederiz. Yukarıda belirtildiği gibi, vektör harita desteği yoksa vektör harita kimliği otomatik olarak raster harita kullanmaya geri döner.
Hatalar
Bilinen hatalar
- AMD GPU'lu bazı macOS cihazlarda Chrome'la ilgili bilinen bir sorun var. Bu durum, macOS'in birden fazla GPU'ya sahip cihazlarda GPU'lar arasında dinamik olarak geçiş yaptığında özellikle kafa karıştırıcı olabilir. Bu nedenle, hangi uygulamaların çalıştığına veya harici bir monitörün bağlı olup olmadığına bağlı olarak vektör haritalar kullanılamayabilir. Chrome'un yakında kullanıma sunulacak ANGLE Metal arka ucunu etkinleştirmek, bazı durumlarda bu sorunu düzeltiyor gibi görünüyor. Bu özellik için genel kullanıma sunma planlarını https://bugs.chromium.org/p/chromium/issues/detail?id=1322521 adresinden takip edebilirsiniz.
Hata bildirme
- Lütfen hatayı bildirmeden önce tarayıcıyı ve GPU sürücüsünü en son sürüme güncelleyin.
chrome://settings/system
(Chrome),about:preferences#general
(Firefox),edge://settings/system
(Microsoft Edge) adresindeki donanım hızlandırma ayarının etkin olduğundan emin olun. Safari'de bu ayar, macOS 10.15 veya sonraki sürümlerde otomatik olarak etkinleştirilir. Daha eski MacOS sürümlerinde lütfen Safari'nin gelişmiş ayarlarına gidin ve "Donanım hızlandırmayı kullan" seçeneğinin etkinleştirildiğinden emin olun.- Hata raporuna jsfiddle örnek kod bağlantısını ekleyin.
- Lütfen
chrome://gpu
(Chrome),about:support
(Firefox) veyaedge://gpu
(Microsoft Edge) tarayıcısının ekran görüntüsünü de alın. Oluşturma sorunlarıyla karşılaşırsanız hata raporuna GPU ile ilgili bilgileri ekleyin.
Düşüncelerinizi bizimle paylaşın
Sizin ve son kullanıcılarınız için en iyi vektör harita deneyimini sunmaya çalışırken geri bildirimlerinizi dikkate alıyoruz. Lütfen aşağıdaki durumlarda bize bildirin:
- Web uygulamalarınızda tespit ettiğiniz yeni JavaScript hataları veya hatalar/kilitlenmeler varsa
- Vektör haritaların başlangıç gecikmesi, raster haritaların başlangıç gecikmesinden önemli ölçüde daha kötüdür. Bu durumda, başlangıç gecikmesi regresyonuyla ilgili metrikler çok faydalıdır. Genel olarak, başlangıç gecikmesinin kabul edilebilir eşiklerin ötesine gerileyip gerilemediğini öğrenmek istiyoruz.
- Vektör haritalar deneyimi olabildiğince sorunsuz değil. FPS veya jank metriklerini kaydediyorsanız bu metrikler vektör ve raster haritalar arasında nasıl karşılaştırılır?
- Performans tarayıcıya göre büyük ölçüde farklılık gösterir.
Vektör haritalar ile raster haritaların karşılaştırması için A/B testi ayarladıysanız lütfen elde ettiğiniz performans geri bildirimlerini paylaşın. Bu geri bildirimler, özelliği iyileştirmemize yardımcı olacağı için çok faydalı olacaktır.