google maps api v3 senza trascinamento liscio

Question

Ho iniziato a implementare il mio software utilizzando le mappe api v3. Purtroppo ho scoperto che l'API v3 ha alcuni problemi seri che mi richiamano da una licenza bussiness.

I miei clienti utilizzano monitor con risoluzione HD pari a 1920x1080 e la mappa occupa il 90% dello spazio sullo schermo. Purtroppo arriva il problema di cui sto parlando. Quando clicco con il mouse sulla mappa e inizio a trascinarlo è non fumosamente ed è davvero fastidioso. Tutto il divertimento se ne va.

Ho provato alcuni scenarious diverso utilizzando Windows XP, Windows 7 e Windows 8. I browser sto lavorando con sono le ultime versioni di Firefox, Chrome e IE. Ecco i risultati quando si tenta di trascinare la mappa:

1. risoluzione dello schermo 320x240 Piccolo: Firefox, Chrome e IE gestire molto bene. È impossibile notare che il trascinamento non è regolare.
2. Piccola risoluzione dello schermo 320x240 con 10 polilinee sulla mappa: Chrome e IE gestiscono bene, ma se avete esperienza con l'API v2 noterete una differenza. Firefox - incubo, il trascinamento non è affatto fluido.
3. Risoluzione schermo media 1024x768. Firefox - c'è qualche ritardo incoerente. Chrome e IE: una sorta di trascinamento morbido, ma se si sposta il mouse velocemente le cose peggiorano.
4. Risoluzione schermo media 1024x768 con 10 polilinee sulla mappa. Firefox - incubo. Chrome e IE: inizi a notare che c'è un po 'di ritardo ma allo stesso tempo sembra un po' agevole.
5. Risoluzione schermo 1920x1080. Firefox: enorme ritardo. Chrome e IE - un po 'meglio, ma c'è ancora un preavviso in ritardo. 6) Risoluzione dello schermo alta 1920x1080 con polilinee sulla mappa: Firefox, Chrome e IE - NIGHTMARE. È quasi impossibile trascinare la mappa.

Curiosità:

1. Il problema di cui sopra non esiste con v2 API di Google Maps descritto.
2. Il problema sopra descritto non esiste quando il mouse viene spostato a meno di 50-60 pixel al secondo. Il trascinamento è davvero scorrevole. Quando il mouse è in movimento velocemente, appare il ritardo.
3. Il http://maps.google.com il problema non esiste affatto, MA quando apro alcuni esempi di codice sugli sviluppatori, il problema guida è lì. Ecco un esempio: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/circle-simple.

penso che ho descritto il problema il più profondamente possibile e non importa quanto duramente ho cercato di aggirarlo non ho potuto trovare alcuna soluzione.

Sarò felice se qualcuno condivide la loro opinione su questo problema.

P.S. Purtroppo non ho una chiave per la v2 quindi non posso creare un esempio in cui è possibile visualizzare la mappa al di fuori del mio localhost ma ho trovato un sito web in cui vi è un confronto fianco a fianco (v2 e v3). Prova a trascinare le mappe per vedere la differenza MOLTO.

http://www.wolfpil.de/v2-v3-sidebyside.html

La risoluzione delle mappe è molto piccolo e molto probabilmente gli utenti inesperti potrebbero non vedere la differenza in modo che io ti darò anche i collegamenti separati alle mappe e basta usare Firebug o un debuger simile per rendere la risoluzione della tela più grande. Quindi vedrai di cosa sto parlando.

• mappa v2: http://www.wolfpil.de/v2.html
• mappa v3: http://www.wolfpil.de/v3.html

Answer 1

Stesso qui. Quello che ho notato è che v3 spara un sacco di eventi durante la panoramica della mappa e il browser tende a soffocare (in particolare FF). Dico questo perché ho utilizzato anche Bing Maps API e il numero di eventi al secondo per viewchange (equivalente a center_changed in Google) è molto più piccolo. Inoltre forniscono il metodo addThrottledHandler() con il quale è possibile ridurre il numero di eventi generati.

Da quello che posso dire, Google Maps sembra generare un evento center_changed per ciascun evento mousemove e prima che la visualizzazione della mappa venga aggiornata. Quindi ottieni un sacco di eventi generati ma nessuno di essi viene replicato sullo schermo; il browser soffoca sugli aggiornamenti delle mappe o potrebbe essere che la mappa sia attiva finché non ci sono più modifiche e solo dopo aggiorna la visualizzazione.

Edit: se impediamo alcuni degli mousemove eventi per raggiungere Google Maps, allora il browser non soffocare sul mousemove eventi più tutti gli altri eventi che Google Maps genera da questo evento, come center_changed, e la mappa sarà pan senza problemi .

Per fare ciò aggiungiamo un listener di eventi al div #map (lo possiamo aggiungere anche al tag body). Aggiungiamo l'evento per la fase di acquisizione. Quando il mouse si sposta sullo schermo, prima il tag body riceve l'evento quindi il nostro div #map e quindi gli elementi di Google Maps (div, tile). Questa è la fase di cattura. Segue la fase di bolla in cui l'evento torna dagli elementi di Google Maps al nostro div #map e quindi al tag body. Solitamente gli handler di eventi sono registrati per la fase di bubbling, quindi se registriamo un handler per la fase di cattura possiamo annullare l'evento e quindi non ci sarà alcuna fase di bubbling per questo evento. Ciò significa anche che Google Maps non riceverà l'evento.

È possibile aumentare i parametri period e space per terminare altri eventi. Uccidere troppi eventi significa che la mappa inizierà a saltare da una posizione all'altra. Uccidere troppo pochi significa che tutti gli eventi raggiungeranno Google Maps e il browser soffocherà sugli eventi appena generati da Google Maps e quindi la mappa passerà da una posizione all'altra. Una via di mezzo funziona meglio.

Dopo tutto ciò, Google Maps non sarà così scorrevole come Bing Maps. Questo perché Bing Maps usa l'inerzia: quando si sposta la mappa violentemente, la mappa inizierà lentamente a seguire il mouse e quindi sempre più velocemente. Questo crea davvero una padella molto liscia.

Un fatto interessante che ho trovato è che Google Chrome e Opera/Chrommium genereranno circa un evento mousemove al secondo anche se il mouse non si muove! Questo codice ucciderà anche quegli eventi (perché distance è zero per quegli eventi).

http://jsfiddle.net/uNm57/ (check console js in Firefox, si dovrebbe vedere alcuni eventi che vengono arrestati e poi uno consentiti evento)

<html> 
    <head> 
    <style type='text/css'> 
     #map { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      margin: 20px; 
     } 
    </style> 

    <script type='text/javascript'> 
     var last = {time : new Date(), // last time we let an event pass. 
        x : -100,   // last x position af the event that passed. 
        y : -100};   // last y position af the event that passed. 
     var period = 100; // ms - don't let pass more than one event every 100ms. 
     var space = 2; // px - let event pass if distance between the last and 
         //  current position is greater than 2 px. 

     function init_map() { 
      map_div = document.getElementById("map") 
      // map 
      var map_options = { 
       center: new google.maps.LatLng(45.836454, 23.372497), 
       zoom: 8 
      }; 
      map = new google.maps.Map(document.getElementById("map"), map_options); 

      // register event handler that will throttle the events. 
      // "true" means we capture the event and so we get the event 
      // before Google Maps gets it. So if we cancel the event, 
      // Google Maps will never receive it. 
      map_div.addEventListener("mousemove", throttle_events, true); 
     }; 

     function throttle_events(event) { 
      var now = new Date(); 
      var distance = Math.sqrt(Math.pow(event.clientX - last.x, 2) + Math.pow(event.clientY - last.y, 2)); 
      var time = now.getTime() - last.time.getTime(); 
      if (distance * time < space * period) { //event arrived too soon or mouse moved too little or both 
       console.log("event stopped"); 
       if (event.stopPropagation) { // W3C/addEventListener() 
        event.stopPropagation(); 
       } else { // Older IE. 
        event.cancelBubble = true; 
       }; 
      } else { 
       console.log("event allowed: " + now.getTime()); 
       last.time = now; 
       last.x = event.clientX; 
       last.y = event.clientY; 
      }; 
     }; 
    </script> 
</head> 
<body onload = "init_map()"> 
    <div id="map"></div> 
</body> 
</html>