Einbetten von Google Maps auf einer Seite ohne das überschreiben des iPhone-scroll-Verhalten

Arbeite ich an der Optimierung einer Website für mobile. Wir haben auch einen Standort-Seite mit Informationen über einen Ort und eine Karte von der Lage über die Google Maps API. (v2 - ich weiß, es ist veraltet aber ich habe mich nicht gerechtfertigt, die Zeit zu aktualisieren, "wenn es nicht kaputt..") ich möchte an einem einspaltigen layout mit Basisinformationen, gefolgt von der Karte, gefolgt von mehr Informationen.

Nun wenn ich mit meinem finger nach unten scrollen, die mobile Seite auf einem iPhone, sobald ich auf die Karte, die die Seite scrollen ist außer Kraft gesetzt und die Karte startet schwenken. Die einzige Möglichkeit für mich, Blättern Sie weiter unten auf der Seite ist mein finger oberhalb oder unterhalb der Karte, vorausgesetzt, ein solcher Raum verfügbar ist. Wenn ich deaktivieren Sie die Karte ziehen, wenn ich dann starten, nach unten scrollen und man die Karte nicht pan, aber die Seite nicht scrollen, entweder. Ich behandeln möchte die Karte als statisches Bild, das ich Blättern kann Vergangenheit, aber immer noch erlauben Sie die zoom-Schaltflächen und kann die Karte neu gezeichnet werden, mit Anweisungen, die durch ein select-Feld habe ich codiert, so ein wörtliche statisches Bild ist keine Lösung.

Fand ich dieser post erforderlich, dass eine ähnliche Funktionalität, aber es ist mit v3. Ich denke, alles, was ich zu tun ist, "hinzufügen von touch events auf der map-container," aber ich bin nicht vertraut mit diesen Teil von javascript, und was ich unten nicht erlauben, normal zu scrollen. Muss ich in den sauren Apfel beißen auf die v3, oder habe ich einen bug über das hinzufügen von touch events, hat einen einfachen javascript-Korrektur zu tun, was ich will?

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    geocoder = new GClientGeocoder();
  }
}

function showAddress(address, zoom) {
//clipped... this part works fine
}

//These three lines create a map that my finger pans
initialize(); 
showAddress("[clipped.. street, zip code]");
map.addControl(new GSmallZoomControl3D());

//This stops the map pan but still prevents normal page finger scrolling
map.disableDragging();

//If done right could this allow normal page finger scrolling??
var dragFlag = false;
map.addEventListener("touchstart", function(e){
   dragFlag = true;
   start = (events == "touch") ? e.touches[0].pageY : e.clientY; 
},true);
map.addEventListener("touchend", function(){ 
dragFlag = false; 
}, true);
map.addEventListener("touchmove",function(
if ( !dragFlag ) return;
end = (events == "touch") ? e.touches[0].pageY : e.clientY;   
window.scrollBy( 0,( start - end ) ); 
}, true);

Habe ich auch versucht, anstelle map.addEventListener mit document.getElementById("map_canvas").addEventListener oder document.addEventListener ohne Erfolg.

  • Die Karte ist in einem iframe gehostet bei Google und es sei denn, es ist etwas, Google mal, Sie wechseln mit JavaScript, sind Sie wahrscheinlich kein Glück. API v2 wurde als veraltet markiert, so dass, wenn Sie etwas gefunden, mit version 3 funktioniert, warum machen Sie nicht den Schalter? API v3 hat viel mehr Funktionen und ist einfacher zu bedienen, IMHO, sowieso. (Kein API-Schlüssel erforderlich, für einen!)
  • Ich suchte in v3, bevor dieses posting. Kein API-key ist schön, aber wir müssen die geocoding-Funktion, die wie es aussieht, erfordert einen API-Schlüssel, und es sieht aus wie seine Antwort ist komplexer, als es auf v2, und wir haben noch ein paar andere Seiten, die es verwenden, als gut. Grundsätzlich bin ich versucht zu vermeiden, ein paar Stunden nach der Umkodierung für die v3 mit einem schnellen v2 beheben, aber wenn das nicht möglich ist werde ich geben, und die sinnvollen upgrade.
  • Ich habe jetzt aktualisiert auf v3 aber nicht die touch-events zu arbeiten. Ich brütete über meinem javascript für die Fehler, aber ich habe Probleme dabei, die touch-events zu reagieren, überhaupt nichts.
  • Ihre beste Wette wäre, um einfach löschen dieser ganzen Frage, und starten Sie eine neue Frage für dieses neue Problem.
InformationsquelleAutor joshuahedlund | 2011-09-23
  1. 18

    Ich löste es durch ein Upgrade auf v3 und dann erkennen eine grundlegende javascript-Fehler in meinem Gebrauch von dem code aus der Lösung oben verlinkten. Der Schlüssel war

    start = (events == "touch") ? e.touches[0].pageY : e.clientY;

    Muss der Benutzer haben bereits die Einstellung der Ereignisse, die variable irgendwo außerhalb der präsentierte code, da es aussieht wie die passende Zuordnung ist für die touch-events und die else-Anweisung ist für wichtige Ereignisse. Da ich aber nicht ein Ereignisse, Variablen, es war standardmäßig auf die falsche Zuordnung. Ich habe einfach geändert mine zu start = e.touches[0].pageY (und Tat das gleiche für den touchend-Ereignis) und jetzt funktioniert alles.

    Jedoch wechselte ich wieder auf v2 zu sehen, ob es funktionieren würde, mit diesem javascript-Fehler korrigiert, und es kam nicht. So wie es aussieht habe ich keine Zeit verschwenden, ein Upgrade auf v3, weder bei der Ermittlung dieser spezifischen Lösung noch in mir, bis für zukünftige Kompatibilität.

    In Schluss, wenn Sie möchten, einbetten von Google Maps auf einer mobile-Seite und in der Lage sein zu Blättern Vergangenheit, so müssen Sie mit API v3, deaktivieren, verschieben, hinzufügen von touch events. Ich machte ein paar kleinere Veränderungen an meinem code, der hier vorgestellt für alle, die profitieren können, in die Zukunft:

    function initialize() 
{
    geocoder = new google.maps.Geocoder();
    var myOptions = {
       mapTypeId: google.maps.MapTypeId.ROADMAP             
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function showAddress(address, zoom) 
{
   if (geocoder) 
   {
      geocoder.geocode( { 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            map.setOptions( { zoom: zoom });
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
         }
      });
   }
}

initialize(); 
showAddress("'.$geocode_address.'");

map.setOptions( { draggable: false });

var dragFlag = false;
var start = 0, end = 0;

function thisTouchStart(e)
{
    dragFlag = true;
    start = e.touches[0].pageY; 
}

function thisTouchEnd()
{
    dragFlag = false;
}

function thisTouchMove(e)
{
    if ( !dragFlag ) return;
    end = e.touches[0].pageY;
    window.scrollBy( 0,( start - end ) );
}

document.getElementById("map_canvas").addEventListener("touchstart", thisTouchStart, true);
document.getElementById("map_canvas").addEventListener("touchend", thisTouchEnd, true);
document.getElementById("map_canvas").addEventListener("touchmove", thisTouchMove, true);
    • Hinweis: ich weiß, ich könnte einfach draggable: false in der ersten Möglichkeiten, aber die initialize () - Funktion ist eine generische Funktion, die verwende ich auch für andere maps, die ich will, um verschoben zu werden. map.setOptions ist ein Weg, um passen Sie die einzelnen anzeigen nach Erstellung.
    • Ein Hinweis für die Leute mit jQuery: Sie müssen zum abrufen der touches Attribut aus der ursprünglichen Veranstaltung, nicht die jQuery-verpackt Veranstaltung. Zum Beispiel: $("#map_canvas").on("touchstart", function(e) { dragFlag = true; start = e.originalEvent.touches[0].pageY; });
    • löst problem mit dem scrollen auf einer Seite in voller Karte auf einem Windows Phone 8.1-Gerät, danke !
    InformationsquelleAutor joshuahedlund
Schreibe einen Kommentar