Ways to get location of the client from the browser?

一世执手 提交于 2019-11-30 23:08:00
Amit

The user can be located by using following ways:-

  1. Using the IP addr. easiest to achieve but most unreliable due to the uncertainty of network addresses / topologies.
  2. Using the latitude, longitude pair most accurate solution, but most of the end users don’t know about their latitude, longitude value.
  3. Using the zipcodes nice to think but quite difficult to achieve, although ZipCodes are being used for
    quite a long time but this is not a standard yet. (see link
    http://en.wikipedia.org/wiki/Postal_code ). ZipCode alone is not sufficient for calculation of distance we need to convert it to latitude, longitude pair which is an
    overhead.
  4. Using user’s address most compelling thought since each user will have at least one geographic address. Address alone is not sufficient for calculation of distance we need to convert it to latitude, longitude pair which is an overhead.

The Best option will be to use options 2,3.4 together, You can do that in two steps:-

  1. First determine the latitude, longitude from the address.
  2. Then use this lat, long value for further processing i.e. storing in database etc.

For various options available for this see the answer of this question

Try HTML5 geolocation

 function init() {


 var mapOptions = {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
 };


 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);



if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);

  var infowindow = new google.maps.InfoWindow({
    map: map,
    position: pos,
    content: 'Location found using HTML5.'
  });

  map.setCenter(pos);
}

 } else {
alert('Geolocation not detected');   
}
}

Here is geolocation described:

http://www.w3schools.com/htmL/html5_geolocation.asp

The lat/lng can then be reverse-geocoded to find the country, address. etc.

https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

https://developers.google.com/maps/documentation/javascript/examples/map-geolocation . simply click on javascript+html and copy the code into an html file.

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Reverse Geocoding</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;

if (navigator.geolocation) {
    var location_timeout = setTimeout("geolocFail()", 10000);

    navigator.geolocation.getCurrentPosition(function(position) {
        clearTimeout(location_timeout);

        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        geocodeLatLng(lat, lng);
    }, function(error) {
          alert("inside error ");
        clearTimeout(location_timeout);
        geolocFail();
    });
} else {
      alert("Turn on the location service to make the deposit");
    // Fallback for no geolocation
    geolocFail();
}

function geolocFail(){
 alert("Turn on the location service to make the deposit");
 document.write("Turn on the location service to make the deposit");
}

/*if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng)

}
function errorFunction(){
alert("Geocoder failed");
} */

function initialize() {
geocoder = new google.maps.Geocoder();

}
function geocodeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
//formatted address
var add= results[0].formatted_address
alert(add);

//city data
//alert(city.short_name + " " + city.long_name)

} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
</body>
</html>

This is HTML code to trace the device(Browser/Mobile) location .Just save the above file as .html extension and browse it from any browser on your system or Mobile ,it will display the user current location.

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!