Google Mapを回転させる方法


css3とjavascriptで回します。

htmlで以下のように箱を用意し

cssで大きさ等を指定しておき

jsで回す。

 

こちらで実演:みんなでつくる避難マップ にげるーと

端末のコンパスを使って方角を取得し、それを使って地図とコンパスを回している。

下のコンパスは方角を表示しており、「地図を回転する」を押すと地図自体が回転する。

ただし、回転した地図のクリックは、回転していない状態でクリックした座標を認識するので、スクロールやクリック位置がずれている。そのため、動かす時は「地図を回転しない」をクリックしてからにしたほうがいいかも。

使い勝手を考慮し、ボタンでtoggleするようにした。

IMG_0085

回転しない状態
IMG_0087

回転した状態

IMG_0086これで、青い線が前に見えるようにして、その通りに進めば目的地にたどり着ける。

災害時とか、知らないところでとか、パニックしているときにはけっこう大事な機能じゃなかろうか。

 

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL