Problema con la geolocalizzazione in IE11

Question

Ho il seguente codice che richiede all'utente di consentire la loro posizione corrente nel browser, quando fanno clic/tap sul collegamento di posizione.

Questo funziona bene in Chrome, Safari e Firefox ma non riesco a farlo funzionare in IE11. Alcune volte mostra la notifica del browser per l'utente per dare la loro posizione, ma poi non succede nulla.

Mi chiedevo se qualcun altro ha avuto problemi con Google Maps e la richiesta di posizione in IE11 e anche se qualcuno ha una soluzione?

<p id="error"></p> 
<form action="/" method="post"> 
<a class="location-link" id="location-link" href="#"><img src="/static/images/icons/location.png" alt="Get your current location" title="Get your current location" /></a><input type="text" name="location" value="" placeholder="Find a salon" > 
<input class="viewbtn3" value="Submit" type="submit"></form> 
<script src="/static/js/jquery.1.9.1.js"></script> 
<script src="https://maps.google.com/maps/api/js?sensor=true"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    if (typeof navigator.geolocation == "undefined") { 
     $("#error").text("Your browser doesn't support the Geolocation API"); 
     $(".location-instruction span").hide(); 
     $(".location-link").hide(); 
     return; 
    } 
    $("#location-link").click(function(event) { 
     event.preventDefault(); 
     var addressId = this.id.substring(0, this.id.indexOf("-")); 
     var thisid = $(this).attr("id"); 
     //console.log(thisid); 
     navigator.geolocation.getCurrentPosition(function(position) { 
      var geocoder = new google.maps.Geocoder(); 
      geocoder.geocode({ 
       location: new google.maps.LatLng(position.coords.latitude, position.coords.longitude) 
      }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        $("#" + thisid).parent().find('input[name="location"]').val(results[0].formatted_address); 
        $(".choose_wrap").addClass('sucess'); 
       } else { 
        $("#" + thisid).parent().find("#error").html("Unable to retrieve your address<br />"); 
        $(".choose_wrap").addClass('fail'); 
       } 
      }) 
     }, function(positionError) { 
      $("#" + thisid).parent().find("#error").html("Error: " + positionError.message + "<br />") 
     }, { 
      enableHighAccuracy: true, 
      timeout: 10 * 1000 
     }) 
    }); 
}); 
</script> 

Answer 1

Questo in realtà ha lavorato per me su IE11 senza modifiche quando l'ho provato su Codepen:

$(document).ready(function() { 
 
    if (typeof navigator.geolocation == "undefined") { 
 
     $("#error").text("Your browser doesn't support the Geolocation API"); 
 
     $(".location-instruction span").hide(); 
 
     $(".location-link").hide(); 
 
     return; 
 
    } 
 
    $("#location-link").click(function(event) { 
 
     event.preventDefault(); 
 
     var addressId = this.id.substring(0, this.id.indexOf("-")); 
 
     var thisid = $(this).attr("id"); 
 
     //console.log(thisid); 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
      var geocoder = new google.maps.Geocoder(); 
 
      geocoder.geocode({ 
 
       location: new google.maps.LatLng(position.coords.latitude, position.coords.longitude) 
 
      }, function(results, status) { 
 
       if (status == google.maps.GeocoderStatus.OK) { 
 
        $("#" + thisid).parent().find('input[name="location"]').val(results[0].formatted_address); 
 
        $(".choose_wrap").addClass('sucess'); 
 
       } else { 
 
        $("#" + thisid).parent().find("#error").html("Unable to retrieve your address<br />"); 
 
        $(".choose_wrap").addClass('fail'); 
 
       } 
 
      }) 
 
     }, function(positionError) { 
 
      $("#" + thisid).parent().find("#error").html("Error: " + positionError.message + "<br />") 
 
     }, { 
 
      enableHighAccuracy: true, 
 
      timeout: 10 * 1000 
 
     }) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maps.google.com/maps/api/js?sensor=true"></script> 
 
<p id="error"></p> 
 
<form action="/" method="post"> 
 
    <a class="location-link" id="location-link" href="#"><img src="/static/images/icons/location.png" alt="Get your current location" title="Get your current location" /></a> 
 
    <input type="text" name="location" value="" placeholder="Find a salon"> 
 
    <input class="viewbtn3" value="Submit" type="submit"> 
 
</form>

• http://codepen.io/anon/pen/oXZxgz

L'unica cosa che può suggerire è controllare la console degli sviluppatori per vedere se ci sono errori durante il test.

Answer 2

Ho provato questo su Windows 8. Se le impostazioni di posizione sulla macchina (vedi Pannello di controllo/Modifica impostazioni posizione) sono disattivate, viene restituito un messaggio di errore. Nel codice sopra "non succede nulla". "# Location-Link" "Messaggio # errore" e non condividono lo stesso genitore, in modo da questa linea non viene visualizzato il messaggio di errore:

$("#" + thisid).parent().find("#error").html("Error: " + positionError.message + "<br />") 

È questo problema che impediva il "Geo-localizzazione non è acceso" messaggio da presentarsi sulle macchine client?