| | |
| | | <el-form-item label="打卡位置" |
| | | prop="longitude"> |
| | | <div class="map-container"> |
| | | <div class="map-header" |
| | | <el-button @click="getCurrentLocation" |
| | | style="margin-bottom: 10px"> |
| | | <!-- <el-button @click="getCurrentLocation"> |
| | | <el-icon> |
| | | <Position /> |
| | | </el-icon> |
| | | 当前位置 |
| | | </el-button> --> |
| | | <!-- <span style="margin-left: 10px; color: #909399;font-size: 12px;">点击地图选择位置</span> --> |
| | | </div> |
| | | </el-button> |
| | | <div id="map-container" |
| | | class="map" |
| | | ref="mapContainer"></div> |
| | | <div class="coordinates-info mt10"> |
| | | <el-input v-model="form.longitude" |
| | | readonly |
| | | placeholder="经度" |
| | | @change="handleCoordinateChange" |
| | | style="width: 140px; margin-right: 10px" /> |
| | | <el-input v-model="form.latitude" |
| | | readonly |
| | | placeholder="纬度" |
| | | @change="handleCoordinateChange" |
| | | style="width: 140px; margin-right: 10px" /> |
| | | <!-- <el-input v-model="form.locationName" |
| | | placeholder="地点名称" |
| | |
| | | } |
| | | }; |
| | | |
| | | // 获取当前位置 |
| | | // 获取当前位置 - 使用浏览器定位(更精准) |
| | | const getCurrentLocation = () => { |
| | | if (navigator.geolocation) { |
| | | navigator.geolocation.getCurrentPosition( |
| | | position => { |
| | | const { longitude, latitude } = position.coords; |
| | | form.longitude = longitude; |
| | | form.latitude = latitude; |
| | | const handlePosition = (lng, lat, name) => { |
| | | form.longitude = lng; |
| | | form.latitude = lat; |
| | | if (name) form.locationName = name; |
| | | const position = [lng, lat]; |
| | | if (map) { |
| | | map.setCenter([longitude, latitude]); |
| | | updateMarker([longitude, latitude]); |
| | | updateCircle([longitude, latitude]); |
| | | map.setCenter(position); |
| | | map.setZoom(16); |
| | | updateMarker(position); |
| | | updateCircle(position); |
| | | } |
| | | }; |
| | | |
| | | if (!navigator.geolocation) { |
| | | ElMessage.warning("浏览器不支持定位,请手动选择位置"); |
| | | return; |
| | | } |
| | | |
| | | // 逆地理编码获取地址 |
| | | if (window.AMap) { |
| | | // 加载Geocoder插件 |
| | | window.AMap.plugin("AMap.Geocoder", function () { |
| | | const geocoder = new window.AMap.Geocoder(); |
| | | geocoder.getAddress([longitude, latitude], (status, result) => { |
| | | if (status === "complete" && result.regeocode) { |
| | | form.locationName = result.regeocode.formattedAddress; |
| | | } |
| | | }); |
| | | }); |
| | | } |
| | | ElMessage.info("正在定位中..."); |
| | | |
| | | navigator.geolocation.getCurrentPosition( |
| | | (position) => { |
| | | const { longitude, latitude } = position.coords; |
| | | handlePosition(longitude, latitude, ""); |
| | | ElMessage.success("定位成功"); |
| | | }, |
| | | error => { |
| | | ElMessage.error("获取位置失败,请手动选择"); |
| | | (error) => { |
| | | let msg = "定位失败"; |
| | | switch (error.code) { |
| | | case error.PERMISSION_DENIED: |
| | | msg = "定位权限被拒绝,请在浏览器设置中允许定位"; |
| | | break; |
| | | case error.POSITION_UNAVAILABLE: |
| | | msg = "定位信息不可用"; |
| | | break; |
| | | case error.TIMEOUT: |
| | | msg = "定位超时,请重试"; |
| | | break; |
| | | } |
| | | ElMessage.warning(msg + ",请手动选择位置"); |
| | | }, |
| | | { |
| | | enableHighAccuracy: true, |
| | | timeout: 15000, |
| | | maximumAge: 0 |
| | | } |
| | | ); |
| | | } else { |
| | | ElMessage.error("浏览器不支持地理定位"); |
| | | }; |
| | | |
| | | // 手动输入经纬度时同步地图 |
| | | const handleCoordinateChange = () => { |
| | | const lng = parseFloat(form.longitude); |
| | | const lat = parseFloat(form.latitude); |
| | | if (!isNaN(lng) && !isNaN(lat) && map) { |
| | | const position = [lng, lat]; |
| | | map.setCenter(position); |
| | | updateMarker(position); |
| | | updateCircle(position); |
| | | } |
| | | }; |
| | | |