szgb-book-wx/packages/map/map.vue

<template>
	<view>
		
		<!-- H5环境：嵌入iframe地图 -->
		<view v-if="isH5" class="h5-map-container">
			<iframe 
				:src="getMapUrl()"
				width="100%" 
				height="100vh" 
				frameborder="0"
				class="h5-map-iframe">
			</iframe>
			
			<!-- H5环境：底部工具栏 -->
			<view class="h5-map-toolbar">
				<view class="toolbar-content">
					<view class="location-info">
						<view class="location-name">{{info.name || '苏州革命博物馆'}}</view>
						<view class="location-address">{{info.address || '苏州市姑苏区'}}</view>
					</view>
					<view class="navigation-btn" @click="openlocation">
						<text class="nav-text">导航</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 小程序环境：使用uni-app地图组件 -->
		<map v-else style="width: 100%; height: 100vh;position: relative;" @markertap="markertap" :latitude="info.latitude"
			:longitude="info.longitude" :markers="covers"></map>
	</view>
</template>

<script>
	const jweixin = require('jweixin-module');
	
	export default {
		data() {
			return {
				info: {},
				covers: [{
					latitude: 31.297241,
					longitude: 120.580792,
					width: 30,
					height: 30,
					iconPath: '/static/img/location.png',
					id: 1
				}],
				isH5: false
			}
		},
		onLoad() {
			// 检测运行环境
			this.isH5 = typeof window !== 'undefined' && window.location
			
			// H5环境下隐藏标题栏
			if (this.isH5) {
				// H5环境：通过CSS隐藏导航栏
				document.body.style.paddingTop = '0';
				// 隐藏可能的导航栏元素
				const navBar = document.querySelector('.uni-page-head');
				if (navBar) {
					navBar.style.display = 'none';
				}
			}
			
			this.loadInfo();
		},
		onShareAppMessage() {
			return this.util.shareInfo
		},
		
		onShareTimeline(){
			return this.util.shareInfo
		},
		methods: {
			
			// H5环境：生成地图URL
			getMapUrl() {
				if (this.info.latitude && this.info.longitude) {
					// 使用真实坐标
					const url = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${this.info.latitude},${this.info.longitude};title:${encodeURIComponent(this.info.name || '苏州革命博物馆')};addr:${encodeURIComponent(this.info.address || '')}&referer=myapp`;
					return url;
				}
				// 如果没有坐标数据，使用默认坐标
				return 'https://apis.map.qq.com/uri/v1/marker?marker=coord:31.297241,120.580792;title:苏州革命博物馆;addr:苏州市姑苏区&referer=myapp';
			},
			
			markertap() {
				this.openlocation();
			},
			openlocation() {
				if (this.isH5) {
					// H5环境：使用微信JS-SDK
					this.initWxJSSDK();
				} else {
					// 小程序环境：使用uni.openLocation
					uni.openLocation({
						latitude: this.info.latitude,
						longitude: this.info.longitude,
						name: this.info.name,
						address: this.info.address
					});
				}
			},
			
			// 初始化微信JS-SDK
			initWxJSSDK() {
				// 确保jweixin模块已加载
				if (typeof jweixin === 'undefined') {
					console.error('jweixin模块未加载');
					uni.showToast({ title: '请在微信中打开', icon: 'none' });
					return;
				}
				
				const currentUrl = window.location.href.split('#')[0];
				console.log('当前页面URL:', currentUrl);
				
				// 调用后端鉴权接口
				this.util.request({
					api: `/api/mobile/user/wx-jssdk?url=${encodeURIComponent(currentUrl)}`,
					method: 'GET',
					utilSuccess: (res) => {
						console.log('JS-SDK鉴权成功:', res);
						this.configWxJSSDK(res);
					},
					utilFail: (err) => {
						console.error('JS-SDK鉴权失败:', err);
						// 降级方案：使用腾讯地图
						this.fallbackToTencentMap();
					}
				});
			},
			
			// 配置微信JS-SDK
			configWxJSSDK(config) {
				if (typeof jweixin === 'undefined') {
					console.error('jweixin模块未加载');
					this.fallbackToTencentMap();
					return;
				}
				
				jweixin.config({
					debug: config.debug || false,
					beta: config.beta || false,
					appId: config.appId,
					timestamp: config.timestamp,
					nonceStr: config.nonceStr,
					signature: config.signature,
					jsApiList: config.jsApiList || ['openLocation'],
					openTagList: config.openTagList || []
				});
				
				jweixin.ready(() => {
					console.log('微信JS-SDK配置成功');
					this.openWxLocation();
				});
				
				jweixin.error((res) => {
					console.error('微信JS-SDK配置失败:', res);
					this.fallbackToTencentMap();
				});
			},
			
			// 调用微信openLocation
			openWxLocation() {
				jweixin.openLocation({
					latitude: this.info.latitude,
					longitude: this.info.longitude,
					name: this.info.name || '苏州革命博物馆',
					address: this.info.address || '苏州市姑苏区',
					scale: 14,
					infoUrl: ''
				});
			},
			
			// 降级方案：使用腾讯地图
			fallbackToTencentMap() {
				// const mapUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${this.info.latitude},${this.info.longitude};title:${encodeURIComponent(this.info.name || '苏州革命博物馆')};addr:${encodeURIComponent(this.info.address || '苏州市姑苏区')}&referer=myapp`;
				// window.open(mapUrl, '_blank');
			},
			loadInfo() {
				var that = this;
				this.util.request({
					api: '/api/mobile/visit/introduce',
					utilSuccess: function(res) {
						res.latitude = parseFloat(res.latitude);
						res.longitude = parseFloat(res.longitude);
						that.info = res;
						that.covers = []
						that.covers.push({
							latitude: res.latitude,
							longitude: res.longitude,
							width: 30,
							height: 30,
							iconPath: '/static/img/location.png'
						});
					},
					utilFail: function(res) {

					}
				})
			},
		}
	}
</script>

<style>
	/* H5地图iframe容器样式 */
	.h5-map-container {
		width: 100%;
		height: 100vh;
		position: relative;
		background: #f5f5f5;
	}
	
	.h5-map-iframe {
		width: 100%;
		height: 100vh;
		border: none;
		display: block;
	}
	
	/* H5底部工具栏样式 */
	.h5-map-toolbar {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 230rpx;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 999;
	}
	
	.toolbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		height: 100%;
		box-sizing: border-box;
	}
	
	.location-info {
		flex: 1;
		margin-right: 20rpx;
	}
	
	.location-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.location-address {
		font-size: 26rpx;
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.navigation-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 80rpx;
		background: #007AFF;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
		transition: all 0.3s ease;
	}
	
	.navigation-btn:active {
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.4);
	}
	
	.nav-text {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
	}
</style>