Uložit poslední polohu mapy

ReneRubalcava

<\/HEAD>

<\/P>

Občas mě někdo požádá, abych mapě přidal funkci, kterou normálně nemá, ale která dává naprosto smysl. Úžasné, vím<\/EM>.<\/P><\/P>Před časem se uživatel zeptal, jestli by mapa mohla uložit nějaké informace, pokud by musel zavřít prohlížeč a později se vrátit. Jednou z těchto věcí byla poslední poloha mapy. Také chtěli automatické ukládání při úpravách a další věci, ale stejné metody použité zde budou fungovat i pro to.<\/P><\/P>Tak jsem se jako šťastný malý vývojář pustil do práce a samozřejmě jsem si řekl, že prostě použiju windows.onunload<\/A>,<\/SPAN> vlastně onbeforeunload<\/A><\/SPAN> je doporučený způsob, a pro jistotu použiji dojo\/_base\/unload<\/A>, aby se vyřešily případné zvláštnosti. Říkal jsem si, že prostě použiju LocalStorage<\/A> a voilà, super spokojený zákazník. A opravdu je to tak jednoduché... pokud nepoužíváte zařízení iOS<\/STRONG><\/A> (samozřejmě to musel být problém na iOS<\/EM>). Takže onbeforeunload<\/SPAN> není podporován v mobilním Safari, to byla škoda<\/EM>.<\/P><\/P>Pak jsem si řekl, proč neaktualizovat polohu při každé události extent-change<\/A><\/SPAN>, když používám zařízení iOS. To fungovalo a strávil jsem dobrých pět minut tím, že jsem si tleskal po zádech (měl jsem také svědění<\/EM>).<\/P><\/P>Jak tedy vypadá celý tenhle šílený kód?<\/P>Představuji vám kus kódu!<\/STRONG><\/EM><\/P>require([
  'esri\/_map',
  'dojo\/_on',
  'dojo\/_base\/_unload',
  'dojo\/_domReady!'
], function (
        Map, on, baseUnload
) {
  var supports_local_storage = function supports_local_storage() {
    var test = 'has_local';
    try {
      localStorage.setItem(test, test);
      localStorage.removeItem(test);
      return true;
    } catch (e) {
      return false;
    }
  };
  var map = new Map("mapDiv", {
    center: [-118, 34.5],
    zoom: 8,
    basemap: "topo"
  });
  if (supports_local_storage()) {
    var vals, data, iOS, handler;
    vals = localStorage.getItem(location.href + '--location');
    if (vals) {
      data = JSON.parse(vals);
      map.centerAndZoom(data.center, data.zoom);
    }
    \/\/- řešení tohoto bugu https:\/\/bugs.webkit.org\/show_bug.cgi?id=19324<\/><\/>

    \/\/- Při mém testování obnovení prohlížeče na iOS nespustí
    \/\/- window.onbeforeunload, takže pokud je to iOS, použijte událost mapy k zápisu
    \/\/- zoomu a středu do localStorage
    iOS = \/(iPad|iPhone|iPod)\//g.test(navigator.userAgent);
    handler = function() {
      var loc = {
        center: map.extent.getCenter(),
 &nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; zoom: map.getLevel()
&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; };
&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; localStorage.setItem(location.href + '--location', JSON.stringify(loc));
& nbsp.; };
& nbsp.; if (!iOS) {
& nbsp.; & nbsp.; baseUnload.addOnUnload(handler);
& nbsp.; } else {
& nbsp.; & nbsp.; on(map, 'extent-change', handler);
& nbsp.; }
& nbsp.; }
});< /PRE >< P >< / P >< P > V závislosti na podpoře prohlížeče možná budete muset místo nativního JSON použít < A href = "http://dojotoolkit.org/reference-guide/1.10/dojo/json.html" rel = "nofollow noopener noreferrer" target = "_blank" > dojo/json < /A > , abyste to rozběhali vy chudáku.< /P >< P > A to je vše. Poloha se podle potřeby ukládá do < SPAN style = "font-family: 'courier new', courier;" > LocalStorage < /SPAN > a když aplikace znovu startuje, zkontroluje se, zda existuje uložená poloha a ta se znovu načte.< /P >< P >< /P >< P > Jednoduché jako facka.< /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 > Demo můžete vidět < A href = "http://www.odoe.net/apps/savelocation/" rel = "nofollow noopener noreferrer" target = "_blank" > v akci zde < /A > .< /P >< P >< /P >< P > Pro více tipů a triků z geodev navštivte můj blog na adrese < A href = "http://odoe.net/blog/" rel = "nofollow noopener noreferrer" target = "_blank" > zde < /A > .< /P >< /BODY >< /HTML >