vue 获取用户地理位置以及经纬度

使用腾讯提供的一个JS接口获取地理位置以及经纬度

步骤一：在页面生命周期函数里面加载以下代码（当前使用的axios请求）

注：开发密钥需在腾讯地图官网申请，申请地址：http://lbs.qq.com/console/mykey.html） ，申请流程很简单。

//生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    axios({
      url: "https://apis.map.qq.com/ws/location/v1/ip", //接口地址（代理把起码路径去掉）
      method: "get", //接口规定，只能用get
      async: true, //异步
      params: { key: "秘钥可以去腾讯地图官网申请", output: "jsonp" }, //参数格式必须用到output传参为jsonp，否则会报跨域问题
      responseType: "jsonp", //跨域，必须用到jsonp
    }).then((res) => {
      var ip = res.data.replace("QQmap&&QQmap(", "").replace(");", "");
      this.ipV = JSON.parse(ip);
    //   this.initMap();
    });
  },

此时的ip变量已经被处理为地理位置以及经纬度

注意：原生jq ajax可以使用以下代码

 $.ajax({
        type: "get",//接口规定，只能用get
        async: true,//异步
        url: "https://apis.map.qq.com/ws/location/v1/ip",//接口地址
        data: {"key":"秘钥可以去腾讯地图官网申请","output":"jsonp"},//参数格式必须用到output传参为jsonp，否则会报跨域问题
        dataType: "jsonp",//跨域，必须用到jsonp
        success: function(result){
            console.log(JSON.stringify(result));
        },
        error: function (XMLHttpRequest,textStatus,errorThrown){
            console.log(JSON.stringify(XMLHttpRequest));
        }
    });

步骤二：vue 可能会拦截请求 导致跨域问题

可以在vue.config.js中进行代理

// 反向代理配置
        proxy: {
            '/ws': {
                target: 'https://apis.map.qq.com/',
                ws: true,
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/ws': '/ws'
                }
            },
        }