In questa pagina sono elencati i problemi noti e le soluzioni alternative per le mappe vettoriali e le funzionalità di WebGL.
Supporto 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 è abilitata nelle impostazioni del browser, altrimenti le mappe vettoriali verrà ripristinata la modalità raster.
Raster o vettoriale?
Talvolta, una mappa vettoriale può risalire al raster. In questi casi, le funzionalità a seconda della mappa vettoriale non sono disponibili. Può verificarsi il fallback a una mappa raster per vari motivi. Questa sezione mostra come configurare correttamente il tuo browser web e come controllare in modo programmatico se la mappa vettoriale è già presente una funzionalità.
Verificare le funzionalità del browser Chrome
Per determinare quali funzionalità di accelerazione hardware sono abilitate in una specifica installare Chrome, andare all'indirizzo chrome://gpu/ e verificare che i seguenti elementi siano attivati (in verde):
- "OpenGL: attivato"
- "WebGL: accelerazione hardware"
- "WebGL2: accelerazione hardware"
(Questi sono solo requisiti di base, possono esistere altri fattori che impatto sull'assistenza, consulta la sezione "Bug noti" below.)
Attiva l'accelerazione hardware
Per supportare le mappe vettoriali, l'accelerazione hardware deve essere abilitata nella maggior parte browser. Per attivare l'accelerazione hardware in Chrome e Microsoft Edge, apri Impostazioni, seleziona Sistema e assicurati di selezionare l'opzione Usa accelerazione hardware quando disponibile. se disponibile.
- 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,
chiamata map.getRenderingType()
. L'esempio seguente mostra il codice da monitorare
l'evento renderingtype_changed
e verrà mostrata una finestra informativa che mostra se
raster o vettoriale in uso.
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 web mobile
Il supporto per le mappe vettoriali sul web mobile è ancora sperimentale. Gli sviluppatori possono utilizzare API client per rilevare i browser web mobile e utilizzare un ID mappa associato a una mappa raster anziché una mappa vettoriale. Prevediamo prestazioni di rendering più lente per alcuni dispositivi mobili. Se scegli di utilizzare le mappe vettoriali sul web mobile, le statistiche e i feedback sulle prestazioni. Come sopra, se Il supporto delle mappe vettoriali non è disponibile, verrà automaticamente aggiunto un ID mappa vettoriale di riserva all'uso di una mappa raster.
Bug
Bug noti
- Esiste un problema noto di Chrome su alcuni dispositivi macOS con GPU AMD. Questo può creare confusione in particolare quando macOS passa dinamicamente da una GPU a un'altra di dispositivi con più GPU, pertanto le mappe vettoriali potrebbero non essere disponibili quali altre app sono in esecuzione o se è collegato un monitor esterno. L'attivazione del backend ANGLE Metal imminente di Chrome sembra risolvere il problema in in alcuni casi. Puoi seguire i piani di implementazione generali all'indirizzo https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.
Segnalazione di bug
- Aggiorna il browser e il driver GPU alla versione più recente prima di segnalare il bug.
- 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 abilitata. - Includi il link al codice campione jsfiddle nella segnalazione di bug.
- Acquisisci anche uno screenshot di
chrome://gpu
(Chrome),about:support
(Firefox) oedge://gpu
(Microsoft Edge). In caso di problemi di rendering, allega le informazioni relative alla GPU nella segnalazione di bug.
Aspettiamo commenti e suggerimenti!
Il tuo feedback è importante per noi perché ci impegniamo per offrire la migliore esperienza di utilizzo delle mappe vettoriali per te e i tuoi utenti finali. Facci sapere se:
- Sono presenti nuovi errori JavaScript o bug/arresti anomali che rilevi nel tuo app web.
- La latenza di avvio per le mappe vettoriali è notevolmente inferiore a quella per il raster mappe. In questo caso, le metriche per la regressione della latenza di avvio sono molto utili. In generale, vogliamo sapere se la latenza di avvio regredisce oltre soglie accettabili.
- L'esperienza con le mappe vettoriali non è fluida come potrebbe essere. Se registri i valori f/s o jank, come si confrontano tra mappe vettoriali e raster?
- Le prestazioni variano notevolmente in base al browser.
Se hai impostato i test A/B per un confronto tra mappe vettoriali e mappe raster, comunicaci eventuali feedback sul rendimento che acquisisci, poiché saranno molto utili. per aiutarci a perfezionare la funzionalità.