百度地图 new BMapGL.Marker 怎么旋转icon图标new BMapGL.Icon

在百度地图的新版本BMapGL中，Marker是一个用于标记地理位置的对象，它有一个Icon属性可以设置自定义图标。如果你想让Marker的图标旋转，你需要创建一个自定义的BMapGL.Icon，并提供一个canvas元素，其中包含你的图标图像。在这个canvas上，你可以使用HTML5 Canvas API的rotate()方法来旋转图标。

首先，创建一个HTML canvas元素：

<canvas id="custom-marker"></canvas>

然后，在JavaScript中加载这个canvas并绘制图标，同时处理旋转：

// 获取canvas元素
var canvas = document.getElementById('custom-marker');
var ctx = canvas.getContext('2d');

// 初始化图标位置和角度
var iconAngle = 0;
var iconSize = 32; // 你的图标大小

// 定义图标绘制函数
function drawIcon(angle) {
    ctx.clearRect(0, 0, iconSize, iconSize);
    ctx.save();
    ctx.translate(iconSize / 2, iconSize / 2);
    ctx.rotate(angle * Math.PI / 180);
    // 绘制你的图标图片
    ctx.drawImage(yourImage, -yourImage.width / 2, -yourImage.height / 2, yourImage.width, yourImage.height);
    ctx.restore();
}

// 创建BMapGL.Icon实例
var markerIcon = new BMapGL.Icon('url/to/your/image.png', { size: new BMap.Size(iconSize, iconSize), canvas: drawIcon });

// 创建Marker并设置旋转图标
var marker = new BMapGL.Marker(new BMap.Point(longitude, latitude), { icon: markerIcon });
marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 可选，添加动画效果
marker.addEventListener('click', function() {
    // 更新旋转角度
    iconAngle += 45; // 每次点击增加45度旋转
    marker.setIcon({ url: 'url/to/your/image.png', angle: iconAngle }); // 更新图标
});