HTML5地理位置watchPosition只调用一次

时间:2014-05-16 17:13:20

标签: html5 geolocation

我正在使用html 5创建一个Android应用程序,我想在用户移动时从用户访问latlong。我曾经使用过watchPostion,但它仅仅是我的用户位置一次。

    var watchID;
var geoLoc;

function showLocation(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;

    var ll=new google.maps.LatLng(latitude, longitude);
    map.setCenter(ll);

  console.log("Latitude : " + latitude + " Longitude: " + longitude);
}

function errorHandler(err) {
  if(err.code == 1) {
    console.log("Error: Access is denied!");
  }else if( err.code == 2) {
    console.log("Error: Position is unavailable!");
  }
    }
    if(navigator.geolocation){
      // timeout at 60000 milliseconds (60 seconds)
      var options = {timeout:60000};
      geoLoc = navigator.geolocation;
      watchID = geoLoc.watchPosition(showLocation, 
                                     errorHandler,
                                     options);


   }else{
      console.log("Sorry, browser does not support geolocation!");
   }

3 个答案:

答案 0 :(得分:6)

几个月前我一直在做类似的事情。我记得有同样的问题。也许这会有所帮助。

$(document).ready(function(){  
    initLocationProcedure();
}

function initLocationProcedure() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom : 17
    });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayAndWatch, locError, {
            enableHighAccuracy : true,
            timeout : 60000,
            maximumAge : 0
        });
    } else {
        alert("Your phone does not support the Geolocation API");
    }
}

function displayAndWatch(position) {
    // set current position
    setUserLocation(position);
    // watch position
    watchCurrentPosition();
}

function setUserLocation(pos) {
    // marker for userLocation
    userLocation = new google.maps.Marker({
           map : map,
           position : new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
           title : "You are here",
           icon : "../img/user-location.svg",
    // scroll to userLocation
    map.panTo(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
});

以下是您要找的内容

function watchCurrentPosition() {
    var positionTimer = navigator.geolocation.watchPosition(function(position) {
        setMarkerPosition(userLocation, position);
        map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    });
}

function setMarkerPosition(marker, position) {
     marker.setPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
     console.log(position);
}

<强>小提琴
http://jsfiddle.net/XEFks/

答案 1 :(得分:4)

您需要确保使用id调用Geolocation.clearWatch()方法,以便重置位置。

见下面的例子:

Web/API/Geolocation.watchPosition

Geolocation.watchPosition()方法用于注册每次设备位置更改时将自动调用的处理函数。您也可以选择指定错误处理回调函数。

此方法返回一个监视ID值,该值可用于通过将处理程序传递给Geolocation.clearWatch()方法来取消注册该处理程序。

语法

var id, target, option;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log('Congratulation, you reach the target');
    navigator.geolocation.clearWatch(id);
  }
};

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

target = {
  latitude : 0,
  longitude: 0,
}

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0
};

id = navigator.geolocation.watchPosition(success, error, options);

您也可以尝试包装清除功能,如下所示。将其设置为null将确保它得到更新。

// clear the watch that was started earlier
// 
function clearWatch() {
    if (watchID != null) {
        navigator.geolocation.clearWatch(watchID);
        watchID = null;
    }
}

答案 2 :(得分:0)

function watchCurrentPosition() {
    var positionTimer = navigator.geolocation.watchPosition(function(position) {
        setMarkerPosition(userLocation, position);
        map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    });
}

这肯定有帮助..