Why does geolocation not work on mobile browsers?

问题

I am trying to get the location of the user with HTML5 geolocation. On Desktop it works great, but on all my mobile devices (Samsung note, Samsung galaxy S4 And Iphone 6) its not working and not showing the error object.

this is my code:

function showPosition(position) {
    var coor = position.coords.longitude+", "+position.coords.latitude;
    alert(coor);
}
function errorPosition(error) {
    alert(error);
}
function toggleGeolocation() {
    navigator.geolocation.watchPosition(showPosition,errorPosition);
}

It asks to get permission for geolocation and I click allow (gps is working). What could be the problem?

I am using Google Chrome on all devices.

回答1:

Try with this code, it should work.

var successHandler = function(position) { 
alert(position.coords.latitude); 
alert(position.coords.longitude); 
}; 

var errorHandler = function (errorObj) { 
alert(errorObj.code + ": " + errorObj.message); 

alert("something wrong take this lat " + "26.0546106 ); 
alert("something wrong take this lng " +-98.3939791); 

}; 

navigator.geolocation.getCurrentPosition( 
successHandler, errorHandler, 
{enableHighAccuracy: true, maximumAge: 10000});

回答2:

Navigator will only work on Android on https websites. Here is an example that will not show an error if using http, but will work fine on https (from https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_geolocation)

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

回答3:

    // google geolocation
    googleMap: function(func){
        if (navigator.geolocation) {

            //get location
            navigator.geolocation.getCurrentPosition(function(position) {
                var coords = position.coords;
                lat = coords.latitude;
                lng = coords.longitude;

                var latlng = new google.maps.LatLng(lat, lng);
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode( {'location': latlng}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {

                        var time = Date.parse(new Date());
                        var resultArr = results[0].address_components, address = "" ,LocationName = "",province = "",city = "",district = "";

                        for (var i = 0; i < resultArr.length; i++) {
                            var type = resultArr[i].types[0] ? resultArr[i].types[0] : 0;
                            if (type && type == "street_number") {
                                LocationName = resultArr[i].short_name;
                            }
                            if (type && type == "route") {
                                address = address + resultArr[i].short_name;
                            }
                            if (type && type == "political") {
                                district = resultArr[i].short_name;
                            }
                            if (type && type == "locality") {
                                city = resultArr[i].short_name;
                            }
                            if (type && type == "administrative_area_level_1") {
                                province = resultArr[i].short_name;
                            }
                        }

                        var data = {'name': LocationName + ' ' + address, 'address': address, 'lng': lng, 'lat': lat, 'province': province, 'city': city, 'district': district};
                        func(data);

                    } else {
                        func();
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });

            }, function getError(error){
                func();
                switch(error.code){
                    case error.TIMEOUT:
                        alert(langData['siteConfig'][22][100]);
                        break;
                    case error.PERMISSION_DENIED:
                        alert(langData['siteConfig'][22][101]);
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert(langData['siteConfig'][22][102]);
                        break;
                    default:
                        break;
                }
            })
        }else {
            func();
            alert(langData['waimai'][3][72])
        }
    },

h5: function(func){
        if (navigator.geolocation) {
            if ("function" == typeof func) {
                h5LocationInit.fn = func
            }
            window.touchH5LocationCallback = function(f, g) {
                if(f == null){
                    HN_Location.getLocationByGeocoding(g);
                }else{
                    // getLocationError(f);
                    HN_Location.init(func, true);
                }
                $("#touchH5LocationIframe").remove();
            },
                $('<iframe src="javascript:(function(){ window.navigator.geolocation.getCurrentPosition(function(position){parent && parent.touchH5LocationCallback && parent.touchH5LocationCallback(null,position);}, function(err){parent && parent.touchH5LocationCallback && parent.touchH5LocationCallback(err);}, {enableHighAccuracy: 1, maximumAge: 10000, timeout: 5000});})()" style="display:none;" id="touchH5LocationIframe" ></iframe>').appendTo("body")
        } else {
            // var r = {
            //   tips: "broswer not supported"
            // };
            // "function" == typeof func ? func(r) : "[object Object]" === Object.prototype.toString.call(func) && func.fn && func.fn(r)
            HN_Location.init(func, true);
        }
    },

I totally same with your case. Finding the answer so hard ...

回答4:

Hi @jordan I was facing the same what i did is

First make sure you have updated chrome browser on your device.

1) started Location service of mobile device 1st

2) called the getLocation() function onLoad

By doing this it asked me about permission and worked out well.

Hope it helps.

来源：https://stackoverflow.com/questions/28330219/why-does-geolocation-not-work-on-mobile-browsers

标签

javascript

html

geolocation