refactor travel
This commit is contained in:
Timi
8
miniprogram/pages/main/travel-location-map/index.json
Normal file
8
miniprogram/pages/main/travel-location-map/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-navbar": "tdesign-miniprogram/navbar/navbar",
|
||||
"travel-location-popup": "/components/travel-location-popup/index"
|
||||
},
|
||||
"styleIsolation": "shared"
|
||||
}
|
||||
70
miniprogram/pages/main/travel-location-map/index.less
Normal file
70
miniprogram/pages/main/travel-location-map/index.less
Normal file
@ -0,0 +1,70 @@
|
||||
/* pages/main/travel-location-map/index.less */
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.custom-callout {
|
||||
width: fit-content;
|
||||
padding: 12rpx 16rpx;
|
||||
display: flex;
|
||||
min-width: 300rpx;
|
||||
max-width: 400rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
|
||||
border-radius: 6rpx;
|
||||
flex-direction: column;
|
||||
|
||||
.location-item {
|
||||
display: flex;
|
||||
padding: 6rpx 0;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.type {
|
||||
color: #fff;
|
||||
padding: 2rpx 8rpx;
|
||||
font-size: 24rpx;
|
||||
flex-shrink: 0;
|
||||
background: var(--theme-wx, #07c160);
|
||||
margin-right: 12rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.loading-text {
|
||||
color: #666;
|
||||
padding: 24rpx 48rpx;
|
||||
background: #FFF;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
|
||||
}
|
||||
}
|
||||
}
|
||||
181
miniprogram/pages/main/travel-location-map/index.ts
Normal file
181
miniprogram/pages/main/travel-location-map/index.ts
Normal file
@ -0,0 +1,181 @@
|
||||
// pages/main/travel-location-map/index.ts
|
||||
|
||||
import { TravelLocationApi } from "../../../api/TravelLocationApi";
|
||||
import { TravelLocation, TravelLocationTypeLabel } from "../../../types/Travel";
|
||||
|
||||
interface MapMarker {
|
||||
id: number;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
width: number;
|
||||
height: number;
|
||||
customCallout: {
|
||||
anchorY: number;
|
||||
anchorX: number;
|
||||
display: string;
|
||||
};
|
||||
/** 该位置的所有地点 */
|
||||
locations: TravelLocation[];
|
||||
}
|
||||
|
||||
interface TravelMapData {
|
||||
travelId: number;
|
||||
centerLat: number;
|
||||
centerLng: number;
|
||||
scale: number;
|
||||
markers: MapMarker[];
|
||||
locations: TravelLocation[];
|
||||
includePoints: Array<{ latitude: number; longitude: number }>;
|
||||
isLoading: boolean;
|
||||
detailVisible: boolean;
|
||||
detailIds: number[];
|
||||
}
|
||||
|
||||
Page({
|
||||
data: <TravelMapData>{
|
||||
travelId: 0,
|
||||
centerLat: 39.908823,
|
||||
centerLng: 116.397470,
|
||||
scale: 13,
|
||||
markers: [],
|
||||
locations: [],
|
||||
includePoints: [],
|
||||
isLoading: true,
|
||||
detailVisible: false,
|
||||
detailIds: []
|
||||
},
|
||||
|
||||
onLoad(options: any) {
|
||||
const travelId = options.travelId ? parseInt(options.travelId) : 0;
|
||||
if (travelId) {
|
||||
this.setData({ travelId });
|
||||
this.loadLocations(travelId);
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: "参数错误",
|
||||
icon: "error"
|
||||
});
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
|
||||
/** 加载所有地点 */
|
||||
async loadLocations(travelId: number) {
|
||||
this.setData({ isLoading: true });
|
||||
|
||||
try {
|
||||
const result = await TravelLocationApi.getList({
|
||||
index: 0,
|
||||
size: 100,
|
||||
equalsExample: {
|
||||
travelId
|
||||
}
|
||||
});
|
||||
|
||||
// 过滤有位置信息的地点
|
||||
const locations = result.list.filter(loc => loc.lat && loc.lng);
|
||||
|
||||
if (locations.length === 0) {
|
||||
wx.showToast({
|
||||
title: "暂无位置记录",
|
||||
icon: "none"
|
||||
});
|
||||
this.setData({ isLoading: false });
|
||||
return;
|
||||
}
|
||||
|
||||
// 为每个地点添加类型标签
|
||||
locations.forEach(location => {
|
||||
(location as any).typeLabel = location.type ? TravelLocationTypeLabel[location.type] : "";
|
||||
});
|
||||
|
||||
// 按位置分组，处理重叠地点
|
||||
const locationMap = new Map<string, TravelLocation[]>();
|
||||
locations.forEach(location => {
|
||||
const key = `${location.lat},${location.lng}`;
|
||||
if (!locationMap.has(key)) {
|
||||
locationMap.set(key, []);
|
||||
}
|
||||
locationMap.get(key)!.push(location);
|
||||
});
|
||||
|
||||
// 生成地图标记（每个唯一位置一个标记）
|
||||
const markers: MapMarker[] = Array.from(locationMap.values()).map((locs, index) => ({
|
||||
id: index,
|
||||
latitude: locs[0].lat!,
|
||||
longitude: locs[0].lng!,
|
||||
width: 24,
|
||||
height: 30,
|
||||
customCallout: {
|
||||
anchorY: -2,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
},
|
||||
locations: locs
|
||||
}));
|
||||
|
||||
// 计算中心点（所有标记的平均位置）
|
||||
const centerLat = locations.reduce((sum, l) => sum + l.lat!, 0) / locations.length;
|
||||
const centerLng = locations.reduce((sum, l) => sum + l.lng!, 0) / locations.length;
|
||||
|
||||
// 缩放视野以包含所有标记点
|
||||
const includePoints = locations.map((l) => ({
|
||||
latitude: l.lat!,
|
||||
longitude: l.lng!
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
locations,
|
||||
markers,
|
||||
centerLat,
|
||||
centerLng,
|
||||
includePoints,
|
||||
isLoading: false
|
||||
});
|
||||
} catch (err: any) {
|
||||
wx.showToast({
|
||||
title: "加载失败",
|
||||
icon: "error"
|
||||
});
|
||||
this.setData({ isLoading: false });
|
||||
}
|
||||
},
|
||||
|
||||
/** 标记点击事件 */
|
||||
onMarkerTap(e: any) {
|
||||
const markerId = e.detail.markerId || e.markerId;
|
||||
this.loadLocationDetail(markerId);
|
||||
},
|
||||
|
||||
/** 气泡点击事件 */
|
||||
onCalloutTap(e: any) {
|
||||
const markerId = e.detail.markerId || e.markerId;
|
||||
this.loadLocationDetail(markerId);
|
||||
},
|
||||
|
||||
/** 加载位置详情 */
|
||||
loadLocationDetail(markerId: number) {
|
||||
const marker = this.data.markers[markerId];
|
||||
if (!marker || !marker.locations || marker.locations.length === 0) {
|
||||
return;
|
||||
}
|
||||
// 获取该标记点的所有地点 ID
|
||||
const locationIds = marker.locations.map(loc => loc.id!).filter(id => id);
|
||||
if (locationIds.length === 0) {
|
||||
return;
|
||||
}
|
||||
this.setData({
|
||||
detailVisible: true,
|
||||
detailIds: locationIds
|
||||
});
|
||||
},
|
||||
|
||||
/** 关闭详情 */
|
||||
closeDetail() {
|
||||
this.setData({
|
||||
detailVisible: false
|
||||
});
|
||||
}
|
||||
});
|
||||
32
miniprogram/pages/main/travel-location-map/index.wxml
Normal file
32
miniprogram/pages/main/travel-location-map/index.wxml
Normal file
@ -0,0 +1,32 @@
|
||||
<!--pages/main/travel-location-map/index.wxml-->
|
||||
<t-navbar title="地点地图" left-arrow />
|
||||
<view class="container">
|
||||
<map
|
||||
id="travel-location-map"
|
||||
class="map"
|
||||
latitude="{{centerLat}}"
|
||||
longitude="{{centerLng}}"
|
||||
scale="{{scale}}"
|
||||
markers="{{markers}}"
|
||||
include-points="{{includePoints}}"
|
||||
bindmarkertap="onMarkerTap"
|
||||
bindcallouttap="onCalloutTap"
|
||||
>
|
||||
<cover-view slot="callout">
|
||||
<block wx:for="{{markers}}" wx:key="id" wx:for-index="markerIndex">
|
||||
<cover-view class="custom-callout" marker-id="{{markerIndex}}">
|
||||
<block wx:for="{{item.locations}}" wx:key="id" wx:for-item="location">
|
||||
<cover-view class="location-item">
|
||||
<cover-view wx:if="{{location.typeLabel}}" class="type">{{location.typeLabel}}</cover-view>
|
||||
<cover-view class="title">{{location.title || '未命名地点'}}</cover-view>
|
||||
</cover-view>
|
||||
</block>
|
||||
</cover-view>
|
||||
</block>
|
||||
</cover-view>
|
||||
</map>
|
||||
<view wx:if="{{isLoading}}" class="loading">
|
||||
<view class="loading-text">加载中...</view>
|
||||
</view>
|
||||
<travel-location-popup visible="{{detailVisible}}" ids="{{detailIds}}" bind:close="closeDetail" />
|
||||
</view>
|
||||
Reference in New Issue
Block a user