マップの最後の位置を保存する

ReneRubalcava

<\/HEAD>

<\/P>

時々、マップに通常はしないことをさせてほしいと頼まれますが、実際には完璧に理にかなっています。驚くべきことに、そうなんです<\/EM>。<\/P><\/P>少し前に、ユーザーからブラウザを閉じて後で戻ってきたときに情報を保存できるかどうか尋ねられました。その一つがマップの最後の位置でした。編集の自動保存など他のことも望んでいましたが、ここで使う方法はそれにも適用できます。<\/P><\/P>それで私は幸せな小さな開発者のように取り組み始め、もちろんこう思いました。windows.onunload<\/A>を使おう、実際にはonbeforeunload<\/A><\/SPAN>が推奨されているし、安全のためにdojo\/_base\/unload<\/A>を使ってあらゆる問題に対処しよう。LocalStorage<\/A>を使えば、お客様は超ハッピーになるだろう。実際それは本当に簡単です... ただしiOS<\/STRONG>デバイスを使っている場合は別です<\/A> (もちろんiOSの問題でなければならなかった<\/EM>)。だからonbeforeunload<\/span>はモバイルSafariではサポートされていません、それは残念でした<\/EM>。<\/P><\/P>それから考えました。iOSデバイスを使っている場合は各extent-change<\/A><\/span>イベントで位置情報を更新すればいいじゃないかと。これがうまくいき、私は5分ほど自分を褒めました(それにかゆみもありました<\/EM>)。<\/P><\/P>では、この狂気はどんな感じでしょう？<\/P>コードをご紹介します！<\/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);
    }
    // このバグを処理 https:\/\/bugs.webkit.org\/show_bug.cgi?id=19324<\/A>
    // 私のテストでは、iOSでブラウザをリフレッシュしても
    // window.onbeforeunload は発火しません。そのためiOSの場合は
    // マップイベントを使ってズームと中心をlocalStorageに書き込みます
    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));
    };
    if (!iOS) {
 &nbsp.&nbpsp;baseUnload.addOnUnload(handler);
 } else {
on(map, 'extent-change', handler);
}
}
});

ブラウザのサポート状況によっては、ネイティブJSONの代わりに

dojo/jsonを使う必要があるかもしれません、かわいそうなあなた。
これだけです。必要に応じて位置情報がLocalStorageに保存され、アプリケーションが再起動すると保存された位置があれば読み込まれます。

簡単ですね。

こちらでデモを見ることができます こちらからご覧ください<\A>。

さらに多くのgeodevのヒントやコツについては、 私のブログをご覧ください。

<\BODY><\HTML>