|
|
<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.302377,
|
|
|
longitude: 120.625826,
|
|
|
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.302377,120.625826;title:中共苏州独立支部旧址;addr:苏州市姑苏区体育场路4号&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 || '苏州市姑苏区体育场路4号',
|
|
|
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>
|
