使用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添加的人,所以也许有人有一个有效的例子
答案 0 :(得分:5)
所以我最终得到了这个解决方案,效果很好:
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);
}
}