Why does geolocation not work on mobile browsers?
Question
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.
4 answers
solution1
3 2017-09-01 01:52:23
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>
solution2
2 ACCPTED 2015-02-04 20:53:22
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});
solution3
0 2019-04-14 10:29:40
// 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 ...
solution4
-1 2018-01-08 12:08:27
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.