You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
592 lines
14 KiB
592 lines
14 KiB
<template>
|
|
<view>
|
|
<view class="uni-common-mt">
|
|
<view>
|
|
<map
|
|
id="myMap"
|
|
:scale="scale"
|
|
:latitude="latitude"
|
|
:longitude="longitude"
|
|
:polyline="polylines"
|
|
:markers="covers"
|
|
:min-scale="min"
|
|
:max-scale="max"
|
|
:include-points="cloudPoints"
|
|
:show-location="true"
|
|
@markertap.stop="tryDemo"
|
|
@updated="showsd"
|
|
>
|
|
<cover-view v-show="showMp3Title" class="showMp3Title">正在播放:{{ pointData.voicerealname }}</cover-view>
|
|
<cover-view slot="callout" v-if="showCover && pointData.content" class="customCallout" @click="goDetail(pointData.id)">
|
|
<view class="close-btn" @tap.stop="closeThis"><uni-icons type="closeempty" size="35"></uni-icons></view>
|
|
<cover-image style="width: 150rpx; height: 150rpx" mode="scaleToFill" :src="baseUrl + pointData.imgsl"></cover-image>
|
|
<cover-view class="content-box">
|
|
<cover-view class="content-top">
|
|
<cover-view class="content">
|
|
{{ pointData.cname }}
|
|
</cover-view>
|
|
</cover-view>
|
|
<cover-view v-if="plays && pointData.voiceurl" @click.stop="play(pointData.voiceurl)" class="play-stop">
|
|
<cover-image style="width: 30rpx; height: 30rpx; padding: 10rpx" src="../../static/img/icon_play.png"></cover-image>
|
|
<cover-view>语音讲解</cover-view>
|
|
</cover-view>
|
|
<cover-view v-else-if="!plays" @click.stop="pause()" class="play-stop">
|
|
<cover-image style="width: 30rpx; height: 30rpx; padding: 10rpx" src="../../static/img/icon_stop.png"></cover-image>
|
|
<cover-view>语音讲解</cover-view>
|
|
</cover-view>
|
|
<cover-view v-else="!pointData.voiceurl" class="play-stop no-audio">
|
|
<cover-view>暂无讲解</cover-view>
|
|
</cover-view>
|
|
<!-- <cover-view class="go-detail">查看详情>>></cover-view> -->
|
|
<!-- <cover-view > -->
|
|
<!-- <mp-html :content="pointData.content"/> -->
|
|
<!-- {{pointData.content.substring(0, 30)}} -->
|
|
<!-- </cover-view> -->
|
|
</cover-view>
|
|
</cover-view>
|
|
<cover-view class="shaixuan">
|
|
<cover-view class="shaixuan-item" @click="showAllpoint">
|
|
<cover-image v-if="isAllActive" :src="allIcon"></cover-image>
|
|
<cover-image v-else :src="allIcons"></cover-image>
|
|
<cover-view class="small-fnt">全部</cover-view>
|
|
</cover-view>
|
|
<cover-view class="shaixuan-item" @click="showLine">
|
|
<cover-image v-if="isLineActive" :src="lineIcon"></cover-image>
|
|
<cover-image v-else :src="lineIcons"></cover-image>
|
|
<cover-view class="small-fnt">线路</cover-view>
|
|
</cover-view>
|
|
<cover-view class="shaixuan-item" v-for="(item, index) in screenList" @click="screenData(item, index)">
|
|
<cover-image v-if="!item.isActive" :src="'/static/img/' + item.dicremark + '.png'"></cover-image>
|
|
<cover-image v-else :src="'/static/img/' + item.dicremark + '-h.png'"></cover-image>
|
|
<cover-view class="small-fnt">{{ item.dicname }}</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
</map>
|
|
<view>
|
|
<!-- 普通弹窗 -->
|
|
<uni-popup class="popup-content" ref="popup" background-color="#fff" @change="change" type="bottom">
|
|
<view class="popup-content">
|
|
<view class="text" v-for="item in lineData" @click="showlines(item)">
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="clearLine" @tap="clearLine">清除线路</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<view class="my-location" @tap.stop="getMyLocation">
|
|
<image class="myself-location" src="../../static/img/self-location.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
mapCtx: '',
|
|
scale: 18,
|
|
min: 10,
|
|
max: 20,
|
|
coverImg: 'https://www.lbgjtoa.com//upload/image/2023/8/17/bde77f4e92ff4133aeb3fd2dc33b578a.jpg',
|
|
title: 'map',
|
|
latitude: 37.830562,
|
|
longitude: 115.710722,
|
|
allPointData: [],
|
|
jingdian: [],
|
|
partLoat: [],
|
|
inAndOut: [],
|
|
tolite: [],
|
|
tourisCenter: [],
|
|
covers: [],
|
|
datas: [],
|
|
screenList: [],
|
|
pointData: null,
|
|
lineData: [],
|
|
polylines: [],
|
|
cloudPoints: [],
|
|
showCover: false,
|
|
showMp3Title: false,
|
|
plays: true,
|
|
baseUrl: this.$config.ROOTPATH,
|
|
isAllActive: false,
|
|
isLineActive: true,
|
|
allIcon: '/static/img/quanbu.png',
|
|
lineIcon: '/static/img/icon-xl.png',
|
|
allIcons: '/static/img/quanbu-h.png',
|
|
lineIcons: '/static/img/icon-xl-h.png'
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.mapCtx = uni.createMapContext('myMap');
|
|
this.addThings();
|
|
this.getScreeningData();
|
|
this.getLineData();
|
|
// uni.showLoading({
|
|
// title: '手绘图加载中...',
|
|
// mask: true
|
|
// });
|
|
// setTimeout(function () {
|
|
// uni.hideLoading();
|
|
// }, 6000);
|
|
},
|
|
onUnload() {
|
|
this.pause();
|
|
},
|
|
methods: {
|
|
showsd(val) {
|
|
console.log(val);
|
|
},
|
|
// 关闭信息框
|
|
closeThis() {
|
|
this.showCover = false;
|
|
},
|
|
// 线路数据
|
|
getLineData() {
|
|
let this_ = this;
|
|
uni.request({
|
|
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicLineList?pid=334',
|
|
// url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicLineList?pid=363',
|
|
method: 'GET',
|
|
success(res) {
|
|
if (res.data.data && res.data.data.length > 0) {
|
|
res.data.data.forEach((item) => {
|
|
const lines = [];
|
|
const arr = JSON.parse(item.drawlinedata);
|
|
arr.forEach((items) => {
|
|
const obj = {
|
|
longitude: items[0],
|
|
latitude: items[1]
|
|
};
|
|
lines.push(obj);
|
|
});
|
|
const obj = {
|
|
name: item.line_name,
|
|
line: lines
|
|
};
|
|
this_.lineData.push(obj);
|
|
});
|
|
}
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
}
|
|
});
|
|
},
|
|
// 手绘图
|
|
addCoverimg(val) {
|
|
let this_ = this;
|
|
this_.latitude = val.lat;
|
|
this_.longitude = val.lon;
|
|
this_.coverImg = this_.$config.ROOTPATH + val.mapurl;
|
|
this_.mapCtx.addGroundOverlay({
|
|
id: 1,
|
|
src: this_.coverImg,
|
|
bounds: {
|
|
southwest: {
|
|
longitude: val.leftdown_lng,
|
|
latitude: val.leftdown_lat
|
|
},
|
|
northeast: {
|
|
longitude: val.rigthup_lng,
|
|
latitude: val.rigthup_lat
|
|
}
|
|
},
|
|
success(res) {
|
|
console.log(res);
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
},
|
|
complete(das) {
|
|
console.log(das);
|
|
}
|
|
});
|
|
},
|
|
// 点击点位
|
|
tryDemo(val) {
|
|
let this_ = this;
|
|
this_.pause();
|
|
this.datas.forEach((item) => {
|
|
if (item.id == val.detail.markerId) {
|
|
this.pointData = item;
|
|
this.showCover = true;
|
|
}
|
|
});
|
|
},
|
|
// 点位数据
|
|
addThings() {
|
|
let this_ = this;
|
|
uni.request({
|
|
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyMapScenicAndSpotInfo',
|
|
method: 'get',
|
|
data: {
|
|
userkey: '95034a2bb9a843b79dbc93f74599282b',
|
|
id: '334',
|
|
// id: '363',
|
|
spotType: ''
|
|
},
|
|
success(res) {
|
|
const arr = res.data.data;
|
|
this_.datas = arr;
|
|
//确定中心点和手绘图
|
|
arr.forEach((item) => {
|
|
// if (item.id == 363) {
|
|
if (item.id == 334) {
|
|
this_.addCoverimg(item);
|
|
console.log(item);
|
|
this_.longitude = item.lon;
|
|
this_.latitude = item.lat;
|
|
this_.scale = item.start_maplevel;
|
|
this_.min = item.min_maplevel;
|
|
this_.max = item.max_maplevel;
|
|
}
|
|
});
|
|
//添加标点
|
|
this_.addMarker(arr);
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
}
|
|
});
|
|
},
|
|
// 获取分类信息
|
|
getScreeningData() {
|
|
let this_ = this;
|
|
uni.request({
|
|
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicType',
|
|
method: 'post',
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded'
|
|
},
|
|
data: {
|
|
userkey: this_.$param.userkey
|
|
},
|
|
success(res) {
|
|
let arr = [];
|
|
if (res.data.data) {
|
|
res.data.data.forEach((item) => {
|
|
if (item.dicnum != 3605 && item.dicnum != 3606) {
|
|
item.isActive = false;
|
|
arr.push(item);
|
|
}
|
|
});
|
|
}
|
|
this_.screenList = arr;
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
}
|
|
});
|
|
},
|
|
// 筛选
|
|
screenData(val) {
|
|
let this_ = this;
|
|
this_.isAllActive = true;
|
|
this_.isLineActive = true;
|
|
this_.screenList.forEach((item) => {
|
|
item.isActive = false;
|
|
});
|
|
val.isActive = !val.isActive;
|
|
this_.covers = [];
|
|
if (val.dicnum == 3602) {
|
|
this_.covers = this_.partLoat;
|
|
this_.cloudPoints = this_.partLoat;
|
|
} else if (val.dicnum == 3603) {
|
|
this_.covers = this_.inAndOut;
|
|
this_.cloudPoints = this_.inAndOut;
|
|
} else if (val.dicnum == 3604) {
|
|
this_.covers = this_.tolite;
|
|
this_.cloudPoints = this_.tolite;
|
|
} else if (val.dicnum == 3607) {
|
|
this_.covers = this_.tourisCenter;
|
|
this_.cloudPoints = this_.tourisCenter;
|
|
} else {
|
|
this_.covers = this_.jingdian;
|
|
this_.cloudPoints = this_.jingdian;
|
|
}
|
|
},
|
|
// 全部
|
|
showAllpoint() {
|
|
let this_ = this;
|
|
this_.isAllActive = false;
|
|
this_.showCover = false;
|
|
this_.isLineActive = true;
|
|
this_.screenList.forEach((item) => {
|
|
item.isActive = false;
|
|
});
|
|
this_.covers = this_.allPointData;
|
|
this_.cloudPoints = this_.covers;
|
|
},
|
|
// 线路
|
|
showLine() {
|
|
let this_ = this;
|
|
this_.isLineActive = false;
|
|
this_.showCover = false;
|
|
this_.isAllActive = true;
|
|
this_.screenList.forEach((item) => {
|
|
item.isActive = false;
|
|
});
|
|
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
|
this.$refs.popup.open();
|
|
},
|
|
change(e) {},
|
|
showlines(val) {
|
|
let this_ = this;
|
|
(this_.polylines = [
|
|
{
|
|
points: val.line,
|
|
color: '#3269B2',
|
|
arrowLine: true,
|
|
width: 10
|
|
}
|
|
]),
|
|
this_.$forceUpdate();
|
|
this.$refs.popup.close();
|
|
},
|
|
clearLine() {
|
|
let this_ = this;
|
|
this_.polylines = [];
|
|
this.$refs.popup.close();
|
|
},
|
|
// 添加点位
|
|
addMarker(val) {
|
|
let this_ = this;
|
|
this_.covers = [];
|
|
if (val && val.length) {
|
|
let obj = {};
|
|
let pathurl = '';
|
|
val.forEach((item) => {
|
|
// if (item.id && item.id != '' && item.id != null && item.id != 363) {
|
|
if (item.id && item.id != '' && item.id != null && item.id != 334) {
|
|
if (item.types == 3604) {
|
|
pathurl = '/static/img/cesuodian.png';
|
|
} else if (item.types == 3603) {
|
|
pathurl = '/static/img/churudian.png';
|
|
} else if (item.types == 3602) {
|
|
pathurl = '/static/img/tingchedian.png';
|
|
} else if (item.types == 3607) {
|
|
pathurl = '/static/img/youkezhongxindian.png';
|
|
} else {
|
|
pathurl = '/static/img/jingqudian.png';
|
|
}
|
|
obj = {
|
|
id: Number(item.id),
|
|
latitude: item.lat,
|
|
longitude: item.lon,
|
|
title: item.types,
|
|
label: {
|
|
content: item.cname,
|
|
padding: 5,
|
|
anchorX: 20,
|
|
anchorY: -30,
|
|
color: '#600000',
|
|
borderWidth: 0.5,
|
|
borderColor: '#600000',
|
|
borderRadius: 5,
|
|
bgColor: '#fff'
|
|
},
|
|
iconPath: pathurl,
|
|
width: 33,
|
|
height: 35,
|
|
customCallout: {
|
|
anchorY: 0,
|
|
anchorX: 0,
|
|
display: 'BYCLICK'
|
|
}
|
|
};
|
|
this_.allPointData.push(obj);
|
|
if (obj.title == 3604) {
|
|
this_.tolite.push(obj);
|
|
} else if (obj.title == 3603) {
|
|
this_.inAndOut.push(obj);
|
|
} else if (obj.title == 3602) {
|
|
this_.partLoat.push(obj);
|
|
} else if (obj.title == 3607) {
|
|
this_.tourisCenter.push(obj);
|
|
} else {
|
|
this_.jingdian.push(obj);
|
|
}
|
|
}
|
|
});
|
|
this_.covers = this_.allPointData;
|
|
// this_.cloudPoints = this_.allPointData;
|
|
}
|
|
},
|
|
// 播音频
|
|
play(val) {
|
|
this.showMp3Title = true;
|
|
this.plays = false;
|
|
uni.playBackgroundAudio({
|
|
dataUrl: this.$config.ROOTPATH + val
|
|
});
|
|
},
|
|
// 停音频
|
|
pause() {
|
|
let this_ = this;
|
|
uni.stopBackgroundAudio({
|
|
success: function () {
|
|
this_.showMp3Title = false;
|
|
this_.plays = true;
|
|
}
|
|
});
|
|
},
|
|
// 去详情
|
|
goDetail(val) {
|
|
let this_ = this;
|
|
this_.pause();
|
|
uni.navigateTo({
|
|
url: './pointDetail?id=' + val
|
|
});
|
|
},
|
|
// 我的位置
|
|
getMyLocation() {
|
|
let this_ = this;
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success(res) {
|
|
this_.longitude = res.longitude;
|
|
this_.latitude = res.latitude;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
map {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
.customCallout {
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 30rpx;
|
|
width: 90vw;
|
|
height: 220rpx;
|
|
display: inline-flex;
|
|
padding: 10rpx 40rpx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
bottom: 50rpx;
|
|
left: 5vw;
|
|
z-index: 9999;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.content {
|
|
flex: 0 1 auto;
|
|
margin: 0 10px;
|
|
font-size: 36rpx;
|
|
display: inline-flex;
|
|
max-width: 50vw;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.showMp3Title {
|
|
position: fixed;
|
|
top: 50rpx;
|
|
left: 22.5vw;
|
|
width: 48vw;
|
|
height: 46rpx;
|
|
line-height: 46rpx;
|
|
padding: 10rpx 40rpx;
|
|
background-color: #333;
|
|
color: #eee;
|
|
text-align: center;
|
|
border-radius: 50rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
z-index: 9999;
|
|
}
|
|
.shaixuan {
|
|
width: 125rpx;
|
|
position: fixed;
|
|
right: 30rpx;
|
|
top: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.shaixuan-item {
|
|
margin: 15rpx;
|
|
background: #fff;
|
|
padding: 10rpx;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 0 4px 0px #717171;
|
|
}
|
|
.shaixuan-item cover-image {
|
|
width: 50rpx;
|
|
margin: 0 auto;
|
|
}
|
|
.small-fnt {
|
|
font-size: 18rpx;
|
|
margin-top: 10rpx;
|
|
text-align: center;
|
|
}
|
|
.popup-content {
|
|
padding-bottom: 50rpx;
|
|
position: relative;
|
|
}
|
|
.text {
|
|
padding: 10rpx 0;
|
|
border-bottom: 1rpx dashed #999;
|
|
}
|
|
.clearLine {
|
|
width: 18vw;
|
|
background: #eee;
|
|
padding: 10rpx 10rpx;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin-top: 25rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.content-box {
|
|
flex: 1;
|
|
margin-left: 30rpx;
|
|
}
|
|
.play-stop {
|
|
background-color: #f86458;
|
|
color: #eee;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3rpx 20rpx 3rpx 0;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
margin-top: 25rpx;
|
|
margin-left: 15rpx;
|
|
}
|
|
.no-audio{
|
|
padding: 13rpx 20rpx;
|
|
}
|
|
.go-detail {
|
|
margin-top: 20rpx;
|
|
margin-left: 24rpx;
|
|
color: #484848;
|
|
font-size: 28rpx;
|
|
}
|
|
.content-top {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
.my-location {
|
|
position: fixed;
|
|
left: 40rpx;
|
|
bottom: 40rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
z-index: 9;
|
|
}
|
|
.myself-location {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.close-btn {
|
|
position: absolute;
|
|
right: 10rpx;
|
|
top: 0rpx;
|
|
}
|
|
</style>
|
|
|