vue 高德地图定位按钮功能实现

Vue高德地图定位按钮功能的实现可以分为以下几个步骤：

1. 引入高德地图的JavaScript SDK库。在Vue的项目中，可以通过npm安装amap-jsapi-loader库，并在入口文件（如main.js）中导入并使用该库加载高德地图的JS API。

2. 在Vue组件中创建地图容器。可以使用AMap.Map()方法创建一个地图的实例并指定容器的id，例如：new AMap.Map('map-container')。

3. 创建定位按钮并绑定相应的点击事件。在Vue组件的template中添加一个按钮元素，并为其添加一个@click事件监听器，用来触发定位功能的实现。

4. 实现定位功能。在点击定位按钮时，触发点击事件的处理函数，在该函数中调用高德地图的定位服务API，如AMap.Geolocation()来获取当前位置的经纬度。

5. 将定位的经纬度设置为地图的中心点，并在地图上显示一个标记点。可以使用AMap.Marker()创建一个标记点实例，然后设置其position为定位的经纬度，并添加到地图上。

6. 可以根据需要，将经纬度转换为具体的地址信息，并在页面中显示。可以使用AMap.Geocoder()的逆地理编码功能，将经纬度转换为地址。

具体代码示例：

<template>
  <div>
    <button @click="getLocation">定位</button>
    <div id="map-container"></div>
    <div>{{location}}</div>
  </div>
</template>

<script>
import AMapLoader from 'amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
      location: ''
    }
  },
  mounted() {
    AMapLoader.load({
      key: 'your-amap-api-key',
      version: '2.0'
    }).then(() => {
      this.map = new AMap.Map('map-container');
    });
  },
  methods: {
    getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position) => {
          const { latitude, longitude } = position.coords;

          this.map.setCenter([longitude, latitude]);
          new AMap.Marker({
            position: [longitude, latitude],
            map: this.map
          });

          const geocoder = new AMap.Geocoder();
          geocoder.getAddress([longitude, latitude]).then((result) => {
            this.location = result.regeocode.formattedAddress;
          });
        });
      } else {
        alert('浏览器不支持定位功能');
      }
    }
  }
};
</script>

需要注意的是，代码中的'your-amap-api-key'需要替换为你自己申请的高德地图API的秘钥。另外，在使用定位功能时，需要用户授权浏览器获取其位置信息。