在谷歌地图上旋转标记答案

【问题标题】：rotate marker on google maps在谷歌地图上旋转标记
【发布时间】：2012-05-20 21:16:46
【问题描述】：

我用这个Show wind direction on Google Maps 在谷歌地图上旋转标记，但角度设置为 220。现在我有一个输入文本框，用户在其中输入角度，当单击按钮时，在谷歌地图上显示旋转标记.如何编辑此代码以从文本框中获取值？ <canvas> 可以吗？

代码在这里：

<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>

【问题讨论】：

您能否具体说明您目前遇到的错误/问题？
当开始这个并输入角度时，只有我得到的是加载谷歌地图。当在代码中将 angleDegrees 设置为某个值时，我会在谷歌地图上得到标记。我不知道问题是什么

标签： javascript html canvas

【解决方案1】：

你可以复制他的代码并替换这一行：

var angleDegrees = 220;

类似的东西：

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

其中 'myTextbox' 是分配给您的输入字段的 ID。

【讨论】：

@Josip 我最初将“angleDegrees”拼写为“angleDegress”，请确保使用正确的拼写。如果这不起作用，请使用您正在使用的代码更新您的问题。