Salvar última localização dos mapas

ReneRubalcava

<\/HEAD>

<\/P>

De vez em quando me pedem para fazer um mapa fazer algo que normalmente não faria, mas que na verdade faz todo sentido. Surpreendente, eu sei<\/EM>.<\/P><\/P>Há algum tempo um usuário perguntou se o mapa poderia salvar algumas informações caso ele precisasse fechar o navegador e voltar depois. Uma dessas coisas era a última localização do mapa. Eles também queriam salvamento automático nas edições e outras coisas, mas os mesmos métodos aplicados aqui funcionarão para isso também.<\/P><\/P>Então eu comecei como um desenvolvedor feliz e claro que pensei, vou usar windows.onunload<\/A>\u200b,<\/SPAN> na verdade onbeforeunload<\/A><\/SPAN> é a forma recomendada, e para garantir vou usar dojo\/_base\/unload<\/A> para lidar com quaisquer peculiaridades. Pensei em usar LocalStorage<\/A> e voilà, cliente super feliz. E realmente é simples assim... a menos que você esteja usando um dispositivo iOS<\/STRONG><\/A> (claro que tinha que ser um problema no iOS<\/EM>). Então onbeforeunload<\/SPAN> não é suportado no Safari móvel, isso foi decepcionante<\/EM>.<\/P><\/P>Depois pensei, bem, por que não atualizar a localização em cada evento extent-change<\/A><\/SPAN> ao usar um dispositivo iOS. Isso funcionou e passei bons cinco minutos me parabenizando (eu também estava coçando<\/EM>).<\/P><\/P>Então como toda essa loucura fica? <\/P>Apresento um pouco de código!<\/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    \/\/- lidar com esse bug https:\/\/bugs.webkit.org\/show_bug.cgi?id=19324<\/A>\n    \/\/- Nos meus testes, um refresh do navegador no iOS não dispara\n    \/\/- window.onbeforeunload, então se for iOS, use evento do mapa para escrever\n    \/\/- zoom e centro no 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.&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {&nbpsp;} else {
on(map, 'extent-change', handler);
}
}
});

Dependendo do suporte do navegador, você pode precisar usar

dojo/json<2F>A em vez do JSON nativo para fazer isso funcionar seu pobre alma coitada.<2F>P>2020E isso é tudo. A localização é salva no LocalStorage conforme necessário e quando o aplicativo inicia novamente, ele verifica se há uma localização salva e a carrega novamente.<2F>P>20

20Fácil assim.<2F>P>20

2020

20Você pode ver uma demonstração

aqui em ação.<2F>P>2020Para mais dicas e truques geodev, confira meu blog.<2F>P>3CBODYHTML