IE11 中的地理定位问题

Question

我有以下代码，当用户单击/点击位置链接时，请求用户在浏览器中允许他们当前的位置。

这在 Chrome、Safari 和 Firefox 中运行良好，但我无法在 IE11 中运行。有时它会显示浏览器通知，让用户提供他们的位置，但随后什么也没有发生。

我想知道是否有其他人在使用谷歌地图和在 IE11 中请求位置时遇到过问题，以及是否有人有解决方案？

<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

当我在 Codepen 上试用时，这实际上在 IE11 上对我有用，没有任何变化：

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

我唯一能建议的就是检查开发者控制台，看看你在测试时是否有任何错误。

Answer 2

我在 Windows 8 上尝试过。如果关闭了机器上的位置设置（请参阅控制面板/更改位置设置），则会返回错误消息。在上面的代码中“什么都没有发生”。 “#error”和“#location-link”不共享同一个父级，因此该行不显示错误消息：

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

此问题是否会阻止“地理位置未打开”消息显示在客户端计算机上？

Answer 3

这可能是 Windows 设置，至少在我的情况下是这样。尝试转到“设置”（从 Windows 的“开始”菜单中搜索）>“隐私”>“位置”并打开“位置 = 开启”。