timi/gaoYuJournal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix map marker width

Browse Source
This commit is contained in:
Timi
2025-12-18 19:21:46 +08:00
parent 186a74bc77
commit 6f74559c01
11 changed files with 130 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
miniprogram/pages/main/journal-map/index.less
View File

@ -8,75 +8,74 @@
.map { .map {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.custom-callout { .location {
width: fit-content; width: fit-content;
min-width: 350rpx; background: var(--theme-bg-card);
max-width: 450rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
background: var(--theme-bg-card-secondary); border-radius: 6rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
border-radius: 6rpx; .content {
.callout-content {
display: flex;
padding: 8rpx 16rpx 8rpx 8rpx;
align-items: flex-start;
.thumb-container {
width: 72rpx;
height: 72rpx;
position: relative;
flex-shrink: 0;
margin-right: 12rpx;
overflow: hidden;
border-radius: 6rpx;
.thumb {
width: 100%;
height: 100%;
}
.count-badge {
top: 4rpx;
right: 4rpx;
color: #fff;
padding: 2rpx 6rpx;
position: absolute;
font-size: 20rpx;
background: rgba(0, 0, 0, .7);
border-radius: 8rpx;
}
}
.text-container {
flex: 1;
display: flex; display: flex;
overflow: hidden; padding: 8rpx 16rpx 8rpx 8rpx;
flex-direction: column; align-items: flex-start;
.location { .thumb {
color: var(--theme-text-primary); width: 72rpx;
height: 72rpx;
position: relative;
flex-shrink: 0;
margin-right: 12rpx;
overflow: hidden; overflow: hidden;
font-size: 30rpx; border-radius: 6rpx;
white-space: nowrap;
text-overflow: ellipsis; .img {
margin-bottom: 4rpx; width: 100%;
} height: 100%;
.date-count {
display: flex;
.date {
color: var(--theme-text-secondary);
font-size: 24rpx;
margin-right: 16rpx;
} }
.count { .badge {
color: var(--theme-wx); top: 4rpx;
font-size: 24rpx; right: 4rpx;
font-weight: 600; color: #fff;
padding: 2rpx 6rpx;
position: absolute;
font-size: 20rpx;
background: rgba(0, 0, 0, .7);
border-radius: 8rpx;
}
}
.text {
flex: 1;
display: flex;
overflow: hidden;
flex-direction: column;
.value {
color: var(--theme-text-primary);
width: calc(var(--title-length) * 30rpx);
overflow: hidden;
font-size: 30rpx;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 4rpx;
}
.date-count {
display: flex;
.date {
color: var(--theme-text-secondary);
font-size: 24rpx;
margin-right: 16rpx;
}
.count {
color: var(--theme-wx);
font-size: 24rpx;
font-weight: 600;
}
} }
} }
} }

33
miniprogram/pages/main/journal-map/index.wxml
View File

@ -13,23 +13,28 @@
bindcallouttap="onCalloutTap" bindcallouttap="onCalloutTap"
> >
<cover-view slot="callout"> <cover-view slot="callout">
<block wx:for="{{locations}}" wx:key="locationKey" wx:for-index="markerIndex"> <cover-view
<cover-view class="custom-callout" marker-id="{{markerIndex}}"> class="location"
<cover-view class="callout-content"> wx:for="{{locations}}"
<cover-view wx:if="{{item.previewThumb}}" class="thumb-container"> wx:key="locationKey"
<cover-image class="thumb" src="{{item.previewThumb}}" /> wx:for-index="locationIndex"
<cover-view wx:if="{{item.count > 1}}" class="count-badge">{{item.count}}</cover-view> marker-id="{{locationIndex}}"
</cover-view> style="{{'--title-length: ' + item.location.length}}"
<cover-view class="text-container"> >
<cover-view wx:if="{{item.location}}" class="location">{{item.location}}</cover-view> <cover-view class="content">
<cover-view class="date-count"> <cover-view wx:if="{{item.previewThumb}}" class="thumb">
<cover-view class="date">{{item.date}}</cover-view> <cover-image class="img" src="{{item.previewThumb}}" />
<cover-view wx:if="{{item.count > 1}}" class="count">{{item.count}} 条日记</cover-view> <cover-view wx:if="{{1 < item.count}}" class="badge">{{item.count}}</cover-view>
</cover-view> </cover-view>
<cover-view class="text">
<cover-view wx:if="{{item.location}}" class="value">{{item.location}}</cover-view>
<cover-view class="date-count">
<cover-view class="date">{{item.date}}</cover-view>
<cover-view wx:if="{{1 < item.count}}" class="count">{{item.count}} 条日记</cover-view>
</cover-view> </cover-view>
</cover-view> </cover-view>
</cover-view> </cover-view>
</block> </cover-view>
</cover-view> </cover-view>
</map> </map>
<view wx:if="{{isLoading}}" class="loading"> <view wx:if="{{isLoading}}" class="loading">

25
miniprogram/pages/main/travel-location-detail/index.less
View File

@ -55,28 +55,21 @@
.map { .map {
padding: 0; padding: 0;
}
.mini-map { .instance {
width: 100%; width: 100%;
height: 520rpx; height: 520rpx;
}
.custom-callout { .marker {
width: fit-content; width: calc(var(--title-length) * 28rpx);
max-width: 400rpx;
background: var(--theme-bg-card-secondary);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
border-radius: 8rpx;
.callout-content {
padding: 12rpx 20rpx;
.callout-text {
color: var(--theme-text-primary); color: var(--theme-text-primary);
padding: 8rpx;
overflow: hidden; overflow: hidden;
font-size: 28rpx; font-size: 28rpx;
background: var(--theme-bg-card);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
white-space: nowrap; white-space: nowrap;
border-radius: 8rpx;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }

2
miniprogram/pages/main/travel-location-detail/index.ts
View File

@ -120,7 +120,7 @@ Page({
width: 24, width: 24,
height: 30, height: 30,
customCallout: { customCallout: {
anchorY: 0, anchorY: -2,
anchorX: 0, anchorX: 0,
display: "ALWAYS" display: "ALWAYS"
} }

8
miniprogram/pages/main/travel-location-detail/index.wxml
View File

@ -35,7 +35,7 @@
<t-cell class="map"> <t-cell class="map">
<map <map
slot="description" slot="description"
class="mini-map" class="instance"
latitude="{{location.lat}}" latitude="{{location.lat}}"
longitude="{{location.lng}}" longitude="{{location.lng}}"
markers="{{mapMarkers}}" markers="{{mapMarkers}}"
@ -43,10 +43,8 @@
show-location show-location
> >
<cover-view slot="callout"> <cover-view slot="callout">
<cover-view class="custom-callout" marker-id="0"> <cover-view class="marker" marker-id="0" style="--title-length: {{location.title.length}}">
<cover-view class="callout-content"> {{location.title || '地点'}}
<cover-view class="callout-text">{{location.title || '地点'}}</cover-view>
</cover-view>
</cover-view> </cover-view>
</cover-view> </cover-view>
</map> </map>

4
miniprogram/pages/main/travel-location-editor/index.json
View File

@ -7,13 +7,11 @@
"t-input": "tdesign-miniprogram/input/input", "t-input": "tdesign-miniprogram/input/input",
"t-button": "tdesign-miniprogram/button/button", "t-button": "tdesign-miniprogram/button/button",
"t-dialog": "tdesign-miniprogram/dialog/dialog", "t-dialog": "tdesign-miniprogram/dialog/dialog",
"t-picker": "tdesign-miniprogram/picker/picker",
"t-navbar": "tdesign-miniprogram/navbar/navbar", "t-navbar": "tdesign-miniprogram/navbar/navbar",
"t-loading": "tdesign-miniprogram/loading/loading", "t-loading": "tdesign-miniprogram/loading/loading",
"t-stepper": "tdesign-miniprogram/stepper/stepper", "t-stepper": "tdesign-miniprogram/stepper/stepper",
"t-textarea": "tdesign-miniprogram/textarea/textarea", "t-textarea": "tdesign-miniprogram/textarea/textarea",
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group", "t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
"t-picker-item": "tdesign-miniprogram/picker-item/picker-item"
}, },
"styleIsolation": "shared" "styleIsolation": "shared"
} }

12
miniprogram/pages/main/travel-location-map/index.less
View File

@ -9,20 +9,17 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
.custom-callout { .marker {
width: fit-content; width: fit-content;
padding: 12rpx 16rpx;
display: flex; display: flex;
min-width: 300rpx; background: var(--theme-bg-card);
max-width: 400rpx;
background: var(--theme-bg-card-secondary);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
border-radius: 6rpx; border-radius: 6rpx;
flex-direction: column; flex-direction: column;
.location-item { .location {
display: flex; display: flex;
padding: 6rpx 0; padding: 8rpx 16rpx 8rpx 8rpx;
align-items: center; align-items: center;
.type { .type {
@ -37,6 +34,7 @@
.title { .title {
flex: 1; flex: 1;
width: calc(var(--title-length) * 28rpx);
color: var(--theme-text-primary, #333); color: var(--theme-text-primary, #333);
overflow: hidden; overflow: hidden;
font-size: 28rpx; font-size: 28rpx;

4
miniprogram/pages/main/travel-location-map/index.ts
View File

@ -2,6 +2,7 @@
import { TravelLocationApi } from "../../../api/TravelLocationApi"; import { TravelLocationApi } from "../../../api/TravelLocationApi";
import { TravelLocation, TravelLocationTypeLabel } from "../../../types/Travel"; import { TravelLocation, TravelLocationTypeLabel } from "../../../types/Travel";
import Toolkit from "../../../utils/Toolkit";
interface MapMarker { interface MapMarker {
id: number; id: number;
@ -110,7 +111,8 @@ Page({
height: 30, height: 30,
customCallout: { customCallout: {
anchorY: -2, anchorY: -2,
anchorX: 0, // 随机错位避免近距离重叠
anchorX: Toolkit.random(-10, 10),
display: "ALWAYS" display: "ALWAYS"
}, },
locations: locs locations: locs

27
miniprogram/pages/main/travel-location-map/index.wxml
View File

@ -13,16 +13,25 @@
bindcallouttap="onCalloutTap" bindcallouttap="onCalloutTap"
> >
<cover-view slot="callout"> <cover-view slot="callout">
<block wx:for="{{markers}}" wx:key="id" wx:for-index="markerIndex"> <cover-view
<cover-view class="custom-callout" marker-id="{{markerIndex}}"> class="marker"
<block wx:for="{{item.locations}}" wx:key="id" wx:for-item="location"> wx:for="{{markers}}"
<cover-view class="location-item"> wx:key="id"
<cover-view wx:if="{{location.typeLabel}}" class="type">{{location.typeLabel}}</cover-view> wx:for-item="marker"
<cover-view class="title">{{location.title || '未命名地点'}}</cover-view> wx:for-index="markerIndex"
</cover-view> marker-id="{{markerIndex}}"
</block> >
<cover-view
class="location"
wx:for="{{marker.locations}}"
wx:key="id"
wx:for-item="location"
style="{{'--title-length: ' + location.title.length}}"
>
<cover-view wx:if="{{location.typeLabel}}" class="type">{{location.typeLabel}}</cover-view>
<cover-view class="title">{{location.title || '未命名地点'}}</cover-view>
</cover-view> </cover-view>
</block> </cover-view>
</cover-view> </cover-view>
</map> </map>
<view wx:if="{{isLoading}}" class="loading"> <view wx:if="{{isLoading}}" class="loading">

6
miniprogram/theme.less
View File

@ -68,9 +68,9 @@ page {
--theme-bg-wx: #111; --theme-bg-wx: #111;
--theme-bg-primary: #1A1A1A; --theme-bg-primary: #1A1A1A;
--theme-bg-secondary: #2A2A2A; --theme-bg-secondary: #2A2A2A;
--theme-bg-card: #2C2C2C; --theme-bg-card: #3D3D3D;
--theme-bg-card-secondary: #404040; --theme-bg-card-secondary: #525252;
--theme-bg-journal: #404040; --theme-bg-journal: #4B4B4B;
--theme-bg-overlay: rgba(0, 0, 0, .3); --theme-bg-overlay: rgba(0, 0, 0, .3);
--theme-bg-menu: rgba(40, 40, 40, .95); --theme-bg-menu: rgba(40, 40, 40, .95);

8
miniprogram/types/Travel.ts
View File

@ -96,7 +96,7 @@ export enum TravelLocationType {
ATTRACTION = "ATTRACTION", ATTRACTION = "ATTRACTION",
SHOPPING = "SHOPPING", SHOPPING = "SHOPPING",
PLAY = "PLAY", PLAY = "PLAY",
LIFE = "LEFE" LIFE = "LIFE"
} }
/** 地点类型中文映射 */ /** 地点类型中文映射 */
@ -118,7 +118,7 @@ export const TravelLocationTypeIcon: Record<TravelLocationType, string> = {
[TravelLocationType.ATTRACTION]: "image-1", [TravelLocationType.ATTRACTION]: "image-1",
[TravelLocationType.SHOPPING]: "shop", [TravelLocationType.SHOPPING]: "shop",
[TravelLocationType.PLAY]: "ferris-wheel", [TravelLocationType.PLAY]: "ferris-wheel",
[TravelLocationType.LIFE]: "cart" [TravelLocationType.LIFE]: "location"
}; };
/** 出行地点实体 */ /** 出行地点实体 */
@ -154,10 +154,10 @@ export interface TravelLocation extends Model {
requireAppointment?: boolean; requireAppointment?: boolean;
/** 评分 */ /** 评分 */
score?: number; score?: number | null;
/** 重要程度 */ /** 重要程度 */
importance?: number; importance?: number | null;
/** 附件 */ /** 附件 */
items?: Attachment[]; items?: Attachment[];