Cordova + Vue + WebApp uses HTML5 to get a geographic location

1. Use the geolocation.getCurrentPosition () method in HTML5 to get the location.

Navigator.geLocation.getCurrentPosition (Success, Error, Options)
SUCCESS: The callback function when the location information is successfully obtained, using the Position object as the unique parameter.

Error: Gets the callback function when the location information fails, use the PositionError object as a unique parameter, which is an option.

Options: An optional PositionOptions object contains three parameters below.
    Enablehighaccuracy is a Boolean value that indicates whether the application uses its highest precision to represent the result, and the default is false.
  • Timeout is a positive long value indicating that the device must return a location in how long (unit milliseconds), the default is infinity.
  • MaxImumage is a positive long value indicating how long (i.e., the longest age, unit millisecond) can be acquired cache location. If set to 0, the device does not use a cache location and must get a real current location. If set to infinity, the device must return a cache location regardless of the maximum age of the settings. Default: 0
    • 2. Success – a callback function when the position information is successfully obtained
    navigator.geLocation.getCurrentPosition (Function) {// Gets the process of success // Parameter Position is the geographic location object}

Position is returned The information is as follows:

 Accuracy acquired latitude or longitude accuracy (in meters)   Altitude Current geography Position sea dynamic (not null) 
AltitudeAccurancy acquired sea-parallel longitude (in meters)

Heading device moves (in units)

Latitude Current Location Latex

cordova+vue+webapp使用html5获取地理位置的方法 Longitude of the current location

    SPEED device advancement speed (in mi / second, no NULL)
  • TimeSTAMP time time
  • 3. Error – When the location information fails
  • Navigator.geLocation.getCurrentPosition (Function (position) {// Gets the process of success; // Parameter Position is the geographic location object}}}}}) {// Get the process of failure;}
  • The information returned in Error

The Code attribute has the following value:
– 1 The acquisition of geographic location information failed because the page did not obtain permissions of geographic location information. – 2 Geographic location failure, because at least one internal location source returns an internal error.
 - 3 Get a geographic location timeout, set the timeout time when the location is obtained by defining the positionOptions.timeout.   Message returns a developer's DomString to describe the details of the error. 
4. Note:

cordova+vue+webapp使用html5获取地理位置的方法 When running in a Chrome browser, the latitude and longitude information cannot be obtained. It is Chrome no longer supports the non-safety domain

browser positioning request, only positioning can be used in HTTPS. In IE, EAGE, Firefox, the latitude and longitude information that can be obtained. The obtained GPS latitude and longitude information is different from the actual position in Baidu map, because the coordinate system of Baidu’s external interface is BD09

coordinate system, is not the real latitude and longitude of GPS collection, using Baidu Map JavaScript API Before the service, the non-Baidian coordinate needs to be converted into Baidu coordinates through the coordinate conversion interface. (Conversion method is shown below)

5. Use geolocation.getCurrentPosition () to acquire latitude and longitude information, and convert to Baidu coordinates and perform inverse address analysis:

Taking the Vue Project as an example, first, the Baidu API file is introduced into the root directory index.html, as shown in the following figure:

Get position, marking the Marker and performs the counter address parsing code as follows:

    // 1 Query the current location information getPosition () {navigator.geolocation.getCurrentPosition (this.getPositionSuccess, this.getPositionError, { “enableHighAccuracy”: true, “timeout”: 5000, “maximumAge”: 5000})}, // 1-1 query current location information successfully getPositionSuccess (position) {this.latitude = string (position.coords.latitude) this.longIdom = String (position.coords.longitude) Let ggpoint = new bmap.point (this.longitude, this.latitude) let pointarr = [] Pointarr.push ( GgPoint) Let Convertor = New BMap.convertor () // Coordinate Conversion Convertor.Translate (Pointarr, 1, 5, this.TranslateCallback)}, // 1-2 Query Current location information failed GetPositionerror (Error) {this. $ toast ({Message: Take a geographic location, please try again ~ `, duration: 1000}}}, // Coordinate Conversion Troan TranslateCallback (data) {if (data.status === 0){// Number Marker Let Marker = New BMap.Marker (Data.Points [0]) map.panto (data.points [0]) // reverse address parsing Let MYGEO = New BMAP .Geocoder () let this = this mygeo.get1, function (result) {if (result) {// Get reverse address parsing result That.clocksite = result.address}}}},
  1. Coordinate conversion Convertor.Translate () method Description:
  2. Syntax:

Convertor.Translate (Coords, from, TO, FN)


Coords: source coordinate of the converted

from: Source coordinate type See: [Type Details] [4]
 TO: Target coordinate type See: [Type Details] [5]   FN: Transformation results callback 

6. Working Solutions in WebApp using Cordova + Vue:

After installing the Geolocation plug-in in Cordova, you can get the geographic location information in the generated app, running as follows:

  Cordova Plugin Add Cordova- Plugin-geolocation  
The above is all the content of this article, I hope to help everyone, and I hope that everyone will support Tumi Clouds.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment