前端定位不同网络环境的区别，及定位方法

一.H5地理位置的获取方式（以高德为例）

获取地理位置的方式有很多种，虽然因获取方式的工作原理不同，它们有非常明显的精度差 异，但是在实际工作环境中，又有各自的优点和不足。

• 1. IP地址
     这是一种比较不准确地获取地理位置的办法，很多时候获取的是ISP机房的位置，但是获取 非常方便，没有什么限制。大多数时候，IP地址还是比较准确的，基本上能精确到某个小区或某 个大楼，但是如果用户使用代理或者VPN，就可能导致非常大的偏差。

如果不需要获取精确的位置，只需要城市级别的定位信息，推荐使用AMap.CitySearch插件，AMap.CitySearch插件获取所在城市相比通过浏览器定位的方式也更快捷。使用CitySearch插件获取当前所在城市信息代码如下：

AMap.plugin('AMap.CitySearch', function () {
  var citySearch = new AMap.CitySearch()
  citySearch.getLocalCity(function (status, result) {
    if (status === 'complete' && result.info === 'OK') {
      // 查询成功，result即为当前所在城市信息
    }
  })
})

查看AMap.CitySearch所有属性和方法

• 2.GPS
  这是一种非常准确地获取地理位置的方法， GPS的精度可以达到10米左右。如果用来找人或 者找建筑，基本上都在目视范围内。但是使用GPS还有一些限制：在室内使用时，信号不太稳定， 搜索卫星的时间较长，会造成延时。使用GPS最大的障碍是：很多设备（比如笔记本电脑）基本 上都不带GPS，而只有智能手机才有。

• 3.Wi-Fi基站
  连接位置已知的公共Wi-Fi时，可以获得地理位置信息。这种定位的精度比较不错，而且还 可以在室内定位。不过由于位置公开的Wi-Fi比较少，此种方法的适用范围比较少。从目前的各 类科技新闻来看，北京、上海、广州将率先建立公共Wi-Fi基站，北京甚至在公交车上都已经设 立Wi-Fi基站，这些也可以考虑到未来的应用中。

• 4.GSM或CDMA基站
  通过电话局基站定位，定位精度随基站密度变化，精度非常一般，而且只有手机才能使用， 并且地理位置信息往往不太精确。

• 5.浏览器定位
  也就是HTML5定位。其实现定位过程由浏览器代为获取。如果浏览器运行于手机端，则明显可以获得公网IP，周边wifi信号，手机基站信号，甚至可以是GPS模块返回的定位结果。
  高德JS API提供了AMap.Geolocation插件来实现定位，使用方式如下：

AMap.plugin('AMap.Geolocation', function() {
  var geolocation = new AMap.Geolocation({
    enableHighAccuracy: true, // 是否使用高精度定位，默认：true
    timeout: 10000, // 设置定位超时时间，默认：无穷大
    offset: [10, 20],  // 定位按钮的停靠位置的偏移量
    zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    position: 'RB' //  定位按钮的排放位置,  RB表示右下
  })

  geolocation.getCurrentPosition(function(status,result){
        if(status=='complete'){
            onComplete(result)
        }else{
            onError(result)
        }
  });

  function onComplete (data) {
    // data是具体的定位信息
  }

  function onError (data) {
    // 定位出错
  }
})

注意：PC端
因为pc设备上大都缺少GPS芯片，所以在PC上的定位主要通过IP精准定位服务，该服务的失败率在5%左右。

二、小程序获取地理位置的方式

获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。 高频率调用会导致耗电，在模拟器的默认位置在当地政府

工具中定位模拟使用IP定位，可能会有一定误差。且工具目前仅支持 gcj02 坐标。

wx.getLocation({
 type: 'wgs84',
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   const speed = res.speed
   const accuracy = res.accuracy
 }
})

image.png