LocalLivingServicesUniapp/pages/store/tdtuMap.vue

<template>
	<view class="map_container">
		<view id="MapContainer" style="width: 100%;height: 300px;position: relative;"></view>
	</view>
</template>

<script>
	export default {
		name: "TdMap",
		props: {
			allowSelection: {
				type: Boolean,
				default: false
			},
			showCoordinates: {
				type: Boolean,
				default: false
			},
			mapKey: {
				type: [String, Number],
				default: 0
			}
		},
		mounted() {
			console.log('【地图组件挂载】开始初始化');
		},
		beforeDestroy() {
			// 清理资源
			this.$emit('destroy-map');
		}
	};
</script>

<script module="randerJSMap" lang="renderjs">
	export default {
		data() {
			return {
				mapRef: null,
				markerRef: null,
				labelRef: null,
				mapLoaded: false,
				initPromise: null,
				lastDataHash: '',
				storageCheckTimer: null,
				lastStorageDataStr: ''
			};
		},
		methods: {
			/**
			 * 获取地图容器
			 */
			getMapContainer() {
				return new Promise((resolve) => {
					let container = document.getElementById('MapContainer');
					if (container) {
						console.log('【容器获取】成功', container);
						return resolve(container);
					}

					// APP端兜底
					uni.createSelectorQuery().in(this.$ownerInstance)
						.select('#MapContainer')
						.boundingClientRect((rect) => {
							if (rect) {
								container = document.querySelector('#MapContainer');
								resolve(container);
							} else {
								resolve(null);
							}
						}).exec();
				});
			},

			/**
			 * 直接从storage获取地图数据
			 */
			getMapDataFromStorage() {
				try {
					console.log('【RenderJS开始获取storage数据】');
					const storageData = uni.getStorageSync('address');
					console.log('【RenderJS从storage获取的原始数据】', storageData);
					console.log('【RenderJS数据类型】', typeof storageData);

					let parsedData = null;

					if (storageData) {
						// 如果是字符串，尝试解析为JSON
						if (typeof storageData === 'string') {
							try {
								parsedData = JSON.parse(storageData);
								console.log('【RenderJS解析后的数据】', parsedData);
							} catch (parseError) {
								console.error('【RenderJS JSON解析失败】', parseError);
								return this.getDefaultMapData();
							}
						} else {
							parsedData = storageData;
						}

						// 验证数据格式
						const isValidData = parsedData &&
							typeof parsedData === 'object' &&
							(typeof parsedData.lng !== 'undefined' || parsedData.longitude) &&
							(typeof parsedData.lat !== 'undefined' || parsedData.latitude);

						console.log('【RenderJS数据验证结果】', isValidData);

						if (isValidData) {
							// 支持多种字段名
							const lng = parsedData.lng || parsedData.longitude || 112.55;
							const lat = parsedData.lat || parsedData.latitude || 37.87;
							const address = parsedData.address || parsedData.name || parsedData.location || '未知位置';

							return {
								lng: Number(lng),
								lat: Number(lat),
								address: address,
								isValid: true
							};
						} else {
							console.warn('【RenderJS】storage数据格式无效，使用默认值');
							console.warn('【RenderJS无效数据详情】', parsedData);
							return this.getDefaultMapData();
						}
					} else {
						console.log('【RenderJS】storage中无address数据，使用默认值');
						return this.getDefaultMapData();
					}
				} catch (error) {
					console.error('【RenderJS】从storage获取数据失败', error);
					return this.getDefaultMapData();
				}
			},

			/**
			 * 获取默认地图数据
			 */
			getDefaultMapData() {
				return {
					lng: 112.55,
					lat: 37.87,
					address: '山西省太原市',
					isValid: false
				};
			},

			/**
			 * 创建标记和标签
			 */
			createMarkerWithLabel(lngLat, address) {
				try {
					const T = window.T;
					if (!this.mapLoaded || !lngLat || !this.mapRef) {
						console.error('【标点失败】前置条件不足');
						return;
					}

					// 1. 移除旧标记
					this.clearMarkers();

					// 2. 创建自定义图标（红色标记）
					const icon = new T.Icon({
						iconUrl: this.generateMarkerIcon('#ff0000'),
						iconSize: new T.Point(30, 30),
						iconAnchor: new T.Point(15, 30)
					});

					// 3. 创建标记（使用T.Marker类）
					this.markerRef = new T.Marker(lngLat, {
						icon: icon,
						title: address || '未知位置',
						draggable: false
					});

					// 4. 创建文本标签
					this.labelRef = new T.Label({
						text: address || '未知位置',
						position: lngLat,
						style: {
							color: '#333333',
							backgroundColor: 'rgba(255, 255, 255, 0.9)',
							borderColor: '#ff0000',
							borderWidth: 1,
							borderRadius: 4,
							fontSize: '14px',
							fontWeight: '500',
							padding: '6px 10px'
						},
						offset: new T.Point(0, -40) // 向上偏移
					});

					// 5. 添加到地图
					this.mapRef.addOverLay(this.markerRef);
					this.mapRef.addOverLay(this.labelRef);

					console.log('【创建标记】成功', {
						lng: lngLat.getLng(),
						lat: lngLat.getLat(),
						address
					});

					// 6. 调整地图视图
					this.mapRef.setViewport([lngLat]);

					// 7. 标记点击事件
					this.markerRef.addEventListener('click', (e) => {
						const coord = {
							lng: lngLat.getLng().toFixed(6),
							lat: lngLat.getLat().toFixed(6)
						};
						const message = `地址：${address}\n坐标：${coord.lng}, ${coord.lat}`;

						uni.showModal({
							title: '位置信息',
							content: message,
							showCancel: false,
							confirmText: '确定'
						});
					});

					// 8. 标签点击事件
					this.labelRef.addEventListener('click', (e) => {
						e.stopPropagation();
						uni.showToast({
							title: `地址：${address}`,
							icon: 'none',
							duration: 3000
						});
					});

				} catch (error) {
					console.error('【创建标记异常】', error);
					// 备用方案：使用默认标记
					this.createDefaultMarker(lngLat, address);
				}
			},

			/**
			 * 生成标记图标
			 */
			generateMarkerIcon(color) {
				const size = 30;
				const canvas = document.createElement('canvas');
				canvas.width = size;
				canvas.height = size;

				const ctx = canvas.getContext('2d');

				// 外圆（白色边框）
				ctx.beginPath();
				ctx.arc(size / 2, size / 2, size / 2 - 1, 0, Math.PI * 2);
				ctx.fillStyle = '#ffffff';
				ctx.fill();

				// 内圆（红色）
				ctx.beginPath();
				ctx.arc(size / 2, size / 2, size / 2 - 4, 0, Math.PI * 2);
				ctx.fillStyle = color;
				ctx.fill();

				return canvas.toDataURL();
			},

			/**
			 * 创建默认标记（备用方案）
			 */
			createDefaultMarker(lngLat, address) {
				try {
					const T = window.T;

					// 清除旧标记
					this.clearMarkers();

					// 创建默认标记
					this.markerRef = new T.Marker(lngLat, {
						title: address || '未知位置'
					});

					// 设置默认图标
					this.markerRef.setIcon(new T.Icon.Default());

					// 添加到地图
					this.mapRef.addOverLay(this.markerRef);

					// 标记点击事件
					this.markerRef.addEventListener('click', (e) => {
						const coord = {
							lng: lngLat.getLng().toFixed(6),
							lat: lngLat.getLat().toFixed(6)
						};
						const message = `地址：${address}\n坐标：${coord.lng}, ${coord.lat}`;

						uni.showModal({
							title: '位置信息',
							content: message,
							showCancel: false,
							confirmText: '确定'
						});
					});

					console.log('【创建默认标记】成功');

				} catch (error) {
					console.error('【创建默认标记失败】', error);
				}
			},

			/**
			 * 清除所有标记
			 */
			clearMarkers() {
				try {
					if (this.markerRef && this.mapRef) {
						this.mapRef.removeOverLay(this.markerRef);
						this.markerRef = null;
					}
					if (this.labelRef && this.mapRef) {
						this.mapRef.removeOverLay(this.labelRef);
						this.labelRef = null;
					}
				} catch (error) {
					console.warn('清除标记时出错', error);
				}
			},

			/**
			 * 初始化地图
			 */
			async initMap() {
				try {
					console.log('【初始化地图】开始');

					const T = window.T;
					if (!T || !T.Map) {
						throw new Error('天地图API未正确加载');
					}

					// 获取容器
					const container = await this.getMapContainer();
					if (!container) {
						throw new Error('地图容器获取失败');
					}

					// 直接从storage获取位置数据
					const mapData = this.getMapDataFromStorage();
					console.log('【初始化地图使用的数据】', mapData);

					const center = new T.LngLat(Number(mapData.lng), Number(mapData.lat));
					console.log('【地图中心点】', center);

					// 创建地图实例
					this.mapRef = new T.Map(container);
					this.mapRef.centerAndZoom(center, 16);
					this.mapRef.enableScrollWheelZoom();

					this.mapLoaded = true;
					console.log('【初始化地图】成功');

					// 创建标记和标签
					setTimeout(() => {
						this.createMarkerWithLabel(center, mapData.address);
					}, 500);

				} catch (error) {
					console.error('【初始化失败】', error);
					this.mapLoaded = false;

					uni.showToast({
						title: '地图初始化失败',
						icon: 'error',
						duration: 3000
					});
				}
			},

			/**
			 * 确保API加载完成
			 */
			async ensureAPILoaded() {
				if (window.T && window.T.Map && window.T.LngLat) {
					console.log('【API已加载】');
					return Promise.resolve();
				}

				return new Promise((resolve, reject) => {
					console.log('【开始加载API】');

					// 检查是否已经在加载中
					const existingScript = document.querySelector('script[src*="tianditu.gov.cn"]');
					if (existingScript) {
						console.log('【API已在加载中】');
						const checkInterval = setInterval(() => {
							if (window.T && window.T.Map && window.T.LngLat) {
								clearInterval(checkInterval);
								console.log('【API加载完成】');
								resolve();
							}
						}, 100);

						setTimeout(() => {
							clearInterval(checkInterval);
							reject(new Error('API加载超时'));
						}, 10000);

						return;
					}

					// 加载天地图4.0 API
					const script = document.createElement('script');
					script.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=9bcf63358817bfb878e8236de8bf1423';

					script.onload = () => {
						console.log('【API脚本加载完成】');
						const checkT = setInterval(() => {
							if (window.T && window.T.Map && window.T.LngLat) {
								clearInterval(checkT);
								console.log('【T对象初始化完成】');
								resolve();
							}
						}, 50);

						setTimeout(() => {
							clearInterval(checkT);
							reject(new Error('T对象初始化超时'));
						}, 5000);
					};

					script.onerror = (err) => {
						console.error('API加载失败', err);
						reject(new Error('API加载失败'));
					};

					document.head.appendChild(script);
				});
			},

			/**
			 * 更新地图标记（从storage获取最新数据）
			 */
			updateMapFromStorage() {
				if (!this.mapLoaded || !this.mapRef) {
					console.warn('【更新被跳过】地图未加载');
					return;
				}

				// 获取最新数据
				const mapData = this.getMapDataFromStorage();
				console.log('【更新地图使用的数据】', mapData);

				// 生成数据哈希，避免重复更新
				const dataHash = JSON.stringify(mapData);
				if (dataHash === this.lastDataHash) {
					console.log('【数据未变化，跳过更新】');
					return;
				}

				this.lastDataHash = dataHash;

				// 验证坐标有效性
				const isValidLng = typeof mapData.lng !== 'undefined' && !isNaN(Number(mapData.lng)) && mapData.lng !== null;
				const isValidLat = typeof mapData.lat !== 'undefined' && !isNaN(Number(mapData.lat)) && mapData.lat !== null;

				console.log('【坐标验证】', {
					isValidLng,
					isValidLat,
					lng: mapData.lng,
					lat: mapData.lat
				});

				if (!isValidLng || !isValidLat) {
					console.warn('无效坐标，使用默认值');
					const defaultLngLat = new window.T.LngLat(112.55, 37.87);
					this.createMarkerWithLabel(defaultLngLat, mapData.address || '默认位置');
					return;
				}

				// 创建新标记
				const targetLngLat = new window.T.LngLat(Number(mapData.lng), Number(mapData.lat));

				// 移动地图中心
				this.mapRef.panTo(targetLngLat);

				setTimeout(() => {
					this.createMarkerWithLabel(targetLngLat, mapData.address || '未知位置');
				}, 300);
			},

			/**
			 * 设置storage监听
			 */
			setupStorageListener() {
				// 监听uni-app自定义事件
				uni.$on('storageChange', (data) => {
					console.log('【RenderJS收到storage变化事件】', data);
					if (data && data.key === 'address') {
						this.updateMapFromStorage();
					}
				});

				// 定时检查（兼容性更好）
				this.storageCheckTimer = setInterval(() => {
					this.checkStorageUpdate();
				}, 2000);
			},

			/**
			 * 检查storage是否更新
			 */
			checkStorageUpdate() {
				try {
					const currentData = uni.getStorageSync('address');
					const currentStr = JSON.stringify(currentData);

					// 首次检查时初始化lastStorageData
					if (!this.lastStorageDataStr) {
						this.lastStorageDataStr = currentStr;
						return;
					}

					if (currentStr !== this.lastStorageDataStr) {
						console.log('【storage数据已更新】', currentData);
						this.lastStorageDataStr = currentStr;
						this.updateMapFromStorage();
					}
				} catch (error) {
					console.error('检查storage更新失败', error);
				}
			}
		},
		mounted() {
			console.log('【RenderJS】开始加载');

			// 延迟初始化
			setTimeout(async () => {
				try {
					await this.ensureAPILoaded();
					await this.initMap();

					// 初始化成功后设置监听
					this.setupStorageListener();

					// 保存初始数据用于比较
					try {
						this.lastStorageDataStr = JSON.stringify(uni.getStorageSync('address'));
					} catch (error) {
						this.lastStorageDataStr = '';
					}
				} catch (error) {
					console.error('【初始化失败】', error);
					uni.showToast({
						title: '地图加载失败',
						icon: 'error',
						duration: 3000
					});
				}
			}, 500);
		},
		beforeDestroy() {
			// 清理资源
			if (this.mapRef) {
				this.clearMarkers();
				this.mapRef = null;
			}

			// 清理定时器
			if (this.storageCheckTimer) {
				clearInterval(this.storageCheckTimer);
				this.storageCheckTimer = null;
			}

			// 移除事件监听
			uni.$off('storageChange');

			this.mapLoaded = false;
			console.log('【RenderJS】组件销毁');
		}
	};
</script>

<style scoped lang="scss">
	.map_container {
		position: relative;
		width: 100%;
		height: 300px;
		z-index: 1;
		overflow: hidden;
		background: #f0f0f0;
		border-radius: 8px;
		border: 1px solid #e0e0e0;
	}

	#MapContainer {
		position: relative;
		z-index: 9999;
		display: block;
		width: 100% !important;
		height: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 8px;
	}

	/* 自定义样式 */
	::v-deep .tdt-label {
		cursor: pointer;
		transition: all 0.3s ease;

		&:hover {
			background-color: rgba(255, 255, 255, 1) !important;
			border-color: #ff4444 !important;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
		}
	}

	::v-deep .tdt-marker-icon {
		cursor: pointer;
		transition: transform 0.2s;

		&:hover {
			transform: scale(1.2);
		}
	}
</style>