HTML5 地理位置 watchPosition 只被调用一次

Posted 2023-02-23

【中文标题】HTML5 地理位置 watchPosition 只被调用一次

【英文标题】：HTML5 geolocation watchPosition getting called just once

【发布时间】：2014-05-16 17:13:20

【问题描述】：

我正在使用 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!");
   

【参考方案1】：

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

$(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/

【讨论】：

嗨 Barto，我尝试使用您的代码，但仍然遇到同样的问题。我在移动浏览器上尝试了代码，它工作正常，但在桌面浏览器上我只得到一次位置。

我把它放在了小提琴jsfiddle.net/XEFks，如果你打开页面并查看控制台，你应该会看到更新位置（控制台中会有一个 Gelocation 对象）。它不会每秒更新一次，因为首先设置了位置，当找到更好的位置时，会更新第一个位置，依此类推。 （肯定在这里工作）

好的。所以你的意思是如果位置没有更新，那么在位置改变之前我将无法获得位置。所以简而言之，不可能在桌面上重复获取位置，因为它不会改变它的位置？

不，不是直接来自导航器对象。当然，您可以反复调用getCurrentPosition() 来返回您的坐标。

【参考方案2】：

您需要确保调用带有 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);

---

您也可以尝试像下面这样包装 clear 函数。还将其设置为 null 将确保它得到更新。

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

【讨论】：

还是不行。我使用了 clearWatch，但我不明白为什么我的代码不起作用。

你用过clearwatch(watchID);像这样。传入原始ID？

是的。我就这样用过。

我刚刚将 successfunction 替换为 `function success(pos) var crd = pos.coords; if (target.latitude === crd.latitude && target.longitude === crd.longitude) console.log('恭喜你到达目标'); navigator.geolocation.clearWatch(watchID);手表ID = null; ; `

谢谢@SoftwareCarpenter！工作完美。快乐编码:)

【参考方案3】：

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

这肯定会有所帮助..