|
@@ -81,7 +81,6 @@ import { getUserLocation } from "@/utils/geo";
|
|
|
import { getTreeGradient, getTreeEmoji } from "@/utils/theme";
|
|
import { getTreeGradient, getTreeEmoji } from "@/utils/theme";
|
|
|
import { fetchNearbyTrees } from "@/api/tree";
|
|
import { fetchNearbyTrees } from "@/api/tree";
|
|
|
import markerImg from "@/assets/location-marker.png";
|
|
import markerImg from "@/assets/location-marker.png";
|
|
|
-import { wgs84ToGcj02 } from "@/utils/mapTool";
|
|
|
|
|
import L from "leaflet";
|
|
import L from "leaflet";
|
|
|
import "leaflet/dist/leaflet.css";
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
|
|
|
@@ -125,9 +124,8 @@ async function initMap() {
|
|
|
let lat = 22.84905;
|
|
let lat = 22.84905;
|
|
|
try {
|
|
try {
|
|
|
const pos = await getUserLocation();
|
|
const pos = await getUserLocation();
|
|
|
- const gcj = wgs84ToGcj02(pos);
|
|
|
|
|
- lng = gcj.lng;
|
|
|
|
|
- lat = gcj.lat;
|
|
|
|
|
|
|
+ lng = pos.lng;
|
|
|
|
|
+ lat = pos.lat;
|
|
|
} catch {
|
|
} catch {
|
|
|
// 定位失败使用默认坐标
|
|
// 定位失败使用默认坐标
|
|
|
}
|
|
}
|
|
@@ -178,18 +176,10 @@ async function initMap() {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// GPS 定位 → GCJ-02 转换(供 store 定时刷新使用)
|
|
|
|
|
-async function getGcjLocation(): Promise<{ lng: number; lat: number }> {
|
|
|
|
|
- const gps = await getUserLocation();
|
|
|
|
|
- const gcj = wgs84ToGcj02(gps);
|
|
|
|
|
- console.log(`GPS → GCJ-02:${gps.lng},${gps.lat} → ${gcj.lng},${gcj.lat}`);
|
|
|
|
|
- return gcj;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
async function locateUser() {
|
|
async function locateUser() {
|
|
|
locating.value = true;
|
|
locating.value = true;
|
|
|
try {
|
|
try {
|
|
|
- const { lng, lat } = await getGcjLocation();
|
|
|
|
|
|
|
+ const { lng, lat } = await getUserLocation();
|
|
|
locationStore.setLocation(lng, lat);
|
|
locationStore.setLocation(lng, lat);
|
|
|
|
|
|
|
|
if (map) {
|
|
if (map) {
|
|
@@ -275,14 +265,6 @@ async function loadTrees() {
|
|
|
|
|
|
|
|
treeMarkers.push(marker);
|
|
treeMarkers.push(marker);
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
- if (trees.length > 0 && locationStore.lng) {
|
|
|
|
|
- const bounds = L.latLngBounds(
|
|
|
|
|
- trees.map((t: any) => [t.latitude, t.longitude] as L.LatLngTuple),
|
|
|
|
|
- );
|
|
|
|
|
- bounds.extend([locationStore.lat!, locationStore.lng]);
|
|
|
|
|
- map.fitBounds(bounds, { padding: [50, 50] });
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
watch(
|
|
watch(
|
|
@@ -296,7 +278,6 @@ watch(
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
|
await nextTick();
|
|
await nextTick();
|
|
|
- locationStore.setLocationFn(getGcjLocation);
|
|
|
|
|
initMap();
|
|
initMap();
|
|
|
locationStore.startWatch(5000);
|
|
locationStore.startWatch(5000);
|
|
|
});
|
|
});
|
|
@@ -311,7 +292,7 @@ onUnmounted(() => {
|
|
|
.map-page {
|
|
.map-page {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: calc(100vh - 50px);
|
|
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
.map-container {
|
|
.map-container {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -319,7 +300,7 @@ onUnmounted(() => {
|
|
|
}
|
|
}
|
|
|
.map-controls {
|
|
.map-controls {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- bottom: 20px;
|
|
|
|
|
|
|
+ bottom: 80px;
|
|
|
right: 16px;
|
|
right: 16px;
|
|
|
z-index: 1000;
|
|
z-index: 1000;
|
|
|
display: flex;
|
|
display: flex;
|