Question

使用Google maps 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);
    }
}

谷歌地图js API V3：显示方向箭头＆＃34;我的位置标记＆＃34;

1 个答案: