지점 화살표 위치 (geolocation)

Question

모바일 웹 사이트에서 일종의 나침반을 만들고 싶습니다. 이것은 내가 무엇을 가지고 :

는 내가 로컬 스토리지에 내 현재 위치를 저장 : 이것은 내가 원하는 무엇

. 그런 다음 1km 더 멀리 나는 내 위치를 확인하고 두 지점 사이의 거리를 확인합니다.

이제 현재 위치에서 localstorage의 위치로 화살표를 원합니다. 자바 스크립트 라이브러리 "compass.js"로 확인한 전화 번호입니다.

하지만 지금 어떻게 그 위치로 화살표를 만들 수 있습니까?

Answer 1

주어진 회전에서 이미지 (화살표)를 그리는 것처럼 보입니다. 글쎄, 우리가 현대적인 브라우저 (요즘의 전화에 대한 나쁜 가정이 아니라)를 가정한다면, 그것은 매우 쉽습니다. 귀하의 페이지에 img을 가지고 CSS 변환을 적용하십시오.

CSS의 회전에 대한 추가 정보를 원하시면이 사이트를 참조하십시오 http://www.cssrotate.com/은 (와우, 누군가가 그것을 위해 전체 사이트를 만든 ...)

지금 당신은 또한 당신이 변경해야합니다, 그래서 자바 스크립트를 통해 회전을 적용 할 동적으로 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 당신이 화살표를 리디렉션해야 할 때마다.