|
|
<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>
|
|
|
</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: {},
|
|
|
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;
|
|
|
}
|
|
|
</style>
|
