vue pc 端获取当前定位

要在Vue PC端获取当前定位，你可以使用HTML5的Geolocation API。以下是基本的代码示例：

// 获取定位信息
navigator.geolocation.getCurrentPosition(position => {
  // 获取到经度和纬度
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  // 在Vue组件中更新数据
  this.latitude = latitude;
  this.longitude = longitude;
}, error => {
  // 定位失败
  console.log(error.message);
});

在这个示例中，`navigator.geolocation.getCurrentPosition`方法用于获取用户的当前位置。如果成功，它将返回一个包含位置信息的对象。你可以从中提取经纬度，并将它们存储在Vue组件中的数据属性中，以便后续使用。

需要注意的是，获取用户的位置信息需要用户授权。在实际应用中，你需要在页面中显示一个请求授权的提示，并在用户同意后才能调用`navigator.geolocation.getCurrentPosition`方法。

相关问题

vue2 高德地图获取当前定位

在Vue2中，可以使用高德地图API来获取当前定位。首先，需要引入高德地图的SDK，并在Vue组件中使用AMap.Geolocation来获取当前位置的经纬度信息。以下是一个示例代码：

首先，在utils文件夹中创建一个名为getLocation.js的文件，用于封装获取经纬度的公用方法。该方法使用了Promise来确保在获取到经纬度信息后再进行后续操作。具体代码如下：

function loadSDK() {
  if (window.AMap) return;
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'http://webapi.amap.com/maps?v=1.4.6&key=*****************'; // ***为申请的高德key
    document.head.appendChild(script);
    script.onload = resolve;
    script.onerror = reject;
  });
}

export default async () => {
  await loadSDK();
  return new Promise((resolve) => {
    AMap.plugin('AMap.Geolocation', () => {
      const geolocation = new AMap.Geolocation({ enableHighAccuracy: false });
      geolocation.getCurrentPosition((status, result) => {
        const res = status === 'complete' ? result.position : { lat: 39.909187, lng: 116.397451 }; // 默认北京 116.397451、39.909187
        console.log('定位结果', res);
        resolve(res);
      });
    });
  });
}

然后，在Vue组件中，可以通过调用上述封装的方法来获取当前定位的经纬度信息。具体代码如下：

import getLocation from '@/utils/getLocation';

export default {
  methods: {
    async getCurrentLocation() {
      try {
        const position = await getLocation();
        // 在这里可以使用获取到的经纬度信息进行后续操作
        console.log('当前定位经纬度', position);
      } catch (error) {
        console.error('获取定位失败', error);
      }
    },
  },
  mounted() {
    this.getCurrentLocation();
  },
};

以上代码中，通过调用`getLocation`方法来获取当前定位的经纬度信息，并在`getCurrentLocation`方法中进行后续操作。在Vue组件的`mounted`钩子函数中调用`getCurrentLocation`方法来获取当前定位信息。

请注意，上述代码中的高德地图SDK的引入地址和申请的key需要根据实际情况进行修改。
#### 引用[.reference_title]
- *1* *2* [(2023进阶版）vue+h5 通过高德地图（原生） 获取当前位置定位](https://blog.csdn.net/yangzixiansheng/article/details/131308415)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue使用高德地图获取当前经纬度](https://blog.csdn.net/V_AYA_V/article/details/105275063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]