Dieser Blogbeitrag von Steve Fenton fiel mir neulich in meine Feeds. Ich hatte noch nie von HERE Maps gehört, aber anscheinend sind sie irgendwie einbettbar, ähnlich wie Google Maps. Das Problem ist, dass man mit dem Scrollrad in HERE Maps hinein- und herauszoomt. Stellen Sie sich also vor, Sie scrollen eine Seite nach unten, Ihr Cursor (oder Finger) landet auf der HERE Map und Sie können die Seite nicht mehr weiter nach unten scrollen, da dieses Scroll-Ereignis von der Karte erfasst wird und zu Karten-Zoom wird.
Steves Lösung: Legen Sie einen „Coverer“ <div> über die Karte, wenn ein Scroll-Ereignis auf dem window beginnt, und entfernen Sie ihn nach kurzer Verzögerung (wenn das Scrollen „aufhört“). Diese Lösung spricht mich an, da ich nicht nur in der Vergangenheit ähnliche Lösungen für eingebettete Karten programmiert habe, sondern wir heute auf CodePen eine ähnliche Lösung implementiert haben. Auf CodePen können Sie das „Vorschaufenster“ vergrößern, das ein <iframe> des von Ihnen geschriebenen Codes ist. Wenn Sie zu schnell ziehen, kann Ihr Mauscursor (oder Touch-Ereignis) dazu führen, dass Sie sich vom ziehbaren Element weg bewegen, möglicherweise sogar auf den <iframe> selbst. Wenn das passiert, schluckt der <iframe> das Ereignis und das von Ihnen versuchte Ändern der Größe funktioniert nicht mehr richtig. Um dies zu verhindern, legen wir während des Ziehens einen „abgedeckten“ <div> über den <iframe> und entfernen ihn, wenn Sie aufhören zu ziehen.
Beim Gedanken an Karten fällt mir jedoch Brad Frosts Idee von Adaptive Maps ein, die bereits 2012 dokumentiert wurde. Die Idee ist, dass das Einbetten einer Karte auf einem kleinen mobilen Gerät keine gute Idee ist. Der Platz ist eng, sie können das Laden der Seite verlangsamen und, wie Steve fast ein Jahrzehnt später erlebt hat, sie können Benutzer beim Scrollen durch die Seite stören. Brads Lösung ist, für kleine Bildschirme ein Bild einer Karte (das immer noch API-gesteuert sein kann) bedingt auszuliefern, mit einem Link „Karte anzeigen“, der zu einer Vollbild-Kartenansicht führt, wahrscheinlich innerhalb der nativen Karten-App selbst. Große Bildschirme können weiterhin die interaktive Karte haben, obwohl ich argumentieren würde, dass das Bild-das-zu-einem-Kartendienst-verlinkt ein cleveres Muster für jeden Browser mit weniger technischer Schuld sein könnte.
Ich habe Steves Fix für die HERE Maps implementiert, die wir in unserer Webplattform verwenden, und es funktioniert hervorragend! :)
Falls Sie sich fragen: HERE hieß früher Nokia Maps, bis es von einigen deutschen Autoherstellern übernommen wurde. Sie finden es hauptsächlich in Navigationssystemen für Autos einer breiten Palette von Marken (von Toyota über Chevrolet bis BMW), während die mobile/webliche Nutzung aus ihrer Sicht nur ein Nebengeschäft ist.
Karten-Dienste bieten Einstellungen, um das Scroll-Ereignis auf ihren Karten zu deaktivieren (auch HERE Maps). Nur das Problem eines zu groß dimensionierten Kartencontainers auf einem kleinen Touchscreen ist problematisch. Der Benutzer kann in eine Situation geraten, in der er in der Karte gefangen ist, weil im Viewport nichts von der Website zum Greifen (Scrollen) da ist.
Sebastian, die Einstellung zum Deaktivieren des Scroll-Ereignisses bei Here Maps ist in ihrer neuesten Version fehlerhaft, daher ist ein vorübergehender „Fix“ erforderlich.
Warum nicht einfach scrollwheel: false verwenden?