fix map scale
This commit is contained in:
@ -40,6 +40,7 @@ interface JournalMapData {
|
|||||||
markers: MapMarker[];
|
markers: MapMarker[];
|
||||||
journals: JournalMarker[];
|
journals: JournalMarker[];
|
||||||
customCalloutMarkerIds: number[];
|
customCalloutMarkerIds: number[];
|
||||||
|
includePoints: Array<{ latitude: number; longitude: number }>; // 缩放视野以包含所有点
|
||||||
selectedMarker: JournalMarker | null;
|
selectedMarker: JournalMarker | null;
|
||||||
showDetail: boolean; // 是否显示详情(控制 DOM 存在)
|
showDetail: boolean; // 是否显示详情(控制 DOM 存在)
|
||||||
detailVisible: boolean; // 详情是否可见(控制动画)
|
detailVisible: boolean; // 详情是否可见(控制动画)
|
||||||
@ -54,6 +55,7 @@ Page({
|
|||||||
markers: [],
|
markers: [],
|
||||||
journals: [],
|
journals: [],
|
||||||
customCalloutMarkerIds: [],
|
customCalloutMarkerIds: [],
|
||||||
|
includePoints: [],
|
||||||
selectedMarker: null,
|
selectedMarker: null,
|
||||||
showDetail: false,
|
showDetail: false,
|
||||||
detailVisible: false,
|
detailVisible: false,
|
||||||
@ -62,37 +64,6 @@ Page({
|
|||||||
async onLoad() {
|
async onLoad() {
|
||||||
await this.loadJournals();
|
await this.loadJournals();
|
||||||
},
|
},
|
||||||
/** 计算合适的缩放级别以显示所有标记点 */
|
|
||||||
calculateScale(journals: JournalMarker[]): number {
|
|
||||||
if (journals.length === 0) return 13;
|
|
||||||
if (journals.length === 1) return 15;
|
|
||||||
|
|
||||||
// 计算经纬度的范围
|
|
||||||
const lats = journals.map(j => j.lat);
|
|
||||||
const lngs = journals.map(j => j.lng);
|
|
||||||
const minLat = Math.min(...lats);
|
|
||||||
const maxLat = Math.max(...lats);
|
|
||||||
const minLng = Math.min(...lngs);
|
|
||||||
const maxLng = Math.max(...lngs);
|
|
||||||
|
|
||||||
// 计算跨度
|
|
||||||
const latSpan = maxLat - minLat;
|
|
||||||
const lngSpan = maxLng - minLng;
|
|
||||||
const maxSpan = Math.max(latSpan, lngSpan);
|
|
||||||
|
|
||||||
// 根据跨度映射到缩放级别(scale 范围 3-20)
|
|
||||||
if (maxSpan > 10) return 5;
|
|
||||||
if (maxSpan > 5) return 7;
|
|
||||||
if (maxSpan > 2) return 9;
|
|
||||||
if (maxSpan > 1) return 10;
|
|
||||||
if (maxSpan > .5) return 11;
|
|
||||||
if (maxSpan > .2) return 12;
|
|
||||||
if (maxSpan > .1) return 13;
|
|
||||||
if (maxSpan > .05) return 14;
|
|
||||||
if (maxSpan > .02) return 15;
|
|
||||||
if (maxSpan > .01) return 16;
|
|
||||||
return 17;
|
|
||||||
},
|
|
||||||
/** 加载所有记录 */
|
/** 加载所有记录 */
|
||||||
async loadJournals() {
|
async loadJournals() {
|
||||||
this.setData({ isLoading: true });
|
this.setData({ isLoading: true });
|
||||||
@ -167,8 +138,11 @@ Page({
|
|||||||
// 计算中心点(所有标记的平均位置)
|
// 计算中心点(所有标记的平均位置)
|
||||||
const centerLat = journals.reduce((sum, j) => sum + j.lat, 0) / journals.length;
|
const centerLat = journals.reduce((sum, j) => sum + j.lat, 0) / journals.length;
|
||||||
const centerLng = journals.reduce((sum, j) => sum + j.lng, 0) / journals.length;
|
const centerLng = journals.reduce((sum, j) => sum + j.lng, 0) / journals.length;
|
||||||
// 计算合适的缩放级别
|
// 缩放视野以包含所有标记点
|
||||||
const scale = this.calculateScale(journals) - 2;
|
const includePoints = journals.map((j) => ({
|
||||||
|
latitude: j.lat,
|
||||||
|
longitude: j.lng
|
||||||
|
}));
|
||||||
|
|
||||||
this.setData({
|
this.setData({
|
||||||
journals,
|
journals,
|
||||||
@ -176,7 +150,7 @@ Page({
|
|||||||
customCalloutMarkerIds,
|
customCalloutMarkerIds,
|
||||||
centerLat,
|
centerLat,
|
||||||
centerLng,
|
centerLng,
|
||||||
scale,
|
includePoints,
|
||||||
isLoading: false
|
isLoading: false
|
||||||
});
|
});
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
|
|||||||
@ -8,6 +8,7 @@
|
|||||||
longitude="{{centerLng}}"
|
longitude="{{centerLng}}"
|
||||||
scale="{{scale}}"
|
scale="{{scale}}"
|
||||||
markers="{{markers}}"
|
markers="{{markers}}"
|
||||||
|
include-points="{{includePoints}}"
|
||||||
bindmarkertap="onMarkerTap"
|
bindmarkertap="onMarkerTap"
|
||||||
bindcallouttap="onCalloutTap"
|
bindcallouttap="onCalloutTap"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user