google maps api v3 bez płynnego przeciągania

Question

Zacząłem wdrażać moje oprogramowanie za pomocą map api v3. Niestety, dowiedziałem się, że API V3 ma poważne problemy, które cofają mnie przed zdobyciem licencji biznesowej.

Moi klienci używają monitorów o rozdzielczości HD, czyli 1920 x 1080, a mapa zajmuje 90% powierzchni ekranu. Niestety pojawia się problem, o którym mówię. Kiedy klikam myszą na mapie i zaczynam ją przeciągać, to nie jest ona wygładzona. Jest to bardzo denerwujące. Cała zabawa odchodzi.

Próbowałem trochę inny scenarious korzystając Windows XP, Windows 7 i Windows 8. Przeglądarki Pracuję z są najnowsze wersje Firefox, Chrome i IE. Oto wyniki, gdy próbuję przeciągnąć mapę:

1. rozdzielczości Mały ekran 320x240: Firefox, Chrome i IE obsługiwać go bardzo dobrze. Nie można zauważyć, że przeciąganie nie jest płynne.
2. Mała rozdzielczość ekranu 320x240 z 10 poliliniami na mapie: Chrome i IE radzą sobie z tym dobrze, ale jeśli masz doświadczenie z interfejsem API w wersji 2, zauważysz różnicę. Firefox - koszmar, przeciąganie wcale nie jest płynne.
3. Średnia rozdzielczość ekranu 1024x768. Firefox - istnieje pewne niespójne opóźnienie. Chrome i IE - rodzaj płynnego przeciągania, ale jeśli poruszasz myszą, rzeczy szybko się pogarszają.
4. Średnia rozdzielczość ekranu 1024x768 z 10 poliliniami na mapie. Firefox - koszmar. Chrome i IE - zaczynasz zauważać, że jest pewne opóźnienie, ale jednocześnie wygląda ono trochę gładko.
5. Wysoka rozdzielczość ekranu 1920x1080. Firefox - ogromne opóźnienie. Chrome i IE - trochę lepiej, ale wciąż jest zauważalne opóźnienie. 6) Wysoka rozdzielczość ekranu 1920x1080 z polilinią na mapie: Firefox, Chrome reklama IE - NIGHTMARE. Niemożliwe jest przeciągnięcie mapy.

Ciekawostki:

1. Problem opisany powyżej nie istnieje z v2 API map Google.
2. Problem opisany powyżej nie występuje, gdy ruch myszy jest mniejszy niż 50-60 pikseli na sekundę. Przeciąganie jest naprawdę płynne. Gdy mysz szybko się porusza, pojawia się opóźnienie.
3. Na http://maps.google.com problem nie istnieje w ogóle, ale po otwarciu niektórych próbek kodu na temat instrukcji deweloperów jest problem. Oto przykład: https://google-developers.appspot.com/maps/documentation/javascript/examples/full/circle-simple.

Myślę, że opisałem problem tak głęboko, jak to możliwe i nie ważne jak bardzo starałem się go ominąć, nie mogłem znaleźć żadnego rozwiązania.

Cieszę się, jeśli ktoś podzieli się swoją opinią na temat tego problemu.

P.S. Niestety nie mam klucza do wersji v2, więc nie mogę utworzyć przykładu, w którym można wyświetlić mapę poza moim hostem lokalnym, ale znalazłem stronę internetową, gdzie istnieje porównanie obok siebie (v2 i v3). Spróbuj przeciągnąć mapy, aby zobaczyć BARDZO różnicę.

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

Rozdzielczość map jest bardzo małe i najprawdopodobniej niedoświadczeni użytkownicy mogą nie dostrzec różnicę, więc dadzą ci również oddzielne linki do map i po prostu trzeba używać Firebug lub podobnego debuger aby zwiększyć rozdzielczość płótna. Wtedy zobaczysz, o czym mówię.

• mapa v2: http://www.wolfpil.de/v2.html
• map v3: http://www.wolfpil.de/v3.html

Answer 1

samo tutaj. Zauważyłem, że v3 uruchamia wiele zdarzeń podczas przesuwania mapy, a przeglądarka ma tendencję do dławienia się (zwłaszcza FF). Mówię to, bo użyłem też interfejsu API Bing Maps, a liczba zdarzeń na sekundę dla viewchange (odpowiednik dla center_changed w Google) jest znacznie mniejsza. Zapewniają również metodę, dzięki której można zmniejszyć liczbę generowanych zdarzeń.

Z tego, co wiem, Mapy Google wydają się wywoływać zdarzenie center_changed dla każdego zdarzenia i zanim widok mapy zostanie zaktualizowany. Otrzymujesz wiele wygenerowanych zdarzeń, ale żaden z nich nie jest replikowany na ekranie; dławiki przeglądarki na widok mapy aktualizacje lub może być, że mapa czeka aż nie będzie żadnych zmian i tylko wtedy aktualizuje widok.

Edit: jeśli mamy zapobiec niektóre z wydarzeń mousemove dotrzeć Google Maps wówczas przeglądarka nie zadławić mousemove zdarzeń plus wszystkie inne wydarzenia, że ​​Mapy Google generuje z tego wydarzenia, jak center_changed, a mapa będzie przesuwać się płynnie .

Aby to zrobić, dodajemy detektor zdarzeń do div #map (możemy go również dodać do tagu). Dodajemy wydarzenie do fazy przechwytywania. Kiedy mysz porusza się na ekranie, najpierw znacznik body odbiera zdarzenie, a następnie nasz element div #map, a następnie elementy Google Maps (divy, kafelki). To jest faza przechwytywania. Potem następuje faza bubble, w której wydarzenie wraca z elementów Map Google do naszego div #map, a następnie do tagu body. Zazwyczaj programy obsługi zdarzenia są rejestrowane w fazie propagacji, więc jeśli zarejestrujemy procedurę obsługi dla fazy przechwytywania, możemy anulować zdarzenie, a więc nie będzie fazy propagacji dla tego zdarzenia. Oznacza to również, że Google Maps nie otrzyma wydarzenia.

Możesz zwiększyć parametry period i space, aby zabić więcej zdarzeń. Zabicie zbyt wielu wydarzeń oznacza, że ​​mapa zacznie przeskakiwać z jednej pozycji do drugiej. Zabicie zbyt małej ilości osób spowoduje, że wszystkie wydarzenia dotrą do Map Google, a przeglądarka będzie dusić nowo wygenerowane zdarzenia z Map Google, więc mapa przeskoczy z jednej pozycji na drugą. Niektóre środkowe podłoże działa najlepiej.

Teraz po tych wszystkich, Mapy Google nie będą tak gładkie jak Mapy Bing. Dzieje się tak dlatego, że Bing Maps używa bezwładności: kiedy gwałtownie przesuniesz mapę, mapa zacznie powoli podążać za myszą, a następnie szybciej i szybciej. Tworzy to bardzo gładką patelnię.

Ciekawostką jest, że znalazłem to, że Google Chrome i Opera/Chrommium wygenerują około jednego zdarzenia mousemove na sekundę, nawet jeśli mysz się nie poruszy! Ten kod również zabije te zdarzenia (ponieważ distance ma wartość zero dla tych zdarzeń).

http://jsfiddle.net/uNm57/ (sprawdź konsoli JS w Firefoksie, powinieneś zobaczyć kilka zdarzeń, które są zatrzymywane, a następnie jeden dozwolony zdarzenia)

<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>