在Google地图V3上旋转图片/标记图片 [英] Rotating image / marker image on Google map V3

问题描述

我如何在Google地图上 V3 旋转图片（标记图片）？

• 这是V2 此处的绝佳示例，正是我所需要的。但对于GMap2！他们通过旋转画布来实现它。


• 使用JS / JQuery旋转的图像经常使用，有多个答案。但是我怎么能把这个应用到我的地图图像？


• 一个提到的方法是在不同的角度有不同的图像并在它们之间切换 - 这不是我想要的。我不喜欢有这么多的图片，我想通过代码进行旋转。

注：有类似的问题，但所有V2而不是V3（据我所知）。我需要V3。

解决方案

我已经在v3中使用以下代码完成了轮换：

 < canvas id =carcanvaswidth =1height =1>< / canvas> 
 
 
 if（document.getElementById（'carcanvas'）。getContext）{
 var supportsCanvas = true; 
} else {
 var supportsCanvas = false; 
} 
 
 var rImg = new Image（）; 
 rImg.src ='/ images / cariconl.png'; 
 
 //返回两点之间的弧度方位。 
函数轴承（from，to）{
 //转换为弧度。 
 var lat1 = from.latRadians（）; 
 var lon1 = from.lngRadians（）; 
 var lat2 = to.latRadians（）; 
 var lon2 = to.lngRadians（）; 
 //计算角度。 Math.cos（lat2），Math.cos（lat1）* Math.sin（lat2） -  Math.sin（lat1）*数学公式（Math1） .cos（lat2）* Math.cos（lon1  -  lon2））; 
 if（angle <0.0）
 angle + = Math.PI * 2.0; 
 if（angle == 0）{angle = 1.5;} 
返回角度; 
 
 
函数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（）; 
} 
  

我希望有所帮助。

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

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

Remark: There are similar questions, but all for V2 and not V3 (as far I can tell). I need it for 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();
    }

and in the animation method :

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

I hope that help.

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