Guardar la última ubicación de los mapas

ReneRubalcava

<\/HEAD>

<\/P>

De vez en cuando me piden que haga que un mapa haga algo que normalmente no haría, pero que en realidad tiene perfecto sentido. Asombroso, lo sé<\/EM>.<\/P><\/P>Hace un tiempo un usuario preguntó si el mapa podía guardar alguna información si tenían que cerrar el navegador y volver más tarde. Una de estas cosas era la última ubicación del mapa. También querían guardado automático en las ediciones y otras cosas, pero los mismos métodos aplicados aquí funcionarán para eso también.<\/P><\/P>Así que me puse manos a la obra como un feliz desarrollador y por supuesto pensé, simplemente usaré windows.onunload<\/A>\u200b,<\/SPAN> en realidad onbeforeunload<\/A><\/SPAN> es la forma recomendada, y para estar seguro usaré dojo\/_base\/unload<\/A> para manejar cualquier peculiaridad. Pensé que simplemente usaría LocalStorage<\/A> y voilà, cliente súper feliz. Y realmente es así de simple... a menos que estés usando un dispositivo iOS<\/STRONG><\/A> (por supuesto tenía que ser un problema de iOS<\/EM>). Así que onbeforeunload<\/SPAN> no está soportado en mobile Safari, eso fue una decepción<\/EM>.<\/P><\/P>Luego pensé, bueno, ¿por qué no actualizar la ubicación en cada evento extent-change<\/A><\/SPAN> cuando se usa un dispositivo iOS? Esto funcionó y pasé unos buenos cinco minutos dándome palmaditas en la espalda (también tenía un picor<\/EM>).<\/P><\/P>¿Entonces cómo se ve toda esta locura?<\/P>¡Presento algo 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    \/\/- manejar este error https:\/\/bugs.webkit.org\/show_bug.cgi?id=19324<\/A>\n    \/\/- En mis pruebas, una actualización del navegador en iOS no disparará\n    \/\/- window.onbeforeunload, así que si es iOS, usa el evento del mapa para escribir\n    \/\/- zoom y centro a 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 &nbsp.&nbpsp;.localStorage.setItem(location.href + '--location', JSON.stringify(loc));
};
if (!iOS) {
baseUnload.addOnUnload(handler);
} else {
on(map, 'extent-change', handler);
}
}
});

Dependiendo del soporte del navegador, puede que necesites usar

dojo/json en lugar del JSON nativo para hacer esto funcionar pobre alma mía.< / P >< P > Y eso es todo. La ubicación se guarda en LocalStorage según sea necesario y cuando la aplicación se inicia nuevamente, verifica si hay una ubicación guardada y la carga de nuevo.< / P >< P >< / P >< P > Fácil como la salsa.< / 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 > Puedes ver una demo < A href = "http://www.odoe.net/apps/savelocation/" rel = "nofollow noopener noreferrer" target = "_blank">en acción aquí. < / P >< P >< / P >< P > Para más consejos y trucos geodev, < A href = "http://odoe.net/blog/" rel = "nofollow noopener noreferrer" target = "_blank">visita mi blog. < / BODY >< / HTML >