0

我正在使用在 HTML5 上使用画布旋转的静态图像，但是当我得到结果时，由于图像的形式，它不在正确的位置。它有点高。

我需要一种方法来解决这个问题，以便让我的车在街道上正确定位。我怎么能做到？

原始图像

在此处输入图像描述

重新绘制的图像是

标记样本

旋转图像后的示例图

地图样本

使用的代码

function callbackIconMarkerSuccess (index, urlIconMarker) {
    markers[index].setIcon(urlIconMarker);
}
function setIconMarker(index, course, speed){
    course = parseFloat (course) * 0.01745327777;
    if (parseInt(speed) > 5) {
        imageIcon = '{% static "markers/icon_max.png" %}';
    } else {
        imageIcon = '{% static "markers/onstop.png" %}';
    }
    var elemento = document.createElement("canvas");
    if(elemento && elemento.getContext){
        var context = elemento.getContext('2d');
        if(context){
            var imageObj = new Image();
            imageObj.src = imageIcon;
            imageObj.onload = function(){
                elemento.width = imageObj.width;
                elemento.height = imageObj.height;
                context.save();
                context.translate(imageObj.width/2, imageObj.height/2);
                context.rotate(course);
                context.drawImage(imageObj, -(imageObj.width/2), -(imageObj.height/2));
                //context.globalCompositeOperation = "lighter";
                //context.globalAlpha = 0.5;
                //context.fillStyle="#550000";
                context.fillRect(imageObj.width/2, imageObj.height/2, elemento.width,elemento.height);
                context.restore();
                callbackIconMarkerSuccess(index, elemento.toDataURL());
            }
        }
    }
4

1 回答 1

1

您的代码没有显示标记的实际创建，但假设您使用的是google.maps.Icon您可能想要查看的anchor属性：

与地图上标记的位置相对应的锚定图像的位置。默认情况下，锚点位于图像底部的中心点。

于 2013-07-25T18:09:40.577 回答