[Web Development]HTML5 Geolocation Inaccuracy Issues

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(getPosition, getPositionError, {
        // Indicates the browser should obtain high-accuracy position, default is false
        enableHighAccuracy: true,
        // Specifies the timeout for obtaining geolocation, default is unlimited, in milliseconds
        timeout: 5000,
        // Maximum cache age β€” when repeatedly obtaining geolocation, this parameter specifies how long before re-fetching the position
        maximumAge: 3000
    });
}

The above code is commonly seen in H5-related geolocation implementations. It uses the device’s own GPS for positioning, but through testing I found it was very inaccurate. The desktop version would directly throw errors.

  1. On mobile, if you use Baidu’s API set, the location drifts significantly. Based on observation, it uses cell tower positioning.
  2. I then thought β€” is Baidu really this bad? So I tried the native code above, and found it frequently errors out:
    Error using Geolocation method: error.POSITION_UNAVAILABLE
    After investigating for a long time, the desktop version just wouldn’t work. Finally I figured it out β€” key point:

GPS services now strongly prefer HTTPS. HTTP is increasingly unsupported. Chrome even explicitly states that geolocation requires HTTPS.

After testing again with HTTPS, the accuracy was incredible β€” within 10 meters.