Вращающееся изображение / изображение маркера на карте Google V3

Question

Как можно повернуть изображение (маркерное изображение) на карте Google V3 ?

• Отличный пример для V2 здесь , именно то, что мне нужно. Но для GMap2! Они делают это с помощью вращающегося холста.
• Изображение часто вращается с помощью JS / JQuery, несколько ответов . Но как я могу применить это к изображению моей карты?
• Один из упомянутых подходов - иметь разные изображения под разными углами и переключаться между ними - это НЕ то, что я хочу. Мне не нравится иметь так много изображений, я хочу повернуть по коду.

Примечание: есть похожие вопросы, но все для V2, а не для V3 (насколько я могу судить). Мне это нужно для V3.

Answer 1

Самым простым способом может быть использование свойства вращения в google.maps.Symbol . Просто установите его как свойство вашего значка при создании или обновлении вашего маркера:

new google.maps.Marker({
  position: map.getCenter(),
  icon: {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 7,
    rotation: 193
  },
  map: map
});

Plunker

Answer 2

Вы можете вызывать yourmarker.setIcon (canvas.toDataUrlOrSomeThig) каждый раз, когда изображение изменяется. Я не вижу ничего в ссылке на API для непосредственного использования элемента canvas, кроме случаев, когда вы реализуете свой собственный google.maps.OverlayView.

Если вам нужна только анимация, вы можете использовать gif и добавить оптимизированный параметр маркера: false к нему.

Answer 3

Используя библиотеку MarkerWithLabel, вы можете добиться этого следующим образом:

var ico = document.createElement('img');
ico.src = 'ImageSource';
ico.setAttribute('style', 'transform:rotate('30deg);');
mapMarkers[0].labelContent = ico;
mapMarkers[0].label.draw();

Answer 4

var icon = {
   path: aeroplanePath/image,
   fillColor: '#0000FF',
   fillOpacity: .6,
   anchor: new google.maps.Point(0,0),
   strokeWeight: 0,
   scale: 1,
   rotation: 180
}


var marker = new google.maps.Marker({
   position: positions[k],
   icon: icon,
   draggable: true,
   title: "BOING-707",    
});