wx-dangyuanjiaoyujidi/pages/map/map.vue

<template>
	<view>
		<!-- H5环境：嵌入iframe地图 -->
		<view v-if="isH5" class="page-body">
			<view class="page-section page-section-gap">
				<view class="h5-map-container">
					<iframe 
						:src="getMapUrl()"
						width="100%" 
						height="100vh" 
						frameborder="0"
						class="h5-map-iframe">
					</iframe>
				</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>
	export default {
		data() {
			return {
				info: {
					latitude: 31.299893,
					longitude: 120.626022,
					name: '苏州革命博物馆',
					address: '苏州市姑苏区'
				},
				covers: [],
				isH5: false // 是否为H5环境
			}
		},
		onLoad() {
			// 检测运行环境
			this.isH5 = typeof window !== 'undefined' && window.location
			
			this.loadInfo();
		},
		onShareAppMessage() {
			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.299893,120.626022;title:苏州革命博物馆;addr:苏州市姑苏区&referer=myapp';
			},
			markertap() {
				this.openlocation();
			},
			openlocation() {
				if (this.isH5) {
					// H5环境：使用微信JS-SDK或浏览器打开地图
					if (typeof wx !== 'undefined' && wx.openLocation) {
						// 微信JS-SDK
						wx.openLocation({
							latitude: this.info.latitude,
							longitude: this.info.longitude,
							name: this.info.name,
							address: this.info.address,
							scale: 14
						});
					} else {
						// 降级方案：使用腾讯地图
						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');
					}
				} else {
					// 小程序环境：使用uni.openLocation
					uni.openLocation({
						latitude: this.info.latitude,
						longitude: this.info.longitude,
						name: this.info.name,
						address: this.info.address
					});
				}
			},
			loadInfo(cb) {
				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;
						
						// 只有在小程序环境中才添加地图标记
						if (!that.isH5) {
							that.covers.push({
								latitude: res.latitude,
								longitude: res.longitude,
								width: 70,
								height: 70,
								iconPath: '/static/img/location.png'
							});
						}
						
						// 如果有回调函数则执行
						if (cb) {
							cb(res);
						}
					},
					utilFail: function(res) {

					}
				})
			},
		}
	}
</script>

<style>
	/* H5地图iframe容器样式 */
	.h5-map-container {
		width: 100%;
		height: 100vh;
		position: relative;
		background: #f5f5f5;
	}
	
	.h5-map-iframe {
		width: 100%;
		height: 100%;
		border: none;
		display: block;
	}
	
	.page-body {
		width: 100%;
		height: 100vh;
		position: relative;
	}
	
	.page-section {
		width: 100%;
		height: 100%;
	}
	
	.page-section-gap {
		padding: 0;
	}
</style>