From 9d9dfdccd7ff211dd91291bcbc9e4c02fb2e617b Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期三, 18 三月 2026 11:46:14 +0800
Subject: [PATCH] fix(地图): 优化地图视图更新逻辑，避免中心点跳动
---
src/robotaxi/pages/order/detail/index.tsx | 38 +++++++++++++++----
src/pages/robotaxi/home/index.tsx | 42 +++++++++-----------
2 files changed, 49 insertions(+), 31 deletions(-)
diff --git a/src/pages/robotaxi/home/index.tsx b/src/pages/robotaxi/home/index.tsx
index 22881ae..3b1c1cd 100644
--- a/src/pages/robotaxi/home/index.tsx
+++ b/src/pages/robotaxi/home/index.tsx
@@ -282,8 +282,6 @@
const switchedCity = Taro.getStorageSync('selectedCity');
if (switchedCity?.name) {
getCityLocation(switchedCity.name).then((loc) => {
- setLatitude(loc.latitude);
- setLongitude(loc.longitude);
shouldIgnoreRegionChange.current = true;
skipNextLocationCenterRef.current = true;
const mapCtx = Taro.createMapContext('map');
@@ -443,8 +441,6 @@
// 定位到城市中心
if (selectedCity.name && allowMapMove) {
getCityLocation(selectedCity.name).then(loc => {
- setLatitude(loc.latitude);
- setLongitude(loc.longitude);
skipNextLocationCenterRef.current = true;
shouldIgnoreRegionChange.current = true;
const mapCtx = Taro.createMapContext('map');
@@ -463,8 +459,6 @@
// 定位到城市中心
if (selectedCity.name && allowMapMove) {
getCityLocation(selectedCity.name).then(loc => {
- setLatitude(loc.latitude);
- setLongitude(loc.longitude);
skipNextLocationCenterRef.current = true;
shouldIgnoreRegionChange.current = true;
const mapCtx = Taro.createMapContext('map');
@@ -661,7 +655,7 @@
const systemSetting = await Promise.resolve((Taro as any).getSystemSetting?.());
if (systemSetting?.locationEnabled === false) {
Taro.showToast({
- title: '需开启设备GPS/定位服务开关',
+ title: '需开启设备定位服务开关',
icon: 'none'
});
return;
@@ -724,6 +718,7 @@
if (type === 'begin') {
setShowToolTip(false);
} else if (type === 'end') {
+ const wasReturningToOrigin = isReturningToOrigin.current;
if (isReturningToOrigin.current) {
isReturningToOrigin.current = false;
}
@@ -756,26 +751,27 @@
mapCtx.getCenterLocation({
success: async (res) => {
const { latitude: lat, longitude: lng } = res;
- if (causedBy === 'gesture' || causedBy === 'drag') {
- setLatitude(lat);
- setLongitude(lng);
- }
+ // 移除 setLatitude 和 setLongitude，避免拖动后地图中心点跳动回旧位置
+ // if (causedBy === 'gesture' || causedBy === 'drag') {
+ // setLatitude(lat);
+ // setLongitude(lng);
+ // }
try {
- // 更新地图数据
- const { newMarkers, sites } = await updateMapData(lat, lng);
+ // 更新地图数据
+ const { newMarkers, sites } = await updateMapData(lat, lng);
- const nearestCandidates = sites.length > 0 ? sites : newMarkers;
- const { targetMarker, minDistance } = findNearestMarker(lat, lng, nearestCandidates);
+ const nearestCandidates = sites.length > 0 ? sites : newMarkers;
+ const { targetMarker, minDistance } = findNearestMarker(lat, lng, nearestCandidates);
- // 只有用户手势拖动触发的移动才进行吸附判断
- if ((causedBy === 'gesture' || causedBy === 'drag') && targetMarker && minDistance < adsorptionDistance) {
- // 使用 moveToLocation 实现吸附效果
- mapCtx.moveToLocation({
- latitude: targetMarker.latitude,
- longitude: targetMarker.longitude,
- });
- }
+ // 用户手势拖动或点击回到原点触发的移动，进行吸附判断
+ if ((causedBy === 'gesture' || causedBy === 'drag' || wasReturningToOrigin) && targetMarker && minDistance < adsorptionDistance) {
+ // 使用 moveToLocation 实现吸附效果
+ mapCtx.moveToLocation({
+ latitude: targetMarker.latitude,
+ longitude: targetMarker.longitude,
+ });
+ }
// 根据距离决定是否显示 ToolTip
setTimeout(() => {
diff --git a/src/robotaxi/pages/order/detail/index.tsx b/src/robotaxi/pages/order/detail/index.tsx
index 106fcc8..cc10bda 100644
--- a/src/robotaxi/pages/order/detail/index.tsx
+++ b/src/robotaxi/pages/order/detail/index.tsx
@@ -27,6 +27,7 @@
// 地图相关状态
const [longitude, setLongitude] = useState(116.397128) // 地图中心点经度
const [latitude, setLatitude] = useState(39.916527) // 地图中心点纬度
+ const [scale, setScale] = useState(12) // 地图缩放级别，默认 12 以展示较大范围
const [markers, setMarkers] = useState<any[]>([]) // 起点和终点标记
const [polyline, setPolyline] = useState<any[]>([]) // 行驶路径
@@ -147,10 +148,14 @@
})
.filter(Boolean) as Array<{ longitude: number; latitude: number }>
: [startPoint, endPoint].filter(Boolean) as Array<{ longitude: number; latitude: number }>;
+
+ // 设置地图中心点，确保地图移动到目标区域
const center = getPointsCenter(routePath);
if (center) {
setLongitude(center.longitude);
setLatitude(center.latitude);
+ // 稍微缩小一点，让用户能看到更多周围信息，减少后续 includePoints 的跳动感
+ setScale(12);
}
if (status === 0) {
@@ -169,18 +174,34 @@
};
useEffect(() => {
- if (!polyline.length) return
- let viewportPoints = polyline;
- if (polyline.length == 1) {
- viewportPoints = polyline[0].points;
+ if (!polyline.length && !markers.length) return
+ let viewportPoints: any[] = [];
+ if (polyline.length > 0) {
+ if (polyline[0].points) {
+ viewportPoints = viewportPoints.concat(polyline[0].points);
+ } else if (Array.isArray(polyline)) {
+ viewportPoints = viewportPoints.concat(polyline);
+ }
}
+ if (markers.length > 0) {
+ viewportPoints = viewportPoints.concat(markers);
+ }
+ // 过滤数据，只保留 latitude 和 longitude
+ const purePoints = viewportPoints.map(p => ({
+ latitude: p.latitude,
+ longitude: p.longitude
+ }));
+
const mapCtx = Taro.createMapContext('trip-map');
- Taro.nextTick(() => {
+ // 适当增加延迟，确保 Map 组件渲染完成后再调用 includePoints
+ setTimeout(() => {
mapCtx.includePoints({
- points: viewportPoints,
- padding: [50, 30, 10, 30]
+ points: purePoints,
+ padding: [50, 100, 20, 100],
+ success: () => console.log('includePoints success'),
+ fail: (err) => console.error('includePoints failed', err)
});
- });
+ }, 200);
}, [polyline, markers])
const todescription = () => {
@@ -295,6 +316,7 @@
id="trip-map"
longitude={longitude}
latitude={latitude}
+ scale={scale}
markers={markers}
polyline={polyline}
showLocation={false}
--
Gitblit v1.7.1