在Google Map V3上旋转图像/标记图像

  • Z时代
  • 2024-01-10
  • 分类：问答

如何在Google Map 上旋转图像（标记图像）？

  • 没有为V2一个很好的例子在这里，到底做什么，我需要的。但是对于GMap2！他们用旋转的画布来做。

  • 经常使用JS / JQuery旋转图像。但是如何将其应用于地图图像？

  • 一种提到的方法是针对不同的角度使用不同的图像并在它们之间切换-这不是我想要的。我不喜欢有这么多图像，我想按代码旋转。

备注：有类似的问题，但所有问题仅针对V2而非V3（据我所知）。我需要V3。

回答：

我已使用以下代码在v3中进行了轮换：

<canvas id="carcanvas" width="1" height="1"></canvas>
    if (document.getElementById('carcanvas').getContext) {
        var supportsCanvas = true;
    } else {
        var supportsCanvas = false;
    }
    var rImg = new Image();
    rImg.src='/images/cariconl.png';
    // Returns the bearing in radians between two points.
    function bearing( from, to ) {
        // Convert to radians.
        var lat1 = from.latRadians();
        var lon1 = from.lngRadians();
        var lat2 = to.latRadians();
        var lon2 = to.lngRadians();
        // Compute the angle.
        var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
        if ( angle < 0.0 )
            angle  += Math.PI * 2.0;
        if (angle == 0) {angle=1.5;}
        return angle;
    }
    function plotcar() {
        canvas = document.getElementById("carcanvas").getContext('2d');
        var cosa = Math.cos(angle);
        var sina = Math.sin(angle);
        canvas.clearRect(0,0,32,32);
        canvas.save();
        canvas.rotate(angle);
        canvas.translate(16*sina+16*cosa,16*cosa-16*sina);
        canvas.drawImage(rImg,-16,-16);
        canvas.restore();
    }

并在动画方法中：

if (supportsCanvas) {
                    angle = bearing(new google.maps.LatLng(lat1, lng1),new google.maps.LatLng(lat2, lng2));
                    plotcar();
                }

希望对您有所帮助。

以上是 在Google Map V3上旋转图像/标记图像 的全部内容， 来源链接： utcz.com/qa/414042.html

回到顶部