navigator.geolocation從第二次執行返回錯誤 - IE

Question

當第一次執行navigator.geolocation.getCurrentPosition(success, error, options);時，我可以獲取用戶的位置。但是從第二次執行，該函數返回的錯誤：

The current position could not be determined.

我已按照this question's answers沒有成功給出的建議，我怎麼能得到這個工作？

在這裏您可以找到一個working fiddle以快速查看錯誤。

//Pass this options to the getCurrentPosition 
var options = { 
    enableHighAccuracy: true, 
    timeout: 5000, 
    maximumAge: 0 
}; 
//function to execute if the current position was succesfully retrieved 
function success(pos) { 
console.log(pos); 
    var crd = {lat: pos.coords.latitude, lng : pos.coords.longitude }; 
    var myPre = document.querySelector('pre'); 
    myPre.textContent = JSON.stringify(crd); 
    myPre.style.color = someColor(); // use a diferent color just to see it's a new execution of the code 
}; 
//execute this on error 
function error(err) { 
    var myPre = document.querySelector('pre'); 
    myPre.textContent = err; 
    myPre.style.color = someColor(); // use a diferent color 
}; 
//attach function to button 
var myButton = document.querySelector('button'); 
myButton.addEventListener('click', function(){ 
    navigator.geolocation.getCurrentPosition(success, error, options); 
}); 

Answer 1

我的想法是這樣的：

的IE用戶只允許網站（腳本）（默認設置）來運行getCurrentLocation一次。用戶必須授予它多次運行的異常。

However I don't know (and can't really find any documentation) if this behaviour is by design or a bug. The solution below is a work-around.

使用watchposition初始更迭之後，而不是繞行此錯誤。看更新的小提琴：https://jsfiddle.net/b2rnr7tw/6/

在這個小提琴中，我設置了一個watchPosition，只要它更新它顯示新的位置。之後，它被取消（否則它不斷更新）。

//Pass this options to the getCurrentPosition 
var options = { 
    enableHighAccuracy: true, 
    timeout: 5000, 
    maximumAge: 0 
}; 

var watch = null; 
var watchId = null; 
//function to execute if the current position was succesfully retrieved 
function success(pos) { 

    var crd = {lat: pos.coords.latitude, lng : pos.coords.longitude }; 
    var myPre = document.querySelector('pre'); 
    myPre.textContent = JSON.stringify(crd); 
    myPre.style.color = someColor(); // use a diferent color 
    watch.clearWatch(watchId); //after success clear the watchId. 
}; 
//execute this on error 
function error(err) { 
    var myPre = document.querySelector('pre'); 
    myPre.textContent = err; 
    myPre.style.color = someColor(); // use a diferent color 
    //keep running the watchPosition if on error, however you can use a counter to only try it a few times (recommended) 
}; 
//attach function to button 
var myButton = document.querySelector('button'); 
myButton.addEventListener('click', function(){ 
    if (!watch) 
    { 
    watch = navigator.geolocation; 
    watch.getCurrentPosition(success, error, options); 
    } 
    else 
    { 
    watchId = watch.watchPosition(success, error, options); 
    } 
}); 

Answer 2

Mouser的解決方案在IE11中爲我工作，但打破了Edge，所以我們需要瀏覽器檢測。這裏是我的解決方案在IE11測試，邊緣14，FFX和Chrome（在寫作時FFX和Chrome的最新版本）

  var currentPositionHasBeenDisplayed = false; 

      if (navigator.geolocation) { 

       var options = {}; 

       var isIE = document.documentMode; //IE 8+ 

       // IE only allows one call per script to navigator.geolocation.getCurrentPosition, so we need a workaround 
       if (currentPositionHasBeenDisplayed == true && isIE) { 
        navigator.geolocation.watchPosition(
         function (pos) { 
          var myLatLng = new google.maps.LatLng(parseFloat(pos.coords.latitude), parseFloat(pos.coords.longitude)); 
          map.setCenter(myLatLng); 
         }, 
         function (error) { }, 
         options); 
       } 
       else { 
        navigator.geolocation.getCurrentPosition(
         function (pos) { 
          var myLatLng = new google.maps.LatLng(parseFloat(pos.coords.latitude), parseFloat(pos.coords.longitude)); 
          map.setCenter(myLatLng); 
          currentPositionHasBeenDisplayed = true; 
         }, 
         function (error) { return false; }, 
         options); 
       } 
      }