Javascript 谷歌地图上的旋转标记_Javascript_Html_Canvas

Javascript 谷歌地图上的旋转标记

javascript html canvas

Javascript 谷歌地图上的旋转标记,javascript,html,canvas,Javascript,Html,Canvas,我用它在谷歌地图上旋转标记，但角度设置为220。现在我有了一个输入文本框，用户在其中输入角度，点击按钮时在谷歌地图上显示旋转标记。如何编辑此代码以从文本框中获取值？有了，这可能吗代码如下： <body onload="xz()" onunload="GUnload()"> <div id="map" style="width: 400px; height: 300px"></div> <script type="text/javascript"&

我用它在谷歌地图上旋转标记，但角度设置为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>


函数xz（）
{
如果（GBrowserIsCompatible（））{
var angleDegrees=document.getElementById（'angle'）。值；
VarMap=新的GMap2（document.getElementById（“map”）；
var arrowIcon=新图像（）；
var marker=new-ELabel（new-GLatLng（55.50,2.50），“”，null，new-GSize（-16,16））；
arrowIcon.src=”http://i49.tinypic.com/mafqee.png";
添加覆盖图（标记）；
赛特中心地图（新格拉特林（53.85，-1.80），3）；
var canvas=document.getElementById（“箭头画布”）.getContext（“2d”）；
var angleRadians=（angleDegrees/180）*Math.PI；
var cosa=数学cos（角度弧度）；
var sina=数学sin（角度弧度）；
canvas.clearRect（0,0,32,32）；
canvas.save（）；
画布。旋转（角度弧度）；
canvas.translate（16*sina+16*cosa，16*cosa-16*sina）；
画布.drawImage（箭头图标，-16，-16）；
canvas.restore（）；
}
}

您可以复制他的代码并替换此行：

var angleDegrees = 220;

比如：

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

其中“myTextbox”是分配给输入字段的ID。

@Josip我最初将“angleDegrees”键入为“angleDegress”，请确保拼写正确。如果这不起作用，请用你正在使用的代码更新你的问题。你能指定你在这一点上有什么错误/问题吗？当开始此操作并输入角度时，只有我得到的是加载的谷歌地图。当在代码中将angleDegrees设置为某个值时，我会在google地图上找到标记。我不知道是什么问题