Question

我正在使用Google Map Javascript API，我正在尝试使用自定义图标创建自定义标记，该图标适用于旋转，

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),
});

旋转属性正在使用google.maps.SymbolPath.XXXX作为代码中注释的行，但不是像我在代码中写的那样使用自定义图标图像

所以我问有没有解决方案让自定义图标图像旋转？或者从图像创建google.maps.SymbolPath？

Answer 1

1）不，因为 Icon object 没有rotation属性，

2）是的，你可以，但为此，你需要使用 Symbol object 和SVG path notation。您可以查看this answer和this example了解详情。

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：使用自定义标记图标旋转

1 个答案: