其实HTML5中有个 Geolocation API 可以获得用户的地理位置，不过它只能返回用户位置的经度和纬度。

下面是一个简单示例：

var x=document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML = "该浏览器不支持获取地理位置。";
    }
}
 
function showPosition(position) {
    x.innerHTML = "纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}

只要给浏览器授权就能在页面上显示出经纬度了，然后我们调用百度的接口，把经纬度信息传入就能返回地理位置信息，如果我们要在vue项目中增加定位功能该怎么做呢，下面是具体的实现步骤。

step1

在index.html中的head标签里写加入这个script标签：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>

ak后面的密钥可以自己去申请，我用的也是别人的（理直气壮）

step2

在methods里写一个调用接口获取地理位置的方法：

data() {
  return {
      address: ''
  }
},
methods: {
   getLocation() {
      let _this = this;
      let geolocation = new BMap.Geolocation();  // 创建百度地理位置实例，代替 navigator.geolocation
      geolocation.getCurrentPosition(function(e) {
          if(this.getStatus() == BMAP_STATUS_SUCCESS){
              // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
              // console.log(_this.lng, _this.lat);
              let point = new BMap.Point(e.point.lng, e.point.lat);
              let gc = new BMap.Geocoder();
              gc.getLocation(point, function(rs){
                  let addComp = rs.addressComponents;  // 返回的结果，大家可以先把rs打印出来看看是什么
                  let address = addComp.city+addComp.district+addComp.street;  // 拼接地址
                  _this.address = address;
                  window.sessionStorage.setItem('address', address);  // 地址存入sessionStorage，再次进入页面就不需要再次请求位置了
              });
          } else {
              console.log(this.getStatus());
          }
      });
    }
}

这里注意在getLocation()方法中先写一句let _this = this;，目的是把vue实例和getCurrentPosition方法中的this区分开，获取到位置信息后可以把它存入sessionStorage中，避免每次进入页面或者刷新页面后都要重新请求位置。
然后在created钩子函数中触发getLocation()方法：

created() {
    let _this = this;
    let sessionLocal = window.sessionStorage.getItem('address');
    if (sessionLocal) {
        _this.address = sessionLocal;
    } else {
        _this.getLocation();
    }
}

这里做一个简单的判断，如果sessionStorage中存在位置信息，就把它赋值给data中的address，否则执行getLocation()方法。

step3

逻辑写完啦，最后就是前端的展示啦！

<h2>
    <span v-if="address">{{address}}</span>
    <span v-else>正在定位当前位置</span>
    <i class="el-icon-position"></i>
</h2>

运行项目，大功告成！虽然定位偏了点，但是当它刷的一下出来了还是很有成就感的！