Google Maps API:带有自定义标记图标的旋转 [英] Google Maps API : Rotation with a custom marker Icon

问题描述

我正在使用Google Map Javascript API，并且正在尝试创建一个具有可旋转自定义功能的自定义图标的自定义标记，

I'm working with Google Map Javascript API and I'm trying to create a custom Marker with a custom Icon which works with rotation,

var marker = new google.maps.Marker({
    position: latlng,
    map: this.map
});

marker.setIcon({
  url:"assets/icon/nav.png",
  //path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
  scale: 1,
  rotation: heading,
  scaledSize: new google.maps.Size(35, 35),
});

rotation属性可与google.maps.SymbolPath.XXXX一起用作代码中注释的行，但不能与我在代码中编写的自定义图标图像一起使用，

The rotation attribute is working with google.maps.SymbolPath.XXXX as the line commented in the code but not with a custom Icon Image like I wrote in my code,

所以我问有什么解决方案可以使自定义图标图像旋转?还是通过图片创建google.maps.SymbolPath?

So I'm asking is there any solution to make custom icon image rotate ? Or to create a google.maps.SymbolPath from an image ?

推荐答案

1)不，作为 图标对象 没有rotation属性，并且

1) No, as the Icon object doesn't have a rotation property, and

2)是，可以，但是为此，您需要使用 此答案和

2) yes, you can, but for this, you need to use a Symbol object and the SVG path notation. You can check this answer and this example for more info.

var symbol = {  
    path: "M0 0 H 90 V 90 H 0 L 0 0",
    fillColor: '#FF0000',
    fillOpacity: .5,
    anchor: new google.maps.Point(0, 0),
    strokeWeight: 0,
    scale: .5,
    rotation: 45
}

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(0, 0),
    map: map,
    icon: symbol
});

这篇关于Google Maps API:带有自定义标记图标的旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！