谷歌地图 V3 上的旋转图像/标记图像 [英] Rotating image / marker image on Google map V3

问题描述

如何在 Google 地图 V3 上旋转图像(标记图像)?

How could I rotate an image (marker image) on a Google map V3?

• 此处有一个很好的 V2 示例，完全符合我的需要.但是对于 GMap2！他们用旋转的画布来做这件事.
• 经常使用 JS/JQuery 旋转图像，关于 多个答案这.但我如何将其应用于我的地图图像?
• 提到的一种方法是为不同的角度使用不同的图像并在它们之间切换 - 这不是我想要的.不喜欢图片太多，想用代码旋转.

• There is an excellent example for V2 here, exactly doing what I need. But for GMap2! They do it with a rotating canvas.
• Image rotating with JS / JQuery is frequently used, there are multiple answers about this. But how could I apply this to my maps image?
• One mentioned approach is to have different images for different angles and to switch among them - this is NOT what I want. I do not like to have so many images, I want to rotate by code.

备注:有类似的问题，但都是针对 V2 而不是 V3(据我所知).我需要它用于 V3.

Remark: There are similar questions, but all for V2 and not V3 (as far I can tell). I need it for V3.

推荐答案

我在 v3 中完成了轮换，代码如下:

I have done the rotation in v3 with the following code:

<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();
                }

希望能帮到你.

这篇关于谷歌地图 V3 上的旋转图像/标记图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！