谷歌地圖js API V3：在「我的位置標記」上顯示方向箭頭

Question

使用谷歌地圖js API V3我已經很容易地添加了一個標記來顯示用戶的位置（基於navigator.geolocation）。

如何添加一個箭頭來指示用戶正在移動的方向（可能使用deviceorientation事件）？

編輯：這是我當前的代碼：

function addUserLocation() { 

    myLocationMarker = new google.maps.Marker({ 
     clickable : false, 
     icon : new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/mobile/mobileimgs2.png', new google.maps.Size(22, 22), new google.maps.Point(0, 18), new google.maps.Point(11, 11)), 
     shadow : null, 
     zIndex : 999, 
     title : 'me', 
     map : map 
    }); 

    enableWatchPosition(); 
} 

function enableWatchPosition() { 
    if (navigator.geolocation) { 
     watchPositionId = navigator.geolocation.watchPosition(locateByBrowser, handleErrorGettingLocation, { 
      timeout : 30000, 
      enableHighAccuracy : true, 
      maximumAge : 1000 
     }); 
    } 
} 

function locateByBrowser(location) { 

    var currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude); 
    myLocationMarker.setPosition(currentLocation); 
} 

目前位置標記只是一個藍點。例如，我想添加一個箭頭來顯示用戶進入的方向，就像它在Google地圖移動應用上顯示的一樣。

我想用時deviceOrientation事件中獲取alpha值，而用他的手機用戶移動，然後通過alpha值旋轉的箭頭圖像，因爲這裏說明：

http://mobiforge.com/design-development/html5-mobile-web-device-orientation-events

我只是想我可能不是第一個添加，使用谷歌地圖JS API V3，所以也許有人有一個工作示例

Answer 1

所以我結束了這個解決方案，它的偉大工程：

1）改變了我的位置標記的圖標是一個符號（ svg路徑符號）而不是圖像。
2）爲deviceorientation事件添加了一個監聽器，該事件改變了符號的旋轉。

我剛剛更改了addUserLocation函數並添加了完成所有工作的enableOrientationArrow函數。

的代碼更改爲此：

function addUserLocation() { 

    myLocationMarker = new google.maps.Marker({ 
     clickable : false, 
     icon: { 
       path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
       strokeColor : '#3333FF', 
       strokeWeight : 5, 
       scale: 2.5 
      }, 
     shadow : null, 
     zIndex : 999, 
     title : genProps.pMyLocationTitle, 
     map : map 
    }); 

    enableWatchPosition(); 
    enableOrientationArrow(); 
} 

function enableOrientationArrow() { 

    if (window.DeviceOrientationEvent) { 

     window.addEventListener('deviceorientation', function(event) { 
      var alpha = null; 
      //Check for iOS property 
      if (event.webkitCompassHeading) { 
       alpha = event.webkitCompassHeading; 
      } 
      //non iOS 
      else { 
       alpha = event.alpha; 
      } 
      var locationIcon = myLocationMarker.get('icon'); 
      locationIcon.rotation = 360 - alpha; 
      myLocationMarker.set('icon', locationIcon); 
     }, false); 
    } 
}