1

携帯サイトに羅針盤のようなものを作りたいです。これは私が持っているものです:

ここに画像の説明を入力

これは私が欲しいものです: ここに画像の説明を入力

現在の場所を localstorage に保存します。次に、たとえばさらに 1 km 離れた場所で自分の位置を確認し、2 点間の距離を確認します。

ここで、現在の場所から localstorage 内の場所への矢印が必要です。JavaScriptライブラリ「compass.js」で確認する電話の度数。

しかし今、どうすればその場所への矢印を作ることができますか?

4

1 に答える 1

0

特定の回転で画像 (矢印) を描画しようとしているかのように見えます。最新のブラウザーを想定すると (最近の携帯電話にとっては悪くない想定です)、それは非常に簡単です。imgページに を配置して、CSS 変換を適用するだけです。

CSS でのローテーションの詳細については、このサイトを参照してください: http://www.cssrotate.com/ (うわー、誰かがそのためにサイト全体を作成しました…)

ここで、JavaScript を介して回転も適用する必要があるため、CSS 属性を動的に変更する必要があります。これはまだかなり新しく、ベンダー プレフィックスがあるため、少しトリッキーですが、それほど難しいことではありません。このサイトには、それに対処する良い方法があります: http://www.javascriptkit.com/javatutors/setcss3properties.shtml

まとめると、次のようになります。

<img id="myarrow" src="myarrow.png" />
(blah)
<script>
// from http://www.javascriptkit.com/javatutors/setcss3properties.shtml
function getsupportedprop(proparray){
    var root=document.documentElement;
    for (var i=0; i<proparray.length; i++){
        if (proparray[i] in root.style){
            return proparray[i];
        }
    }
    return false;
}
var cssTransform;
function setArrowRotation(x){
    if(cssTransform===undefined){
        cssTransform=getsupportedprop(['transform','webkitTransform','MozTransform','OTransform','msTransform']);
    }
    if(cssTransform){
        document.getElementById('myarrow').style[cssTransform]='rotate('+x+'deg)';
    }
}
</script>

setArrowRotation矢印をリダイレクトする必要があるときはいつでも呼び出すだけです。

矢印を連続的に回転させるフィドルを次に示します: http://jsfiddle.net/y2sxE/

于 2013-05-06T10:30:43.990 に答える