The H5 embedded page of some Android phones cannot obtain the current location

1. Identify the problem

• It is embedded into the H5 page of the mobile phone client, and can be located by calling baidu Map API.
• All IOS phones will pop up with a prompt whether to allow the current location, which can be accurately located by the user’s authorization.
• But some Android phones can’t get the current location.
• Note:Mobile phone positioning permissions on the APP have been opened!

2. Locate the fault

On the importance of debugging tools:

• Import vConsole on the H5 page to view console information on the mobile phone.
• Print the latitude and longitude of the current location result, showing negative (invalid location).

Start the search

• Fault 1: Some Android phones cannot obtain the current location

  1. BMap API key AK expired or unavailable?
     • Replace the key value of the introduced Baidu Map API link with the newly applied AK, and the latitude and longitude are still negative.
  2. After communication, it is known that the mobile phone client uniformly uses autonavi SDK, and the map API is inconsistent, leading to the failure of positioning?
     • Replace baidu Map API with Autonavi API;
     • The Amap API failed to obtain the current location. Geolocation Permission denied is returned.
  3. To further determine the Android client problem, visit the mobile browserm.amap.com/At the same time, access within the APPm.amap.com/
     • After testing, mobile browser access to Amap link, can normally obtain the current location;
     • However, when the APP terminal accessed the link, the location button loaded for a long time and finally turned grey, and the popup window displayed “temporarily unable to obtain location”.
     • At this point, you can safely pass the ball to your Android colleagues.
  4. After the investigation of Android colleagues, opened the SDK auxiliary H5 page positioning, we can finally get the longitude and latitude of the current positioning, xida Pu Ben!!

• Problem 2: The longitude and latitude of Baidu Map are inconsistent with that of Autonavi Map, resulting in inaccurate punching and positioning

  1. Baidu Map API is used in the PC side and background management system to input the location information of the unit. Baidu Map API is also used in the PAGE of H5. Later, in order to keep consistent with the mobile APP, THE H5 page is replaced with Autonavi API. Will the BAIDU map API of the PC – background management system also be replaced with Autonavi API?
     • This scheme is not desirable, for historical projects, generally do not make large changes;
     • H5 punching page involves only one or two pages, and the scope of influence is controllable; PC interaction is more complex, affecting the business scope is relatively uncontrollable;
     • Therefore, refactoring the MAP API scheme on PC side is compromised…
  2. After a search on the Internet, it was found that the latitude and longitude of Gaode Map and Baidu map can be exchanged, as follows:

/** * Convert latitude and longitude of Baidu Map to Latitude and longitude of Autonavi map **@param {Number} LNG Baidu Map - Longitude *@param {Number} Lat Baidu Map - Latitude *@return {Object} Amap longitude and latitude */
function bMapTransferAMap (lng, lat) {
  let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  let x = lng - 0.0065;
  let y = lat - 0.006;
  let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
  let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
  let lngs = z * Math.cos(theta);
  let lats = z * Math.sin(theta);
  
  return {
    lng: lngs,
    lat: lats        
  }   
}

/** * Convert latitude and longitude of Autonavi map to Baidu map **@param {Number} LNG Gaud map - Longitude *@param {Number} Lat Map of Gaard - Latitude *@return {Object} Baidu map latitude and longitude */
function aMapTransferBMap (lng, lat) {
  let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
  let x = lng;
  let y = lat;
  let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
  let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
  let lngs = z * Math.cos(theta) + 0.0065;
  let lats = z * Math.sin(theta) + 0.006;

  return {
    lng: lngs,
    lat: lats 
  } 
}
Copy the code

3. Scott maps API also offers a coordinate conversion interface, can be entered by the user of gold coordinates (GPS coordinate, coordinate mapbar, baidu coordinate) into gold coordinate, please refer to the coordinate transformation – API documentation – development guidelines – Web service apis | gold maps API