minman-tv/pages/index2/JZ_xiangQing/mapPage.vue

<template>
	<!-- 地图 -->
	<view class="global">
		<view class="left_box" >
			<view class=""  style="display: flex;width: 100%;height: 6%;">
				<view @click="backBtn" class="back">⬅返回上一级</view>
				
				<view class="left_t"  @click="jia"><image  class="img" src="/static/img/jia.png"></image></view>
				<view class="left_t"  @click="jian"  ><image class="img" src="/static/img/jian.png"></view>
			</view>

			<view class="jz_box_tab" style="">
				<view class="btm_tab" @click="cityBtn(index)" v-for="(item, index) in cityList" :key="item.id" :class="{ active2: btmtab == index }">
					{{ item.name }}
				</view>
			</view>

			<view style="width: 100%;height: 70%; ">
					
			<view class="" v-for="(item, index) in marker" :key="item.id"  style="height: 8%; color:  #67493c; font-size: 10px;line-height: 25px; width: 100%; display: flex;justify-content: space-around;">
				<view @click="markertaps(index)" style="width: 58% ;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;"  :class="{ active2: btmtab2 == index }">{{ item.title }} </view>
				<view @click="detailsBtn(item.id)" class="" style="height: 75%; border-radius: 20px; color: #ffffff; background-color: #67493c; width: 20%; text-align: center;" :class="{ active3: id == item.id }">
				详情
				</view>
			</view>
			
		<view class="page_box" v-if="btmtab==1">
			<view class="page_size" @click="previousPage">
				上一页
			</view>
			<view class="page_size" @click="nextPage">
				下一页
			</view>
		</view>
			</view>
			
		</view>
		<map
			id="map"
			:circles="circles"
			:latitude="latitude"
			:longitude="longitude"
			:markers="marker"
			:scale="scale"
			
			@markertap="markertap"
			style="width: 85%; height: 100%"
		>
		</map>
	</view>
</template>

<script>
import { login } from '../../../config/api';

let that;
export default {
	data() {
		return {		
		    page:1,
		    aa:0,
			id:'',
			btmtab: 0,
			btmtab2: 0,
			marker: [],
			circles: [],
			latitude: 24.511709899939145, //纬度
			longitude: 118.14707269879153, //经度
			scale: 13, //缩放级别,
		 isRequesting: false,
			cityList: [
				{
					name: '闽南',
					id: '5'
				},
				{
					name: '厦门',
					id: '1'
				},
				{
					name: '漳州',
					id: '2'
				},
				{
					name: '泉州',
					id: '3'
				}
			]
		};
	},
	onLoad(o) {
		that = this;
		this.getCity();
		if(o.id){
			this.getContentDetail(o.id)
			
		}else{
				this.ditu();
				
		}
		
	}, 

	methods: {
		getContentDetail(id){
			this.$api.getContentDetails({
				id:id,
				main_body_id:5
			},function(res){
				that.latitude = res.data.latitude;
				that.longitude =  res.data.longitude;
				 that.marker.push({
				 	id: res.data.id,
				 	latitude: parseFloat(res.data.latitude), //纬度
				 	longitude: parseFloat(res.data.longitude), //经度
				 	iconPath: '/static/img/icon_map.png', //显示的图标
				 	width: 30, //宽
				 	height: 30, //高
				 	
				 	title: res.data.title, //标注点名
				 	alpha: 0.5, //透明度,
				 	callout: {
				 		//自定义标记点上方的气泡窗口 点击有效
				 		content:  res.data.title, //文本
				 		color: '#ffffff', //文字颜色
				 		fontSize: 15, //文本大小
				 		borderRadius: 15, //边框圆角
				 		padding: '10',
				 		bgColor: '#5c3c2e', //背景颜色
				 		display: 'ALWAYS' //常显
				 	},
				 
				 	label: {
				 		//自定义标记点上方的文本
				 		content:  res.data.title, //文本
				 		color: '#5c3c2e', //文字颜色
				 		fontSize: 20, //文本大小
				 		bgColor: 'rgba(0,0,0,.2)', // 背景颜色（半透明黑色）
				 		borderRadius: 10, // 边框圆角
				 		padding: [2, 2], // 内边距
				 		textAlign: 'center', // 文本对齐方式
				 		display: 'ALWAYS' // 始终显示标签
				 	}
				 });

			
			})
		},
		cityBtn(i) {
			this.scale= 13,
			this.btmtab = i;
			this.page=1
			this.ditu(this.cityList[i].id);
			
		},	
		previousPage(){
			if(this.page<=1){
				    uni.showToast({
				        title: '没有更多了',
				        icon: 'error'
				    });				 				
				    return;				
			}
			this.aa=0
			this.page--
		  this.ditu(this.cityList[this.btmtab].id); 	
		},
		// 未返回总数量，先写死
		nextPage(){		 	 
			    this.aa = this.marker.length + this.aa
			    if (this.aa >= 88) {
			        uni.showToast({
			            title: '没有更多了',
			            icon: 'error'
			        });			      			
			        return;
			    }
			    this.page++	   
			    this.ditu(this.cityList[this.btmtab].id); 							
		},
		//  顶部城市
		getCity() {
			this.$api.getCity({ main_body_id: '' }, function (res) {
			
				that.cityList = res.data;
				// console.log(that.cityList, 'that.cityList');
			});
		},
		// 点击标记点时触发
		markertap(e) {
			uni.navigateTo({
				url: `/pages/index2/JZ_xiangQing/JZ_xiangQing?id=${e.target.markerId}`
			});
		},
		detailsBtn(id){
			this.id=id
			uni.navigateTo({
				url: '/pages/index2/JZ_xiangQing/JZ_xiangQing?id='+this.id
			});  
		},
		// 文物列表
		markertaps(i) {
			this.btmtab2 = i;
			this.latitude = this.marker[i].latitude;
			this.longitude = this.marker[i].longitude;
		},

		jia() {
			this.scale++;
		},
		jian() {
			this.scale--;
		},
	
		ditu(id) {
			this.$api.getContentList(
				{
					model_id: '1',
					main_body_id: id ? id : '5',
					page:this.page ,
					pageSize: '12'
				},
				function (res) {
					that.marker = [];
					res.data.forEach((item, index) => {
						// console.log(item, 'itemitem');
						that.latitude = item.latitude;
						that.longitude = item.longitude;
						that.marker.push({
							id: item.id,
							latitude: parseFloat(item.latitude), //纬度
							longitude: parseFloat(item.longitude), //经度
							iconPath: '/static/img/icon_map.png', //显示的图标
							width: 30, //宽
							height: 30, //高
						
							title: item.title, //标注点名
							alpha: 0.5, //透明度,
							callout: {
								//自定义标记点上方的气泡窗口 点击有效
								content: item.title, //文本
								color: '#ffffff', //文字颜色
								fontSize: 15, //文本大小
								borderRadius: 15, //边框圆角
								padding: '10',
								bgColor: '#5c3c2e', //背景颜色
								display: 'ALWAYS' //常显
							},

							label: {
								//自定义标记点上方的文本
								content: item.title, //文本
								color: '#5c3c2e', //文字颜色
								fontSize: 20, //文本大小
								bgColor: 'rgba(0,0,0,.2)', // 背景颜色（半透明黑色）
								borderRadius: 10, // 边框圆角
								padding: [2, 2], // 内边距
								textAlign: 'center', // 文本对齐方式
								display: 'ALWAYS' // 始终显示标签
							}
						});
					});
					
				}
			);
		},

		backBtn() {
			uni.navigateBack({
				delta: 1
			});
			
		}
	}
};
</script>

<style>
.active2 {
	width: 480rpx;
	/* height: 140rpx; */
	color: #67493c !important;
	background: transparent !important;
}
.active3 {
	background: transparent !important;
	color: #8e6c4f !important;

}
/deep/.amap-logo {
	display: none !important;
}
/deep/.amap-copyright {
	display: none !important;
}
/deep/.amap-mcode {
	display: none !important;
}
.global {
	display: flex;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.page_box{
	width: 76%;
	height: 20%;
	display: flex;
	justify-content: space-around;
	color: #ffffff;
	font-size: 12px;
	text-align: center;
	position: absolute;
	top: 85%;
	
}.page_size{
	width: 30%;
    height: 20%;
	line-height: 26px;
	background: #5f4033;
	border-radius: 100px;
}
.left_box{
	position: relative;
	width: 17%;
	height: 100%;
	padding: 2%;
	background: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/cb_bg.png') no-repeat;
	background-size: 100% 100%;

}
.left_t{
	width:20% ;
	height: 88%;
}
.img{
	width: 100%;
	height: 100%;
}
.jz_box_tab {
	position: relative;
	top: 2%;
	left: 0;
	width: 100%;
	height: 8%;
	display: flex;
	justify-content: space-around;
}
.btm_tab {
	width: 20%;
	height: 48%;
	color: #ffffff;
	font-size: 12px;
	text-align: center;
	line-height: 25px;
	border-radius: 100px;
	background: #5f4033;
}
.back {
	width: 63%;
	position: relative;
	z-index: 999;
	margin-left: 1%;
	margin-top: 1%;
	font-size: 12px;
	color: #5c3c2e;
}
</style>