vue调用百度api获取当前位置

要调用百度API获取当前位置，可以使用百度地图JavaScript API。以下是使用Vue.js实现的代码示例：

1. 在index.html中引入百度地图JavaScript API：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

其中，你需要替换“你的ak”为你申请的百度地图API的AK值。

2. 在Vue组件中定义获取当前位置的方法：

export default {
  data() {
    return {
      currentPosition: null,
    };
  },
  methods: {
    getCurrentPosition() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            const point = new BMap.Point(position.coords.longitude, position.coords.latitude);
            const geoc = new BMap.Geocoder();
            geoc.getLocation(point, (rs) => {
              const addr = rs.addressComponents;
              this.currentPosition = `${addr.province}${addr.city}${addr.district}${addr.street}${addr.streetNumber}`;
            });
          },
          (err) => {
            console.log(err);
          }
        );
      } else {
        console.log("浏览器不支持Geolocation");
      }
    },
  },
};

这里使用了HTML5的Geolocation API获取当前位置，然后使用百度地图JavaScript API的Geocoder类将获取到的经纬度转化为地址字符串。

3. 在Vue组件模板中调用getCurrentPosition方法并显示当前位置：

<template>
  <div>
    <button @click="getCurrentPosition">获取当前位置</button>
    <p v-if="currentPosition">{{ currentPosition }}</p>
  </div>
</template>

这里使用了Vue的条件渲染功能，在获取到当前位置后才显示当前位置字符串。

注意：由于需要使用浏览器的Geolocation API，所以需要在HTTPS协议下运行。