vue实现地图定位功能

Vue可以通过使用第三方地图API来实现地图定位功能，例如使用高德地图API或百度地图API。

以下是使用高德地图API实现地图定位功能的步骤：

1. 在index.html文件中引入高德地图API的JS文件：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2. 在Vue组件中创建地图容器：

<template>
  <div id="map-container"></div>
</template>

3. 在Vue组件的mounted()钩子函数中初始化地图：

mounted() {
  // 初始化地图
  const map = new AMap.Map('map-container', {
    zoom: 11,
    center: [116.397428, 39.90923]
  });
  // 添加定位插件
  map.plugin('AMap.Geolocation', function() {
    const geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, // 是否使用高精度定位，默认:true
      timeout: 10000, // 超过10秒后停止定位，默认：无穷大
      maximumAge: 0, // 定位结果缓存0毫秒，默认：0
      convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true, // 显示定位按钮，默认：true
      buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20), // 定位按钮距离容器左下角的偏移量，默认：Pixel(10, 20)
      showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy: true // 定位成功后自动调整地图视野到定位点，用于范围较小的定位，默认：false
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition();
  });
}

4. 在Vue组件的style标签中设置地图容器的样式：

#map-container {
  width: 100%;
  height: 400px;
}

以上代码实现了在Vue组件中显示一个地图容器，并在mounted()钩子函数中初始化地图，并添加了高德地图的定位插件，实现了地图定位的功能。