vue3 leaflet定位当前位置

Vue3和Leaflet结合可以方便地在Web应用中添加地图功能，并定位用户的当前位置。以下是使用Vue3和Leaflet实现定位的基本步骤：

1. **安装依赖**：
首先需要安装`vue-leaflet`库，它是Vue组件化的Leaflet封装。你可以通过npm或yarn来安装：

   npm install vue-leaflet @vue/cli-plugin-leaflet
   # 或者使用yarn
   yarn add vue-leaflet @vue/cli-plugin-leaflet

2. **配置map组件**：
在`.vue`文件中，引入`<script setup>`语法并初始化Leaflet map，并在模板中添加位置服务的访问权限：

   <template>
     <div ref="map" style="height: 400px;"></div>
   </template>

   <script setup>
     import { L, useMap } from 'vue-leaflet'
   
     const map = useMap({
       center: [51.505, -0.09], // 初始经纬度，实际项目中可以用navigator.geolocation获取
       zoom: 13,
       plugins: {
         LControlPositioning: true // 添加自定义控制面板
       }
     })
   
     const getLocation = async () => {
       if (navigator.geolocation) {
         try {
           const position = await navigator.geolocation.getCurrentPosition()
           map.flyTo(position.coords)
         } catch (error) {
           console.error('Error getting location', error)
         }
       } else {
         console.log('Geolocation is not supported by this browser.')
       }
     }

     onMounted(() => getLocation())
   </script>

3. **处理错误和用户拒绝**：
`getCurrentPosition()`函数会返回一个Promise，其中包含用户的地理位置信息。如果用户禁止了定位权限或者设备不支持，你需要处理相应的异常。