Point arrow to location (geolocation)

Question

Я хочу сделать своего рода компас на мобильном сайте. Это то, что у меня есть:

Это то, что я хочу:

я сохранить текущее местоположение в LocalStorage. Затем, например, на 1 км далее я проверяю свое местоположение и проверяю расстояние между двумя точками.

Теперь я хочу стрелку от текущего местоположения до местоположения в localstorage. Степени с телефона я проверяю с помощью библиотеки javascript «compass.js».

Но теперь, как я могу сделать стрелку в нужное место?

Answer 1

Похоже, вы пытаетесь нарисовать изображение (стрелку) при заданном вращении. Ну, если мы предполагаем, что современный браузер (не плохое предположение для телефонов в наши дни), это довольно легко. Просто разместите на своей странице 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/