Kaart laatste locatie opslaan

ReneRubalcava

<\/HEAD>

<\/P>

Af en toe word ik gevraagd om een kaart iets te laten doen wat hij normaal niet zou doen, maar wat eigenlijk perfect logisch is. Verbluffend, ik weet het.<\/EM><\/P><\/P>Een tijd geleden vroeg een gebruiker of de kaart wat informatie kon opslaan als ze de browser moesten sluiten en later terugkwamen. Een van die dingen was de laatste locatie van de kaart. Ze wilden ook automatisch opslaan bij bewerkingen en andere dingen, maar dezelfde methoden die hier worden toegepast werken daar ook voor.<\/P><\/P>Dus ging ik aan de slag als een vrolijke kleine ontwikkelaar en natuurlijk dacht ik, ik gebruik gewoon windows.onunload<\/A>,<\/SPAN> eigenlijk is onbeforeunload<\/A><\/SPAN> de aanbevolen manier, en om veilig te zijn gebruik ik dojo\/_base\/_unload<\/A> om eventuele eigenaardigheden af te handelen. Ik dacht dat ik gewoon LocalStorage<\/A> zou gebruiken en voila, superblijde klant. En het is echt zo simpel... tenzij je een iOS<\/STRONG>-apparaat gebruikt<\/A> (natuurlijk moest het een iOS-probleem zijn<\/EM>). Dus onbeforeunload<\/SPAN> wordt niet ondersteund in mobile Safari, dat was balen<\/EM>.<\/P><\/P>Toen dacht ik, waarom niet de locatie bijwerken bij elk extent-change<\/A><\/SPAN>-evenement wanneer je een iOS-apparaat gebruikt. Dit werkte en ik heb mezelf vijf minuten lang op de schouder geklopt (ik had ook een jeuk<\/EM>).<\/P><\/P>Dus hoe ziet al deze waanzin eruit?<\/P>Ik presenteer wat code!<\/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);
    }
    \/\/- handel deze bug https:\/\/bugs.webkit.org\/show_bug.cgi?id=19324<\/A>
    \/\/- In mijn tests zal een verversing van de browser in iOS geen
    \/\/- window.onbeforeunload activeren, dus als iOS, gebruik kaartgebeurtenis om
    \/\/- zoom en centrum naar localStorage te schrijven
    iOS = \/(iPad|iPhone|iPod)\g.test(navigator.userAgent);
    handler = function() {
      var loc = {
        center: map.extent.getCenter(),
        zoom: map.getLevel()
      };
      localStorage.setItem(location.href + '--location', JSON.stringify(loc));
 &nbsp.&nbpsp;} ;
& nbsp ; & nbsp ; & nbsp ; if (!iOS) {
& nbsp ; & nbsp ; & nbsp ; & nbsp ; baseUnload.addOnUnload(handler);
& nbsp ; & nbsp ; & nbsp ; } else {
& nbsp ; & nbsp ; & nbsp ; & nbsp ; on(map, 'extent-change', handler);
& nbsp ; & nbsp ; & nbsp ; }
& nbsp ; }
});< / PRE >< P >< / P >< P > Afhankelijk van browserondersteuning moet u mogelijk < A href = "http : / / dojotoolkit.org / reference-guide / 1.10 / dojo / json.html " rel = "nofollow noopener noreferrer" target = "_blank" > dojo / json < / A > gebruiken in plaats van de native JSON om dit werkend te krijgen jij arme arme ziel.< / P >< P > En dat is alles. De locatie wordt indien nodig opgeslagen in < SPAN style = "font-family: 'courier new', courier; " > LocalStorage < / SPAN > en wanneer de applicatie opnieuw start, controleert hij of er een opgeslagen locatie is en laadt deze opnieuw.< / P >< P >< / P >< P > Makkelijk sausje.< / 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 > Je kunt een demo zien < A href = "http : / / www.odoe.net / apps / savelocation / " rel = "nofollow noopener noreferrer" target = "_blank" > hier in actie < / A > .< / P >< P >< / P >< P > Voor meer geodev tips en trucs, < A href = "http : / / odoe.net / blog / " rel = "nofollow noopener noreferrer" target = "_blank" > bekijk mijn blog < / A > .< / P >< / BODY >< / HTML >