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"
});

页面内容:

<template>
  <div class="welcomeNav" v-wechat-title="$route.meta.title">
    <div class="back">
      [外链图片转存失败(img-p7JCjXvd-1562206482460)(https://mp.csdn.net/assets/img/back.jpg)]
    </div>
    <div id="container"></div><!-- 高德地图容器 -->
    <div class="content">
      <div class="map-area" :id="mapId"></div><!-- 百度地图容器 -->
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { Indicator } from "mint-ui";
import loadBMap from "../assets/js/map.js";
import bottom from "../components/bottom";
import { setTimeout } from "timers";
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  name: "welcomeNav",
  components: {
    bottom
  },
  data() {
    return {
      mapId: "BMap-" + parseInt(Date.now() + Math.random()),
      myMap: null,
      keyword: "",
      lng: 0,
      lat: 0,
      success: false,
      center: [121.59996, 31],
      ak: "你的百度key",
      geolocation: {},
      type3: [550, 30]
    };
  },
  methods: {
    initMap() {
      loadBMap(this.ak)
        .then(() => {
          // 百度地图API功能
          var self = this;
          this.myMap = new BMap.Map(this.mapId); // 创建Map实例
          this.geolocation = new BMap.Geolocation();
          self.myMap.centerAndZoom(new BMap.Point(113.7235, 34.711), 16);
          //添加地图类型控件
          this.myMap.addControl(
            new BMap.MapTypeControl({
              mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
            })
          );
          this.myMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
          self.ajax("post", this.host + "/Navigation/selectAll", {}, function(
            //获取标注点
            res
          ) {
            for (var i in res.data) {
              var point = new BMap.Point(
                res.data[i].longitude,
                res.data[i].dimensionality
              );
              var marker = new BMap.Marker(point); // 创建标注
              self.myMap.addOverlay(marker); // 将标注添加到地图中
              var label = new BMap.Label(res.data[i].label, {
                offset: new BMap.Size(20, -10)
              });
              marker.setLabel(label);
            }
            if (res.data.length > 0) {
              if (navigator.geolocation.getCurrentPosition) {
                //h5定位
                Indicator.open("定位中...");
                navigator.geolocation.getCurrentPosition(
                  function(position) {
                    var p1 = new BMap.Point(
                      position.coords.longitude,
                      position.coords.latitude
                    );
                    setTimeout(function() {
                      var convertor = new BMap.Convertor();
                      var pointArr = [];
                      pointArr.push(p1);
                      convertor.translate(
                        pointArr,
                        self.getTransType(position.coords.accuracy), //获取需转换的类型
                        5,
                        function(data) {
                          if (data.status === 0) {
                            p1 = data.points[0];
                          }
                          var mk = new BMap.Marker(p1);
                          self.myMap.addOverlay(mk); //标出所在地
                          var p2 = new BMap.Point(
                            res.data[0].longitude,
                            res.data[0].dimensionality
                          );
                          var transit = new BMap.TransitRoute(self.myMap, {
                            renderOptions: { map: self.myMap }
                          });
                          transit.search(p1, p2);
                          Indicator.close();
                        }
                      );
                    }, 1000);
                  },
                  function(error) {
                    //H5定位失败之后调用高德地图
                    lazyAMapApiLoaderInstance.load().then(() => {
                      var map = new AMap.Map("container", {
                        resizeEnable: true
                      });
                      AMap.plugin("AMap.Geolocation", function() {
                        var geolocation = new AMap.Geolocation({
                          enableHighAccuracy: true, //是否使用高精度定位,默认:true
                          timeout: 10000, //超过10秒后停止定位,默认:5s
                          buttonPosition: "RB", //定位按钮的停靠位置
                          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                          zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
                        });
                        map.addControl(geolocation);
                        geolocation.getCurrentPosition(function(
                          status,
                          result
                        ) {
                          if (status == "complete") {
                            self.lat = result.position.lat;
                            self.lng = result.position.lng;
                            var position = new BMap.Point(self.lng, self.lat);
                            setTimeout(function() {
                              var convertor = new BMap.Convertor();
                              var pointArr = [];
                              pointArr.push(position);
                              convertor.translate(pointArr, 1, 5, function(
                                data
                              ) {
                                if (data.status === 0) {
                                  var p1 = data.points[0];
                                  var p2 = new BMap.Point(
                                    res.data[0].longitude,
                                    res.data[0].dimensionality
                                  );
                                  var transit = new BMap.TransitRoute(
                                    self.myMap,
                                    {
                                      renderOptions: { map: self.myMap }
                                    }
                                  );
                                  Indicator.close();
                                  transit.search(p1, p2);
                                }
                              });
                            }, 1000);
                          }else{
                            Indicator.close();
                            Toast('无法获取您的位置信息');
                          }
                        },function(){
                          Indicator.close();
                          Toast('无法获取您的位置信息');
                        });
                      });
                    });
                  },
                  { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
                );
              } else {
                Toast("您的浏览器不支持获取位置信息!");
              }
            }
          });
        })
        .catch(err => {
          Toast("您的浏览器不支持地图的调用!");
        });
    },
    getTransType(accuracy) {
      if (window.localStorage) {
        var transType = localStorage.getItem("xdlcfwapp_transType");
        if (transType != null && transType != "") {
          return transType;
        }
      }

      for (var i = 0; i < this.type3.length; i++) {
        if (this.type3[i] == accuracy) {
          localStorage.setItem("xdlcfwapp_transType", 3);
          return 3;
        }
      }
      localStorage.setItem("xdlcfwapp_transType", 1);
      return 1;
    },
    search() {}
  },
  created() {
    var self = this;
    self.initMap();
  }
};
</script>
<style scoped>
.welcomeNav {
  padding-top: 44px;
  padding-bottom: 50px;
  background-color: #f9f9f9;
}
.content {
  padding: 8px 0 8px;
  text-align: center;
}
.bm-view {
  width: 100%;
  height: 600px;
}
.search-input {
  text-indent: 3em;
  border-radius: 3px;
  width: 95%;
  height: 35px;
  margin: 5px auto 10px;
}
.search {
  width: 18px;
  position: absolute;
  left: 6%;
  top: 12px;
}
.map-area {
  width: 100%;
  height: 500px;
}
</style>

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

    原文作者:祝英超
    原文地址: https://blog.csdn.net/qq_40002279/article/details/94595398
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞