wxThird/pages/index/rescue.vue

<template>
	<view class="box">
		<map  :latitude="latitude" 
		:longitude="longitude" :markers="covers"
		 @poitap="tapfn" class="mapbox"
		 :include-points="points" ></map><!-- @regionchange="regionchangefn" :style="{height:mapHeight + 'px'}" -->

		<view class="contBox" >
			<view class="tab">
				<view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">现在</view>
				<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">预约</view>
			</view>

			<view class="timeBox">
				<view class="time">预约救援时间</view>
				<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
			</view>


			<view class="typeBox">
				<view class="box2">
					<image src="../../static/img/icon_dadian_N.png" mode="" class="typeImg"></image>
					<view class="title">搭电</view>
				</view>
				<view class="box2">
					<image src="../../static/img/icon_tuoche_N.png" mode="" class="typeImg"></image>
					<view class="title">拖车</view>
				</view>
				<view class="box2">
					<image src="../../static/img/icon_luntai_N.png" mode="" class="typeImg"></image>
					<view class="title">换胎</view>
				</view>
			</view>

			<view class="price">服务费用 199元/次</view>

			<view class="shopBox">
				<view class="left">
					<view class="graypoint"></view>
					<view class="leftTitle">门店</view>
					<view class="content">服务门店可修改</view>
				</view>
				<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>

			</view>

			<view class="shopBox">
				<view class="left">
					<view class="graypoint"></view>
					<view class="leftTitle">位置</view>
					<view class="content">{{currentAddress}}</view>
				</view>
				<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
			
			</view>
			
			<view class="shopBox" @click="endBtn">
				<view class="left">
					<view class="graypoint"></view>
					<view class="leftTitle">终点</view>
					<view class="content">{{endAddress}}</view>
				</view>
				<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
			
			</view>
			
		</view>

		<view class="bottomView">
			<view class="sure" @click="sure">确定</view>
		</view>

	</view>
</template>

<script>
	import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				covers: [
					// {
					// latitude: 39.909,
					// longitude: 116.39742,
					// iconPath: '../../static/img/icon_qidian.png'
				 //  }, {
					// latitude: 39.90,
					// longitude: 116.39,
				 //  	iconPath: '../../static/img/icon_zhongdian.png'
				 //   },
				],
				tabIndex: 0,
				tMap:'',
				mapHeight:200,
				currentAddress:'',
				endAddress:'',
				points: [],  
			}
		},
		onLoad() {
			var that = this
			const tMap = new QQMapWX({
				key: 'L2GBZ-CIS6J-HRFFV-K5LO6-QROT7-BQFXZ' //开发者密钥 //这里要换成自己的key
			});
			this.tMap=tMap
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		this.mapHeight = res.windowHeight  *2 - 664 - 120
			// 	}
			// })
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.latitude=res.latitude;
					that.longitude=res.longitude;
					var obj={
						 latitude: that.latitude,
						 longitude: that.longitude,
						 iconPath: '../../static/img/icon_qidian.png',
						 width:36,
						 height:56
					}
					that.covers.push(obj);
					that.points.push({
						longitude: that.longitude,  
						latitude:that.latitude 
					})
					that.tMap.reverseGeocoder({
						location: {
							latitude: that.latitude,
							longitude: that.longitude
						},
						success: function(res) {
							console.log(res)
							that.currentAddress=res.result.formatted_addresses.recommend
						},
						 fail: function(res) {
						    console.log(res);
						},
					})
				}
			});
			
		},
		
		methods: {
			endBtn(){
				
				var that=this;
				 uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									that.chooseLocation()
									return;
								}
							})
						}else{
							that.chooseLocation()
							return;
						}
					}
				})
				
			},
			chooseLocation(){
				var that=this;
				uni.chooseLocation({
					success: function (res) {
						console.log(res);
						that.endAddress=res.name
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						var longitude=res.longitude
						var latitude=res.latitude
						var obj={
							 latitude: latitude,
							 longitude: longitude,
							 iconPath: '../../static/img/icon_zhongdian.png',
							 width:36,
							 height:56,
							 // label:{
								//  content:'文本'
							 // },
							callout: { //自定义标记点上方的气泡窗口 点击有效  
								content: '拖到这里', //文本
								color: '#ffffff', //文字颜色
								fontSize: 15, //文本大小
								borderRadius: 15, //边框圆角
								padding: '10',
								bgColor: '#FF0000', //背景颜色
								display: 'ALWAYS', //常显
							}
							
						}
						var obj2={
							longitude: longitude,
							latitude:latitude 
						}
						if(that.covers.length>1){
							that.covers[1]=obj;
							that.points[1]=obj2;
						}else{
							that.covers.push(obj);
							that.points.push(obj2)
						}
						console.log(that.covers)
					},
					fail(err){
						console.log(err)
					}
				})
			},
			regionchangefn(e){
			 console.log(e)
			 var that=this;
			 if(e.detail.centerLocation){
				var latitude=e.detail.centerLocation.latitude;
				var longitude=e.detail.centerLocation.longitude;
				 var obj={
				 	 latitude: latitude,
				 	 longitude: longitude,
				 	 iconPath: '../../static/img/icon_qidian.png',
					 width:36,
					 height:56
				 }
				this.covers=[];
				this.covers.push(obj)
			 }
			
			},
			tapfn(e){
				//点击获取位置
				 console.log(e);
				 var that=this;
				 var latitude=e.detail.latitude;
				 var longitude=e.detail.longitude;
				  var obj={
				  	 latitude: latitude,
				  	 longitude: longitude,
				  	 iconPath: '../../static/img/icon_qidian.png',
					 width:36,
					 height:56
				  }
				  this.covers=[];
				  this.covers.push(obj)
				  this.tMap.reverseGeocoder({
				  	location: {
				  		latitude: latitude,
				  		longitude: longitude
				  	},
				  	success: function(res) {
				  		//console.log(res)
						
				  		that.currentAddress=res.result.formatted_addresses.recommend;
						//console.log(this.currentAddress)
						//this.$set(this, 'currentAddress', this.currentAddress)
				  	},
				  	 fail: function(res) {
				  	    console.log(res);
				  	},
				  })
			},
			tabClick(num) {
				this.tabIndex = num;
				


			},
		}
	}
</script>

<style>
	.box {
		width: 100vw;
		min-height: 100vh;
		background-color: #FFFFFF;
	}

	map {
		width: 750rpx;
		height: calc(100vh - 664rpx - 120rpx);
	}

	.contBox {
		width: 100%;
		height: 664rpx;
	}

	.tab {
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 230rpx;
		padding-right: 230rpx;
		height: 92rpx;
		line-height: 60rpx;
	}

	.tabLine {

		font-size: 30rpx;
		color: #333333;
		text-align: center;

	}

	.tabActive {

		color: #FF0000;
		font-weight: bold;
		border-bottom: 4rpx solid #FF0000;

	}

	.timeBox {
		padding-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.time {

		color: #959595;
		font-size: 24rpx;

	}

	.typeBox {
		padding: 30rpx 115rpx;
		display: flex;
		justify-content: space-between;
	}

	.box2 {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #FFFFFF;
		height: 32rpx;
		border-radius: 10rpx;
		border: 2rpx solid #CCCCCC;
	}

	.typeImg {
		width: 34rpx;
		height: 34rpx;
		margin-right: 10rpx;
	}

	.title {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
	}


	.price {
		padding-bottom: 30rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #D53533;
		text-align: center;
	}

	.shopBox {
		padding: 30rpx 24rpx;
		border-top: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		display: flex;
		align-items: center;
	}
	.leftTitle{
		width: 56rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		margin-left: 16rpx;
		margin-right: 30rpx;
	}

	.graypoint {
		width: 14rpx;
		height: 14rpx;
		background: #DDDDDD;
		border-radius: 7rpx;
	}

	.bluepoint {
		width: 14rpx;
		height: 14rpx;

		background: #3F90F7;
		border-radius: 7rpx;
	}

	.redpoint {
		width: 14rpx;
		height: 14rpx;

		background: #FF0000;
		border-radius: 7rpx;
	}
















	.bottomView {
		border-top: 1rpx solid #EEEEEE;
		background-color: #FFFFFF;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0rpx;
		/* padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); */
	}
    .content{
		width: 540rpx;
		word-wrap: break-word; /*强制换行*/
		  overflow: hidden; /*超出隐藏*/
		  text-overflow: ellipsis;/*隐藏后添加省略号*/
		  white-space: nowrap;/*强制不换行*/
	}
	.sure {

		background-color: #D53533;
		margin: 23rpx 30rpx;
		height: 74rpx;

		border-radius: 37rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;

		text-align: center;
		line-height: 74rpx;
	}
</style>