移动端浏览器有自带的获取用户经纬度的方法,但是位置会有偏差。如果只是要个大概,就当我没说。

这里我用的是腾讯的api,直接https引用。在页面上加上

<script charset="utf-8"  src="https://map.qq.com/api/js?v=2.exp&key=’你的key‘&libraries=convertor"></script>

这个地方的key需要你去腾讯开放平台申请。具体操作百度。。。。

// 腾讯
    getLGTx() {
      this.getLocation((success) => {
        // 浏览器不支持定位
        if (success.code) {
          console.log("您的手机似乎不允许定位,请检查后重试");
          this.$toast.fail({
            duration: 5000,
            message: "获取地理位置信息失败,请检查是否开启定位后刷新",
          });
        } else {
          var lat = success.coords.latitude;
          var lng = success.coords.longitude;
          console.log(success, "425");
          // //调用地图命名空间中的转换接口   type的可选值为 1:GPS经纬度,2:搜狗经纬度,3:百度经纬度,4:mapbar经纬度,5:google经纬度,6:搜狗墨卡托
          qq.maps.convertor.translate(
            new qq.maps.LatLng(lat, lng),
            1,
            (res) => {
              console.log(res, "525");
              //取出经纬度并且赋值
              let latlng = res[0];
              let latitude = latlng.lat; //纬度
              let longitude = latlng.lng; //经度
              this.surePosition(longitude, latitude);
              // this.jx(latitude, longitude);
            },
            (err) => {
              console.log(err);
            }
          );
        }
      });
    },
    // 腾讯地图定位转换坐标
    getLocation(callback) {
      //判断是否支持 获取本地位置
      if (navigator.geolocation) {
        var n = navigator.geolocation.getCurrentPosition(callback, (fail) => {
          callback({
            msg: "来自非https域名请求",
            code: -2,
          });
        });
      } else {
        callback({
          msg: "你的手机不支持定位",
          code: -1,
        });
      }
    },
//高德逆解析
  surePosition(re0, re1) {
      this.latitude = re0;
      this.longtitude = re1;
      const that = this;
      axios
        .get(
          `https://restapi.amap.com/v3/geocode/regeo?key=’高德申请的key‘&location=${
            re0 + "," + re1
          }&poitype=&radius=1000&extensions=base&batch=false&roadlevel=0`
        )
        .then((response) => {
          console.log("response", response);
          // if (response.data.status) {
          // } else {
          //   that.showCity = "未获取定位";
          // }
          this.province = response.data.regeocode.addressComponent.province; //省份
          this.city = response.data.regeocode.addressComponent.city; //市
          this.area = response.data.regeocode.addressComponent.district; //区县
          this.street = response.data.regeocode.addressComponent.township; //街道
          this.detailed =
            response.data.regeocode.addressComponent.streetNumber.street +
            response.data.regeocode.addressComponent.streetNumber.number; //详细路段
          console.log(this.province);
          console.log(this.city);
          console.log(this.area);
          console.log(this.street);
          console.log(this.detailed);
          console.log("纬度latitude:", this.latitude);
          console.log("经度longtitude:", this.longtitude);
        });
    },

..........................

用法=》this.getLGTx()调用,检测设备是否开启导航,然后获取经纬度,逆解析。

 

这个理我用上了两个平台的接口,是因为我拿不到高德精确的经纬度。腾讯可以,但是逆解析出问题了。高德的逆解析又可以用。所以我就组合起来用了。或许有更好的办法,随意指正