Use PhoneGap for Android app development to implement location escalation capabilities

Source: Internet
Author: User

See here: Android App development using PhoneGap for location escalation

The previous article, using IntelliJ idea to build phonegap Android development environment, simply introduced the PhoneGap Android development environment, and developed the Hello World application, this article, We continue to study the use of PHONEGAP for development, access to user equipment location information, through the acquisition of latitude and longitude to achieve the function of location escalation, next, to begin the study of this article.

We developed on the basis of the previous module, mainly to modify the contents of the index.html, in order to operate the DOM convenient, we introduced jquery.min.js, in order to obtain detailed location information through the device latitude and longitude, we use the BAIDUMAP provided by the API, Need to register Baidu Developer account, and create the application, get the corresponding key, here is not detailed, see here.

The initial index.html is as follows:

<! doctype html> 

Next, we need to use the API provided by PhoneGap, write the JS code to obtain the corresponding device latitude and longitude information, detailed official API seeOver here. First we add a listener when the application starts, call the Navigator.geolocation.getCurrentPosition method to get the latitude and longitude information of the current device ,The GetCurrentPosition method receives two callback functions, respectively, corresponding to the success or failure of the location,

    We found that in the Locatesuccess function, there is a position parameter, which is a parameter of the PHONEGAP package containing location information after the successful positioning, by Position.coords, we can get success after the latitude and longitude, altitude, such as a set of geographical coordinates information, here is simply to get the latitude and longitude information, and display it on the screen, the code is as follows:

var locate = $ ("#geoLocation"); var  html =  Longitude:  + position.coords.longitude +  <br/> Latitude:  +  position.coords.latitude;locate.html (HTML); 

    Next, through the latitude information to get the current location of the function, through the BAIDUMAP provided by the API, we use the JavaScript API fast version to display the map and other information, see here The code is as follows:

            var map = new  Bmap.map ("map");  //map in the corresponding Dom              Var point = new bmap.point (Position.coords.longitude, position.coords.latitude);             map.centerandzoom (POINT,&NBSP;14);  //the current latitude and longitude information as the center point of the map             map.addoverlay ( New bmap.marker (point));//Add callout on map//             map.enablescrollwheelzoom ();             var  gc = new bmap.geocoder ();             //according to the current map center point, get detailed location information: Provincial city street Grade              gc.getlocation (Point, function  (RS)  {                 var addComp = rs.addressComponents;                 var address = addComp.province +  ",   " + addComp.city + ",   + addComp.district +  ", "  + addComp.street +  ", "  + addComp.streetNumber;                 //Append detailed location information to the specified DOM                  locate.html (locate.html ()  +   "<br/> address:"  + address);             });

    Through the above development, we have obtained the latitude and longitude of the device and location information, but there is no location information to save, in the formal development of the application, we often need to save this information persisted, and so on, and then, Let's take a look at the escalation of the location through the PhoneGap, it's easy to submit the request via Ajax, get the response, the code is as follows:

At this point, our application has been basically developed complete, in the service-side code writing, we only need to obtain the corresponding parameter information by request, and to be persisted, in some mobile positioning class applications, processing logic is also most so, finally, we look at the complete effect. Such as:

Full code address:http://git.oschina.net/realfighter/Hello-PhoneGap/blob/master/assets/www/html/geolocation.html

Use PhoneGap for Android app development to implement location escalation capabilities

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.