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

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

@ -8,22 +8,19 @@
.map {
width: 100%;
height: 100%;
}
.custom-callout {
.location {
width: fit-content;
min-width: 350rpx;
max-width: 450rpx;
background: var(--theme-bg-card-secondary);
background: var(--theme-bg-card);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
border-radius: 6rpx;
.callout-content {
.content {
display: flex;
padding: 8rpx 16rpx 8rpx 8rpx;
align-items: flex-start;
.thumb-container {
.thumb {
width: 72rpx;
height: 72rpx;
position: relative;
@ -32,12 +29,12 @@
overflow: hidden;
border-radius: 6rpx;
.thumb {
.img {
width: 100%;
height: 100%;
}
.count-badge {
.badge {
top: 4rpx;
right: 4rpx;
color: #fff;
@ -49,14 +46,15 @@
}
}
.text-container {
.text {
flex: 1;
display: flex;
overflow: hidden;
flex-direction: column;
.location {
.value {
color: var(--theme-text-primary);
width: calc(var(--title-length) * 30rpx);
overflow: hidden;
font-size: 30rpx;
white-space: nowrap;
@ -82,6 +80,7 @@
}
}
}
}
.loading {
top: 50%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -13,16 +13,25 @@
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
class="marker"
wx:for="{{markers}}"
wx:key="id"
wx:for-item="marker"
wx:for-index="markerIndex"
marker-id="{{markerIndex}}"
>
<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>
</block>
</cover-view>
</block>
</cover-view>
</map>
<view wx:if="{{isLoading}}" class="loading">

6
miniprogram/theme.less
View File

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

8
miniprogram/types/Travel.ts
View File

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