changshu_other/pages/fjtcc.vue

<template>
	<view class="content">
		<cover-view class="fjdd" v-if="ismap">
			<cover-view :class="['fjdd-lm',isyy==1?'fjdd-active':'']" @click="setLm(1)">停车场</cover-view>
			<cover-view :class="['fjdd-lm',isyy==1?'':'fjdd-active']" @click="setLm(2)">厕所</cover-view>
		</cover-view>
		<view class="mparq">
			<map v-if="ismap" @markertap="getMarker" :latitude="lat" :longitude="lon" :markers="covers"></map>
		</view>
		<view class="des">
			<view class="des-left">
				<view class="name">{{nowData.name}}</view>
				<view class="address">{{nowData.address}}</view>
			</view>
			<view class="des-right" @click="daohan">导航</view>
		</view>
	</view>
</template>

<script>
	var amapFile = require('@/components/utils/amap-wx.js'); //如：..­/..­/libs/amap-wx.js
	var myAmapFun;
	export default{
		data(){
			return{
				lon:'',
				lat:'',
				covers:[],
				nowData:{},
				isyy:1,
				ismap:false
			}
		},
		onLoad(option) {
			this.isyy=option.isyy;
			var pages = getCurrentPages();
			var page = pages[pages.length - 1].route;
			// this.share.path='/'+page+'?isyy='+this.isyy;
			// console.log(this.share.path);
			// this.shareline.query={isyy:this.isyy}
			myAmapFun = new amapFile.AMapWX({
				key: 'e40bb317c48b66d558aa77ab126ef8c1'
			});
		},
		onReady() {
			let self = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					self.lon = res.longitude;
					self.lat = res.latitude;
					self.setLm(self.isyy);
				}
			});
		},
		methods:{
			daohan(){
				if(this.nowData.location != ''&&this.nowData.location != null&&this.nowData.location != undefined) {
					var datas = this.nowData.location.split(",");
					uni.openLocation({
						latitude: Number(datas[1]),
						longitude:Number(datas[0])
					})
				}else{
					uni.openLocation({
						latitude:this.nowData.latitude,
						longitude:this.nowData.longitude
					})
				}
			},
			getMarker(e){
				this.ismap=false;
				var id=e.detail.markerId;
				for(var i=0;i<this.covers.length;i++){
					if(this.covers[i].id==id){
						this.nowData=this.covers[i];
						this.covers[i].width=38;
						this.covers[i].height=38;
					}else{
						this.covers[i].width=28;
						this.covers[i].height=28;
					}
				}
				this.ismap=true;
			},
			setLm(type){
				this.ismap=false;
				this.isyy=type;
				if(this.isyy==1){
					this.getfjyy();
				}else{
					this.getfjjc();
				}
			},
			getfjyy(){
				let self = this;
				myAmapFun.getPoiAround({//获取附近停车场
					querytypes:'停车场',
					success: function(data){
						var tmp=[];
						for(var i=0;i<data.markers.length;i++){
							tmp.push({
								id:i,
								width:28,
								height:28,
								latitude: data.markers[i].latitude,
								longitude: data.markers[i].longitude,
								iconPath: 'https://tumaoss.oss-cn-hangzhou.aliyuncs.com/wencheng_xcx/m-ys-yiyuan.png',
								name:data.markers[i].name,
								address:data.markers[i].address
							})
						}
						tmp[0].width=38;
						tmp[0].height=38;
						self.covers= tmp;
						self.nowData=data.poisData[0];
						self.ismap = true;
					},
					// fail:function(){
					// 	self.ismap = true;
					// 	uni.showToast({
					// 		title: '获取失败'
					// 	});
					// }
				})
			},
			getfjjc(){
				let self = this;
				myAmapFun.getPoiAround({//获取附近厕所
					querytypes:'厕所',
					success: function(data){
						var tmp=[];
						for(var i=0;i<data.markers.length;i++){
							tmp.push({
								id:i,
								width:28,
								height:28,
								latitude: data.markers[i].latitude,
								longitude: data.markers[i].longitude,
								iconPath: 'https://tumaoss.oss-cn-hangzhou.aliyuncs.com/wencheng_xcx/m-ys-gonganju.png',
								name:data.markers[i].name,
								address:data.markers[i].address
							})
						}
						tmp[0].width=38;
						tmp[0].height=38;
						self.covers= tmp;
						self.nowData=data.poisData[0];
						self.ismap = true;
					},
					// fail:function(){
					// 	self.ismap = true;
					// 	uni.showToast({
					// 		title: '获取失败'
					// 	});
					// }
				})
			}
		}
	}
</script>

<style lang="scss">
	.fjdd{
		position: absolute;
		top: 20rpx;
		left: 225rpx;
		width: 300rpx;
		height: 70rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		z-index: 999;
		border-radius: 10rpx;
		font-size: 26rpx;
		border: 1rpx solid #227BFB;
		&-lm{
			flex: 1;
			line-height: 70rpx;
			text-align: center;
			color: #227BFB;
			background: #EEF6FF;
		}
		&-active{
			background: #227BFB;
			color: #fff;
		}
	}
	.content{
		width: 750rpx;
		height: 100vh;
	}
	.mparq{
		width: 750rpx;
		height: 85vh;
		background: #eaeaea;
		map{
			width: 750rpx;
			height: 85vh;
		}
	}
	.des{
		width: 750rpx;
		height: 15vh;
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		&-left{
			margin-left: 15rpx;
			width: 600rpx;
			.name{
				font-weight: bold;
				font-size: 32rpx;
			}
			.address{
				font-size: 24rpx;
				color: #ccc;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		&-right{
			width: 100rpx;
			height: 60rpx;
			background: #438BF8;
			border-radius: 20rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			font-size: 26rpx;
		}
	}
</style>