如何使用 BING MAPS 中的标题旋转图钉？

Question

我想根据 Bing 地图上的标题旋转我的 pushPin（标记）。 代码是：

var location = new Microsoft.Maps.Location(data[index].latitude, data[index].longitude);
    var pushpinOptions = {
        icon: "/images/carMarker.png",
        width: 50,
        height: 50,
        anchor: new Microsoft.Maps.Point(10, 40),
        typeName: 'carMarker'
    };
    map.entities.remove(carPin);
    carPin = new Microsoft.Maps.Pushpin(location, pushpinOptions);
    map.entities.push(carPin);

我可以在地图上绘制标记，但无法旋转标记。请任何人帮助。谢谢。

Answer 1

如果您的目标浏览器支持 CSS3，则可以使用 transform 属性，请参阅：http://www.w3schools.com/cssref/css3_pr_transform.asp

.carMarker {
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

如果您不这样做，那么您必须生成 N 个版本的图标并在 icon 属性中更改它，并将锚点更改为位于中心或您的常用图标。

另请参阅，Cross browser way to rotate image using CSS?