↑Ｂ

ツイート
2010.03.25

JavaScriptで作るスクロール地図最小セット

JavaScriptって面白いね。下記のマップをスクロールしてみてください。動く？プログラムはたったこれだけです。256×256pxで分割作成した日本地図をタイル状に表示して、スクロールがあった場合は足りない部分を補完して読み込んでいきます。コツはスクロール中に読み出すと重いので、ドラッグが終わった後に読み出す点かな。google mapも同じような動きだよね。

初めてJavaScriptいじったけど文法もperlとほとんど同じで困った点は整数化する時のintが無いぐらいでした。なんだよMath.roundって長いよ。



個人的メモ

• JavaScriptは読み込む順番に注意。htmlのインラインに書いた内容と外部ファイルのスクリプトは並行して読み込まれ、関数などは読み込まれた時点で定義される。未定義のものを使おうとするとエラーになるが、読み込むスピードにはブラウザごとの差があり、firefoxではOKだけど、IEではエラーなんてことが起こりうるみたい。(参考)
• IEで謎のエラーが起こるのでスクリプトファイルの文字コードはUTF8が無難。

参考にしたページ

• JavaScript基礎文法最速マスター
• スクロール地図を作ろう
• JavaScriptの型変換ってこうやるんだ・・・(IDEA*IDEAさん)

最近、位置情報に特化したデータベースエンジン作ったところなので、このスクロールマップと組み合わせて、しばらく楽しめそう。

Category:位置情報・GPS・地図

Follow @fetuin

コメント

いいっすね！=4
001 [03.25 13:22].:ついでにXMLも覚えるとよいですよー ↑(1)
002 [03.25 13:49]ふぇちゅいん★24:>>001 XML使いまくってますよ、Pure Perlで出来たこのライブラリhttp://www.kawa.net/works/perl/treepp/tr....使って、今やサーバー間通信はXML化してますー。国土地理院の数値地図も一括読み込み出来て便利！ ↑(1)
003 [03.25 13:51]ふぇちゅいん★24:最近覚えた俺的3種の神器。XMLとツリー型ハッシュとリファレンスを使ってデータの処理スピードが爆速化し色々な新しい可能性が見えてきたー ↑(1)
004 [03.25 14:44] @Opera:こんな大規模なサイトを作ってるのにSQLもJavaScriptも使ってない不思議なふぇちゅいんﾀﾝ。。 ↑
005 [03.25 16:46]匿名@InfoWeb:サイトのセキュリティを考えたらJavaScriptを使わないという選択は正しい ↑
006 [03.25 17:57]匿名@Dion:JavaScriptを使わないという選択で使っていなかったのか？ ↑
007 [03.25 19:00]飯尾@OCN:四半世紀前にmz-2000でラリーXもどきを作った時もこんな感じだった。 ── BASICでね。 ↑
008 [03.26 01:49]横★26:あれ京ぽん祭りの頃もJavascriptには手をつけてなかったのか…。 ↑

名前 ↑Ｂ

ツイート
コメント(※改行は省略されます）

※３回以上の連続書き込み不可

この記事のアクセス数:


→カテゴリー：位置情報・GPS・地図(記事数:262)
アクセス数の多い記事(過去1ヶ月)

すべて見る

この地図の作成に当たっては、国土地理院長の承認を得て、同院発行の基盤地図情報を使用した。（承認番号　平22業使、第40号）