使用vuemap 实现根据经纬度显示当前位置

可以使用Vue.js和Vue-Mapbox组件库来实现根据经纬度显示当前位置。首先，需要在Vue项目中安装Vue-Mapbox和Mapbox GL JS：

npm install --save vue-mapbox mapbox-gl

然后，在Vue组件中导入所需的组件和Mapbox GL JS：

<template>
  <div>
    <MglMap
      :accessToken="accessToken"
      :style="mapStyle"
      :center="center"
      :zoom="zoom"
    >
      <MglGeolocateControl position="top-right" />
    </MglMap>
  </div>
</template>

<script>
import { MglMap, MglGeolocateControl } from "vue-mapbox";
import mapboxgl from "mapbox-gl";

export default {
  name: "MyMap",
  components: {
    MglMap,
    MglGeolocateControl,
  },
  data() {
    return {
      accessToken: "YOUR_MAPBOX_ACCESS_TOKEN",
      mapStyle: "mapbox://styles/mapbox/streets-v11",
      center: [-122.4194, 37.7749], // 默认位置，可以是经纬度数组或GeoJSON对象
      zoom: 12, // 默认缩放级别
    };
  },
  created() {
    mapboxgl.accessToken = this.accessToken;
  },
};
</script>

在上面的代码中，我们使用`MglMap`组件来显示地图，并将其配置为显示Mapbox街道地图风格，初始位置为旧金山市中心的经纬度。我们还使用`MglGeolocateControl`组件添加了一个定位控件，可以让用户点击按钮来获取其当前位置。这里需要将`accessToken`设置为自己的Mapbox访问令牌。

在组件中也可以添加方法来获取当前位置的经纬度，代码如下：

<template>
  <div>
    <MglMap
      :accessToken="accessToken"
      :style="mapStyle"
      :center="center"
      :zoom="zoom"
    >
      <MglGeolocateControl position="top-right" @geolocate="onGeolocate" />
    </MglMap>
  </div>
</template>

<script>
import { MglMap, MglGeolocateControl } from "vue-mapbox";
import mapboxgl from "mapbox-gl";

export default {
  name: "MyMap",
  components: {
    MglMap,
    MglGeolocateControl,
  },
  data() {
    return {
      accessToken: "YOUR_MAPBOX_ACCESS_TOKEN",
      mapStyle: "mapbox://styles/mapbox/streets-v11",
      center: [-122.4194, 37.7749], // 默认位置，可以是经纬度数组或GeoJSON对象
      zoom: 12, // 默认缩放级别
    };
  },
  created() {
    mapboxgl.accessToken = this.accessToken;
  },
  methods: {
    onGeolocate(event) {
      const { lng, lat } = event.coords;
      console.log(`Current location: ${lng}, ${lat}`);
    },
  },
};
</script>

在上面的代码中，我们定义了一个名为`onGeolocate`的方法，用于处理定位成功事件并输出当前位置的经纬度。该方法会在用户点击定位控件按钮时自动触发。