谷歌地图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); 
    } 
}