uniapp vuecli项目使用小程序JS-SDK 地理位置

在 UniApp 的 VueCLI 项目中，如果你想要集成微信小程序的地理位置功能，可以借助微信官方提供的 JS-SDK（JavaScript SDK）。首先，你需要在你的 Vue 组件中引入微信小程序的 `wx` 对象，并通过 `wx.getLocation()` 或者 `wx.startLocation()` API 获取用户的实时位置。

以下是基本步骤：

1. **安装依赖**：
如果你的 UniApp 模板没有预置，需要在项目的 `uni-app.js` 文件里引入并注册微信小程序组件库：

   import wx from '@dcloudio/uni-engine/dist/mini-wx-api'
   Page({
     onReady() {
       uni.registerComponent('wx-map', () => import('./components/WxMap.vue'))
       // 注册其他小程序插件...
     }
   })

2. **在页面引用**：
在需要使用地图的 Vue 文件中，导入并使用 `WxMap` 组件，并通过它调用地理位置相关的API：

   <template>
     <view>
       <wx-map :options="mapOptions" @locationUpdate="onLocationUpdate"></wx-map>
     </view>
   </template>

   <script>
   export default {
     data() {
       return {
         mapOptions: {},
       };
     },
     methods: {
       onLocationUpdate(e) {
         console.log('用户位置更新:', e.detail);
       },
       getgetLocation() {
         wx.getLocation({
           type: 'gcj02', // 默认为wgs84的gps坐标，如果需要gcj02坐标，可以传入'gcj02'
           success(res) {
             this.mapOptions = { latitude: res.latitude, longitude: res.longitude };
           },
           fail(err) {
             console.error('获取位置失败:', err)
           }
         });
       }
     }
   }
   </script>

3. **权限请求**：
使用之前，别忘了在适当的时候请求用户的地理位置权限。可以在 `onLoad` 或者 `onShow` 事件中请求：

   onLoad() {
     wx.authorize({
       scope: 'scope.userLocation',
       success() {
         this.getgetLocation();
       },
       fail() {
         console.warn('用户拒绝授权获取位置信息');
       }
     });
   }

记得要在微信开发者工具中配置好小程序的权限设置，并且确保已经关联了正确的公众号或小程序账号。