Questa pagina elenca i problemi noti e le soluzioni alternative per le mappe vettoriali e le funzionalità WebGL.
Supporto per browser/dispositivi
L'anteprima della funzionalità WebGL supporta gli stessi browser e dispositivi dell'API Maps JavaScript. Per verificare se il browser su un determinato dispositivo supporta WebGL, visita get.webgl.org o caniuse.com. Assicurati inoltre che l'accelerazione hardware sia attivata nelle impostazioni del browser, altrimenti le mappe vettoriali torneranno a essere raster.
Raster o vettoriale?
Talvolta, una mappa vettoriale può risalire al raster. In questi casi, le funzionalità che dipendono dalla mappa vettoriale non sono disponibili. Il fallback a una mappa raster può avere vari motivi. Questa sezione illustra come configurare correttamente il browser web e come verificare tramite programmazione se è presente la funzionalità delle mappe vettoriali.
Verifica le funzionalità del browser su Chrome
Per determinare quali funzionalità di accelerazione hardware sono abilitate in un'installazione specifica di Chrome, vai a chrome://gpu/ e assicurati che i seguenti elementi siano abilitati (in verde):
- "OpenGL: Enabled"
- "WebGL: accelerazione hardware"
- "WebGL2: accelerazione hardware"
(Si tratta solo di requisiti di base, possono esserci altri fattori che influiscono sull'assistenza, consulta "Bug noti" di seguito).
Attivare l'accelerazione hardware
Per supportare le mappe vettoriali, l'accelerazione hardware deve essere attivata nella maggior parte dei browser. Per attivare l'accelerazione hardware in Chrome e Microsoft Edge, apri Impostazioni, seleziona Sistema e assicurati che l'opzione Usa accelerazione hardware quando disponibile sia attivata.
- Scopri come modificare le preferenze dei siti web in Safari.
- Scopri di più sulle impostazioni relative alle prestazioni di Firefox.
Controllare in modo programmatico le immagini raster o vettoriali
Puoi verificare in modo programmatico se una mappa è raster o vettoriale chiamando map.getRenderingType()
. L'esempio seguente mostra il codice per monitorare
l'evento renderingtype_changed
e visualizzare una finestra informativa che indica se è in uso una mappa raster o vettoriale.
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;
Puoi anche utilizzare il contesto di rendering WebGL per verificare il supporto di WebGL 2:
const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");
Scopri altri modi per rilevare in modo programmatico il contesto di rendering WebGL.
Supporto del web mobile
Il supporto per le mappe vettoriali sul web mobile è ancora sperimentale. Gli sviluppatori possono utilizzare le API client per rilevare i browser web mobile e utilizzare un ID mappa associato a una mappa raster anziché una mappa vettoriale. Prevediamo un calo delle prestazioni di rendering per alcuni dispositivi mobili. Se scegli di utilizzare le mappe vettoriali sul web mobile, ti invitiamo a inviarci statistiche sul rendimento e feedback. Come sopra, se il supporto delle mappe vettoriali non è disponibile, un ID mappa vettoriale utilizzerà automaticamente una mappa raster.
Bug
Bug noti
- Esiste un problema noto in Chrome su alcuni dispositivi macOS con GPU AMD. Ciò può creare particolare confusione quando macOS passa in modo dinamico da una GPU a un'altra su dispositivi con più GPU, per cui le mappe vettoriali potrebbero non essere disponibili a seconda di quali altre app sono in esecuzione o se è collegato un monitor esterno. L'attivazione del backend ANGLE Metal di Chrome, che sarà disponibile a breve, sembra risolvere il problema in alcuni casi. Puoi seguire i piani di implementazione generali per questa funzionalità all'indirizzo https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.
Segnalazione di bug
- Prima di segnalare il bug, aggiorna il browser e il driver della GPU all'ultima versione.
- Assicurati che l'impostazione dell'accelerazione hardware di
chrome://settings/system
(Chrome),about:preferences#general
(Firefox),edge://settings/system
(Microsoft Edge) sia attiva. In Safari, questa impostazione viene attivata automaticamente in macOS 10.15 o versioni successive. Per le versioni precedenti di macOS, vai alle impostazioni avanzate di Safari e assicurati che l'opzione "Usa accelerazione hardware" sia attivata. - Includi il link al codice di esempio jsfiddle nella segnalazione di bug.
- Se riscontri problemi di rendering, acquisisci anche uno screenshot di
chrome://gpu
(Chrome),about:support
(Firefox) oedge://gpu
(Microsoft Edge) e allega le informazioni relative alla GPU nel report del bug.
Aspettiamo commenti e suggerimenti!
Il tuo feedback è molto importante per noi e ci impegniamo per offrirti la migliore esperienza di utilizzo delle mappe vettoriali per te e per i tuoi utenti finali. Facci sapere se:
- Sono presenti nuovi errori JavaScript o bug/arresti anomali che rilevi nelle tue app web.
- La latenza di avvio per le mappe vettoriali è notevolmente peggiore rispetto a quella per le mappe raster. In questo caso, le metriche per la regressione della latenza di avvio sono molto utili. In generale, vogliamo sapere se la latenza di avvio peggiora oltre le soglie accettabili.
- L'esperienza con le mappe vettoriali non è fluida come potrebbe essere. Se registri le metriche FPS o jank, come si confrontano tra le mappe vettoriali e raster?
- Le prestazioni variano notevolmente in base al browser.
Se hai configurato i test A/B per un confronto tra mappe vettoriali e mappe raster, condividi i feedback sul rendimento che acquisisci, poiché saranno molto utili per aiutarci a perfezionare la funzionalità.