Sửa lỗi click vào tour gộp làm tách các scene riêng rẽ
This commit is contained in:
+18
-6
@@ -393,13 +393,11 @@ function initMap() {
|
|||||||
|
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
maxZoom: 19,
|
maxZoom: 19,
|
||||||
// Attribution sẽ được thêm thủ công bên dưới để chỉ hiển thị OpenStreetMap
|
|
||||||
// attribution: '© OpenStreetMap contributors'
|
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
// Khởi tạo Marker Cluster Group CHỈ dành cho Scene (Ảnh mẹ)
|
// Khởi tạo Marker Cluster Group CHỈ dành cho Scene (Ảnh mẹ)
|
||||||
markerClusterGroup = L.markerClusterGroup({
|
markerClusterGroup = L.markerClusterGroup({
|
||||||
zoomToBoundsOnClick: false,
|
zoomToBoundsOnClick: false, // Tắt tự động zoom để xử lý logic tách Tour thủ công
|
||||||
spiderfyOnMaxZoom: true,
|
spiderfyOnMaxZoom: true,
|
||||||
maxClusterRadius: 50,
|
maxClusterRadius: 50,
|
||||||
spiderfyDistanceMultiplier: 3.5, // Tăng thêm khoảng cách để callout ảnh mẹ tách rõ ràng khi tỏa ra
|
spiderfyDistanceMultiplier: 3.5, // Tăng thêm khoảng cách để callout ảnh mẹ tách rõ ràng khi tỏa ra
|
||||||
@@ -422,7 +420,7 @@ function initMap() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Khi click chuột trái vào một cụm callout, thực hiện tách chúng ra
|
// Nếu các Tour được gộp lại cùng nhau (Cluster): Tách các Tour callout ra (Spiderfy)
|
||||||
markerClusterGroup.on('clusterclick', (a) => {
|
markerClusterGroup.on('clusterclick', (a) => {
|
||||||
a.layer.spiderfy();
|
a.layer.spiderfy();
|
||||||
});
|
});
|
||||||
@@ -980,10 +978,19 @@ async function loadScenes(urlToken = null) {
|
|||||||
const markersToAdd = [];
|
const markersToAdd = [];
|
||||||
const activeSceneId = localStorage.getItem('activeSceneId');
|
const activeSceneId = localStorage.getItem('activeSceneId');
|
||||||
let foundProcessing = 0;
|
let foundProcessing = 0;
|
||||||
const seenCoordinates = new Set(); // Dùng để lọc "Ảnh mẹ" (1 marker per location)
|
const seenTours = new Set(); // Sử dụng Set để lọc duy nhất một Marker cho mỗi Tour
|
||||||
|
|
||||||
// Chỉ lặp qua danh sách Scene mẹ, lọc bỏ các hotspots trùng tọa độ
|
// Chỉ lặp qua danh sách Scene mẹ, lọc bỏ các hotspots trùng tọa độ
|
||||||
scenes.forEach((scene) => {
|
scenes.forEach((scene) => {
|
||||||
|
// 0. Lọc theo Tour: Mỗi Tour chỉ hiển thị 1 Callout đại diện trên bản đồ
|
||||||
|
// Ưu tiên hiển thị Scene gốc của Tour hoặc Scene đầu tiên tìm thấy
|
||||||
|
const tourId = scene.tourId?._id || scene.tourId;
|
||||||
|
if (!tourId) return;
|
||||||
|
|
||||||
|
const tourIdStr = tourId.toString();
|
||||||
|
if (seenTours.has(tourIdStr)) return;
|
||||||
|
seenTours.add(tourIdStr);
|
||||||
|
|
||||||
// 1. Kiểm tra tọa độ an toàn - Ngăn chặn treo map do NaN
|
// 1. Kiểm tra tọa độ an toàn - Ngăn chặn treo map do NaN
|
||||||
const latNum = Number(scene.gps?.lat ?? scene.lat);
|
const latNum = Number(scene.gps?.lat ?? scene.lat);
|
||||||
const lngNum = Number(scene.gps?.lng ?? scene.lng);
|
const lngNum = Number(scene.gps?.lng ?? scene.lng);
|
||||||
@@ -1051,9 +1058,14 @@ async function loadScenes(urlToken = null) {
|
|||||||
className: 'custom-scene-tooltip'
|
className: 'custom-scene-tooltip'
|
||||||
});
|
});
|
||||||
|
|
||||||
// Sự kiện Click chuột trái: Vào thẳng trình xem 360
|
// Trường hợp Tour không gộp lại (Marker đơn lẻ): Di chuyển thẳng vào Tour
|
||||||
marker.on('click', () => {
|
marker.on('click', () => {
|
||||||
|
// Luôn di chuyển vào cảnh gốc của Tour
|
||||||
|
if (scene.tourId && scene.tourId.rootSceneId) {
|
||||||
|
openScene(scene.tourId.rootSceneId, scene.tourId.privacy, scene.tourId.shareToken || '');
|
||||||
|
} else {
|
||||||
openScene(scene._id, scene.privacy, scene.shareToken || '');
|
openScene(scene._id, scene.privacy, scene.shareToken || '');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
marker.on('contextmenu', (e) => {
|
marker.on('contextmenu', (e) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user