vue定位 获取用户位置信息

关于定位功能尝试了很多种方法，h5定位，百度地图定位，高德地图定位，因为ip定位只能定位到城市，所以我选用的是浏览器定位。总结如下：
H5定位：定位相对较准，但是部分浏览器不兼容，我主要是在手机上测试的，UC和百度浏览器还有ios的微信浏览器是兼容的，其他的浏览器如华为浏览器、搜狗浏览器、QQ浏览器、安卓的微信浏览器全都不兼容，后来发现原来是我的网站是http协议的，升级到https协议就好了，但是坐标系不转换误差会比较大。
百度定位：定位的位置与实际位置偏差太大，我从郑州的一个小县城定位到了郑州火车站，偏差18公里，百度官方的示例也是如此。浏览器的兼容性倒是可以，但是偏差太大，因为我要做的是给用户推荐路线，所以这个对我来说已经失去了意义。
高德定位：定位位置最准确，但是不太稳定，有时候能定位成功，有时候定位不成功，官方示例也是这样的，不知道是不是我这边信号的原因，因为稳定性的原因没有测试它的在各个浏览器的运行情况。
定位的能否成功的因素很多：
1.浏览器不支持原生定位接口，如IE较低版本的浏览器等；
2.用户禁用了定位权限，需要用户开启设备和浏览器的定位权限，并在浏览器弹窗中点击“允许使用定位”选项。
3.览器禁止了非安全域的定位请求，比如Chrome、IOS10已陆续禁止，这时候需要升级站点到HTTPS。注意Chrome不会禁止localhost等域名HTTP协议下的定位；
4.浏览器定位超时，包括原生的超时，可以适当增加超时属性的设定值以减少这一现象，另外还有个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。
5.定位失败，Chrome、火狐以及部分套壳浏览器接入的定位服务在国外，有较大限制，失败率高。
影响定位精度的因素：
1.手机是否打开了GPS。
2.天气、建筑物等的影响。
3.坐标系统不同，没有进行换算。
最后,附上我的代码，因为前期做坐标点标注的时候是用的百度地图，所以尽管定位的时候没有用到百度地图，还是把它引入了。我是优先选用H5定位，定位失败的话改用高德地图定位。最后换算成百度坐标实现推荐乘车路线的功能，代码如下：
main.js:

import AMap from "vue-amap";//高德地图
Vue.use(AMap);
AMap.initAMapApiLoader({
  key: "你的高德key",
  plugin: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType","AMap.Geolocation"],
  v: "1.4.4"
});

页面内容：

不足之处还望前辈们不吝赐教！谢谢！