Speichere die letzte Position der Karten

ReneRubalcava

<\/HEAD>

<\/P>

Ab und zu werde ich gebeten, eine Karte etwas tun zu lassen, was sie normalerweise nicht tut, aber eigentlich vollkommen Sinn macht. Erstaunlich, ich weiß<\/EM>.<\/P><\/P>Vor einiger Zeit fragte ein Benutzer, ob die Karte einige Informationen speichern könnte, falls der Browser geschlossen wird und später zurückgekehrt wird. Eines dieser Dinge war die letzte Position der Karte. Sie wollten auch eine automatische Speicherung bei Bearbeitungen und anderen Dingen, aber dieselben Methoden funktionieren hier ebenfalls.<\/P><\/P>Also machte ich mich als fröhlicher kleiner Entwickler ans Werk und dachte natürlich, ich benutze einfach windows.onunload<\/A>,<\/SPAN> tatsächlich ist onbeforeunload<\/A><\/SPAN> der empfohlene Weg, und um sicherzugehen verwende ich dojo\/_base\/_unload<\/A>, um eventuelle Eigenheiten zu handhaben. Ich dachte, ich nutze einfach LocalStorage<\/A> und voilà, superzufriedener Kunde. Und es ist wirklich so einfach... es sei denn, du benutzt ein iOS<\/STRONG>-Gerät<\/A> (natürlich musste es ein iOS-Problem sein<\/EM>). Also wird onbeforeunload<\/SPAN> in mobilem Safari nicht unterstützt, das war enttäuschend<\/EM>.<\/P><\/P>Dann dachte ich mir, warum nicht bei jedem extent-change<\/A><\/SPAN>-Ereignis die Position aktualisieren, wenn ein iOS-Gerät verwendet wird. Das funktionierte und ich verbrachte gute fünf Minuten damit, mir selbst auf die Schulter zu klopfen (ich hatte auch einen Juckreiz<\/EM>).<\/P><\/P>Wie sieht all dieser Wahnsinn also aus?<\/P>Ich präsentiere etwas Code!<\/STRONG><\/EM><\/P>require([\n  'esri\/_map',\n  'dojo\/_on',\n  'dojo\/_base\/_unload',\n  'dojo\/_domReady!'\n], function (\n        Map, on, baseUnload\n) {\n  var supports_local_storage = function supports_local_storage() {\n    var test = 'has_local';\n    try {\n      localStorage.setItem(test, test);\n      localStorage.removeItem(test);\n      return true;\n    } catch (e) {\n      return false;\n    }\n  };\n  var map = new Map("mapDiv", {\n    center: [-118, 34.5],\n    zoom: 8,\n    basemap: "topo"\n  });\n  if (supports_local_storage()) {\n    var vals, data, iOS, handler;\n    vals = localStorage.getItem(location.href + '--location');\n    if (vals) {\n      data = JSON.parse(vals);\n      map.centerAndZoom(data.center, data.zoom);\n    }\n    \/\/- handle this bug https:\/\/bugs.webkit.org\/show_bug.cgi?id=19324<\/A>\n    \/\/- In meinen Tests löst ein Neuladen des Browsers in iOS kein \n    \/\/- window.onbeforeunload aus, also wenn iOS, verwende das Map-Ereignis zum Schreiben von \n    \/\/- Zoom und Zentrum in LocalStorage \n    iOS = \/(iPad|iPhone|iPod)\/g.test(navigator.userAgent);\n    handler = function() {\n      var loc = {\n        center: map.extent.getCenter(),\n        zoom: map.getLevel()\n      };\n      localStorage.setItem(location.href + '--location', JSON.stringify(loc));\n    };\n    if (!iOS) {\n      baseUnload.addOnUnload(handler);\n&nbsp:& nbsp;} else {& nbsp;} on(map,& nbsp;'extent-change',& nbsp;) handler);& nbsp;}& nbsp;} });< P > Je nach Browserunterstützung müssen Sie möglicherweise < A href = "http://dojotoolkit.org/reference-guide/1.10/dojo/json.html" rel = "nofollow noopener noreferrer" target = "_blank" > dojo/json < / A > anstelle des nativen JSON verwenden , um dies zum Laufen zu bringen , du armer armer Mensch . < / P >< P > Und das ist alles . Die Position wird bei Bedarf im < SPAN style = "font-family: 'courier new', courier ; " > LocalStorage < / SPAN > gespeichert , und wenn die Anwendung erneut startet , prüft sie , ob eine gespeicherte Position vorhanden ist , und lädt sie dann wieder . < / P >< P >< / P >< P > Einfacher geht's nicht . < / P >< P >< IMG __jive_id = "83207" alt = "self-five.gif" class = "image-2 jive-image" src = "https://us.v-cdn.net/6038851/uploads/legacyfs/online/83207_self-five.gif" style = "height: auto ; " / >< / P >< P >< / P >< P > Sie können eine Demo < A href = "http://www.odoe.net/apps/savelocation/" rel = "nofollow noopener noreferrer" target = "_blank" > hier in Aktion sehen < / A > . < / P >< P >< / P >< P > Für weitere geodev Tipps und Tricks , < A href = "http://odoe.net/blog/" rel = "nofollow noopener noreferrer" target = "_blank" > besuchen Sie meinen Blog < / A > . < / P >< / BODY >< / HTML >