2012-05-12 3 views
4

Google지도의 마커를 회전하려면이 Show wind direction on Google Maps을 사용했지만 각도도는 220으로 설정되었습니다. 이제 사용자가 각도를 입력하고 버튼이 회전 된 마커를 표시 할 때 구글 맵에. 이 코드를 편집하여 텍스트 상자에서 값을 가져올 수 있습니까? <canvas>으로 가능합니까?Google지도에서 마커 회전

코드는 여기에 있습니다 :

var angleDegrees = 220; 

으로 :

<body onload="xz()" onunload="GUnload()"> 

<div id="map" style="width: 400px; height: 300px"></div> 

<script type="text/javascript"> 

function xz() 
{ 

if (GBrowserIsCompatible()) { 
    var angleDegrees = document.getElementById('angle').value; 
    var map = new GMap2(document.getElementById("map")); 
    var arrowIcon = new Image(); 

    var marker = new ELabel(new GLatLng(55.50, 2.50), '<canvas id="arrowcanvas" width="32" height="32"><\/canvas>', null, new GSize(-16, 16)); 

    arrowIcon.src = "http://i49.tinypic.com/mafqee.png"; 

    map.addOverlay(marker); 

    map.setCenter(new GLatLng(53.85, -1.80), 3); 

    var canvas = document.getElementById("arrowcanvas").getContext('2d'); 
    var angleRadians = (angleDegrees/180) * Math.PI; 

    var cosa = Math.cos(angleRadians); 
    var sina = Math.sin(angleRadians); 

    canvas.clearRect(0, 0, 32, 32); 
    canvas.save(); 
    canvas.rotate(angleRadians); 
    canvas.translate(16 * sina + 16 * cosa, 16 * cosa - 16 * sina); 
    canvas.drawImage(arrowIcon, -16, -16); 
    canvas.restore(); 
} 
} 
</script> 

<form> 
    <input type="text" size="13" id="angle" name="angle" value=""> </input> 

    <input type="submit" id="button2" value="Prika?i" class="btnsearch" onsubmit="xz(); return false;"> 


</form> 
</body> 

+0

이 시점에서 어떤 오류/문제점을 지정해주십시오. –

+0

이것을 시작하고 각도 만 입력하면 Google지도가로드됩니다. 코드에서 angleDegrees를 어떤 값으로 설정하면 Google지도에 마커가 표시됩니다. 어떤 문제인지 잘 모르겠습니다. – Josip

답변

4

당신이 줄을 자신의 코드를 복사하여 교체 할 수 있습니다 예 :

var angleDegrees = document.getElementById('myTextbox').value; 

여기서 'myTextbox'는 입력 필드에 할당 된 ID입니다.

+0

하지만 작동하지 않습니다./ – Josip

+0

@Josip 저는 'angleDegress'로 'angleDegres'를 먼저 입력했는데 올바른 맞춤법을 사용하고 있는지 확인하십시오. 그래도 문제가 해결되지 않으면 사용중인 코드로 질문을 업데이트하십시오. –

+0

질문이 업데이트되었습니다. – Josip

관련 문제