Using JS to obtain the current geographical location method summary

Using JS to obtain the current geographical location method summary_javascript skills

WBOY

Release： 2016-05-16 16:25:59

Original

1258 people have browsed it

During this year’s project development, I initially came into contact with mobile WEB development. I developed it while learning HTML5, mainly using JQuery Mobile technology. I found that this is not suitable for Internet products. Most styles need to be rewritten. Just use some functions. I came into contact with the positioning function for the first time during the mobile WEB development process. Through major search engines, I found that the positioning on the mobile phone is through the browser. When using the browser on the PC for the first time, a prompt will pop up saying "Do you want to enable the positioning function?" When the Boss saw this prompt, he felt that it was not good for the user experience. If it is not good, then I can implement it in another way. This is not a big deal. The Boss's expression changed drastically and he said: No. You should have this experience. Aren’t we doing this all to rush for time so that we can release new features as soon as possible?

1. Mobile phone WEB positioning method:

Copy code The code is as follows:

var getLocation = function (successFunc, errorFunc) { //successFunc gets the positioning success callback function, errorFunc gets the positioning failure callback

//First set the default city

var defCity = {

         id: '000001',

         name: 'Beijing City',

Date: curDateTime()//Getting the current time method

};

//Default city

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' });

If (navigator.geolocation) {

         navigator.geolocation.getCurrentPosition(function (position) {

            var lat = position.coords.latitude;

            var lon = position.coords.longitude;

//var map = new BMap.Map("container"); //Create Map instance

               var point = new BMap.Point(lon, lat); // Create point coordinates

            var gc = new BMap.Geocoder();

gc.getLocation(point, function (rs) {

              var addComp = rs.addressComponents;

              var curCity = {

                   id: '',

Name: addComp.province,

date: curDateTime()

                };

//Current location city

                    $.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });

//alert(addComp.province ", " addComp.city ", " addComp.district ", " addComp.street);

If (successFunc != undefined)

                      successFunc(addComp);

            });

},

function (error) {

                switch (error.code) {

               case 1:

alert("Location service denied.");

break;

                case 2:

alert("The location information cannot be obtained temporarily.");

break;

                case 3:

alert("Timed out to obtain location information.");

break;

                                                                                                                                                                                                                                                                              default:

alert("Unknown error.");

break;
            }

          var curCity = {

                  id: '000001',

                  name: 'Beijing',

date: curDateTime()

            };

//Default city

                $.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });

                 if (errorFunc != undefined)

               errorFunc(error);

            }, { timeout: 5000, enableHighAccuracy: true });

} else {

alert("Your browser does not support obtaining geographical location information.");

If (errorFunc != undefined)

​​​​​​ errorFunc("Your browser does not support obtaining geographic location information.");

}

};

var showPosition = function (position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

//var map = new BMap.Map("container"); // Create Map instance

var point = new BMap.Point(lon, lat); // Create point coordinates

var gc = new BMap.Geocoder();

gc.getLocation(point, function (rs) {

        var addComp = rs.addressComponents;

      var curCity = {

             id: '',

               name: addComp.province,

date: curDateTime()

        };

//Current location city

            $.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });

​​​​ //alert(addComp.province ", " addComp.city ", " addComp.district ", " addComp.street);

});

};

var showPositionError = function (error) {

Switch (error.code) {

case 1:

alert("Location service denied.");

             break;

case 2:

alert("The location information cannot be obtained temporarily.");

             break;

case 3:

alert("Timed out to obtain location information.");

             break;

           default:

alert("Unknown error.");

             break;

}

var curCity = {

         id: '000001',

         name: 'Beijing City',

Date: curDateTime()

};

//Default city

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });

};

The prerequisite is to introduce Baidu API:

In addition: There are also corresponding interfaces provided by Google, Sohu, etc. You can try it yourself.

That’s all for today. There is still a lot of work to be done. You can try other interfaces when you have time. Everyone is welcome to come and provide better methods.