javascript - IE11 中的地理定位问题

Question

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

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

我想知道是否有其他人在使用 Google map 和在 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

这实际上对我在 IE11 上有效，当我在 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

我唯一可以建议的是检查开发人员控制台，看看在测试时是否有任何错误。