Sự cố với vị trí địa lý trong IE11

Question

Tôi có mã sau yêu cầu người dùng cho phép vị trí hiện tại của họ trong trình duyệt, khi họ nhấp/nhấn vào liên kết vị trí.

Tính năng này hoạt động tốt trong Chrome, Safari và Firefox nhưng tôi không thể làm cho nó hoạt động trong IE11. Một số lần nó cho thấy thông báo trình duyệt cho người dùng để cung cấp cho vị trí của họ nhưng sau đó không có gì xảy ra.

Tôi tự hỏi liệu có ai khác đã gặp sự cố với Google Maps và yêu cầu vị trí trong IE11 hay không và liệu có ai có giải pháp không?

<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

Điều này thực sự làm việc cho tôi trên IE11 không có thay đổi khi tôi thử nó ra trên 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

Chỉ có điều tôi có thể đề xuất là kiểm tra bảng điều khiển dành cho nhà phát triển để xem có lỗi nào không khi bạn kiểm tra.

Answer 2

Tôi đã thử tính năng này trên Windows 8. Nếu cài đặt vị trí trên máy (xem Bảng điều khiển/Thay đổi cài đặt vị trí) bị tắt, thông báo lỗi sẽ được trả lại. Trong đoạn mã trên "không có gì xảy ra". "#error" và "# location-link" không chia sẻ cùng một gốc, do đó, dòng này không hiển thị thông báo lỗi:

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

Sự cố này ngăn không cho thông báo "Vị trí địa lý không được bật" hiển thị trên máy khách?