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

目前,位置标记只是一个蓝点.我想添加一个箭头,显示用户进入的方向,就像它出现在谷歌地图移动应用程序中一样.

当用户使用手机移动时,我想到使用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);
    }
}