[英]rotate marker on google maps
我在谷歌地圖上使用此顯示風向旋轉谷歌地圖上的標記,但角度設置為220.現在我有一個輸入文本框,用戶輸入角度,當clik on按鈕顯示谷歌地圖上的旋轉標記。 如何編輯此代碼以從文本框中獲取值? 用<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>
您可以復制他的代碼並替換此行:
var angleDegrees = 220;
有類似的東西:
var angleDegrees = document.getElementById('myTextbox').value;
其中'myTextbox'是分配給輸入字段的ID。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.