cte-share/pages/UserCenter/map/map.vue

<template>
	<view>
		<customNav :shownav="state" :title="$t('index.dizhixuanz')" titledetl=""></customNav>
		<view class="mapcontentV" :style="'height:'+mapHeight+'rpx;'">
			<view class="">
				 <map id="map" class="mapbody" scale="21" :style="'height:'+mapHeight+'rpx;'" :latitude="latitude" :longitude="longitude" :markers="covers" :controls="controls" @controltap="controlstp" @regionchange="regionChange">
				</map>
			</view>
		</view>
		<view class="contensb">
			<view style="height: 8rpx;background-color:aliceblue;"></view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="'height:'+listHight+'rpx;'">
				<view v-if="type==0">
					<view class="itemContent contentInRowS" v-for="(item,index) in pois" @click="querendizhi(index)">
						<uni-icons v-if="chakanzb"  custom-prefix="custom-icon" color="#E02F73" type="location-filled" size="28"  @click="markertap(item)"></uni-icons>
						<view class="contentColumn" style="width: 80%;align-items: center;">
							<text class="addrName">{{item.name}}</text>
							<text class="addrNamedetl">{{item.addr}}</text>
						</view>
						<uni-icons custom-prefix="custom-icon" color="slateblue" type="compose" size="28"  @click="addrselect(item)"></uni-icons>
					</view>
				</view>
				<view v-if="type==1">
					<view class="itemContent contentInRowL" v-for="(item,index) in pois" @click="querendizhi(index)">
						<uni-icons v-if="chakanzb"  custom-prefix="custom-icon" color="#E02F73" type="location-filled" size="28"  @click="markertap(item)"></uni-icons>
						<view class="contentColumn" style="width: 80%;align-items: center;">
							<text class="addrName">{{item.name}}</text>
							<text class="addrNamedetl">{{item.vicinity}}</text>
						</view>
						<uni-icons custom-prefix="custom-icon" color="slateblue" type="compose" size="28"  @click="addrselect(item)"></uni-icons>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 提示窗示例 -->
		<popViewGG :show="showpop" :maskClosable="true" :isCancel="false" @chooseCancel="chooseCancel">
			<view class="contentColumnC popocontenv">
				<view class="itemViewTop">
					<text class="itemTextTop">{{$t('index.weizhiyongyu')}}</text>
				</view>
				<view v-if="chakanzb" class="contentColumnC itemView" @click="itemSelect(1)">
					<text class="itemTextA">{{$t('index.zhoubianmd')}}</text>
				</view>
				<view class="contentColumnC itemView" @click="itemSelect(2)">
					<text class="itemTextB">+{{$t('index.xinzengshdz')}}</text>
				</view>
			</view>
		</popViewGG>
		
	</view>
</template>

<script>
	import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				controls:[],
				covers:[],
				latitude: 0,
				longitude:0,
				pois:[],
				poi:[],
				markAddr:'',
				scrollTop:0,
				mapHeight:0,
				listHight:0,
				left:0,
				top:1,
				mapContext:Object,
				mapready:false,
				state:true,
				chakanzb:true,
				type:1,
				showLb:false,
				showpop:false,
				juli:0
			}
		},
		onReady() {
			this.mapContext = uni.createMapContext("map",this); 
			//console.log('---------1')
			//this.showLb=true;
			this.setCenter();
			this.gotoLocat();
			var that = this;
			setTimeout(()=>{
				that.mapready = true;
			},6000)
		},
		onBackPress(options) {
		   //console.log('options', options);
		   if (options.from == 'backbutton') {
		       return !this.state;
		   } else if (options.from == 'navigateBack') {
		       return false;
		   }
		},
		onLoad(option) {
			var temp = option.state;
			if(temp==1){
				this.state=false;
			}
			if(temp==2){
				this.chakanzb=false;
			}
			var info = uni.getSystemInfoSync();
			this.mapHeight=600;
			this.listHight=info.windowHeight*2-640-info.statusBarHeight*2;
			this.left = 750;
			this.top = 250;
		},
		methods: {
			gotoLocat(){
				var that = this;
				uni.getLocation({
					type: "wgs84", //默认为 wgs84 返回 gps 坐标//谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标
					geocode: "true",
					isHighAccuracy: "true",
					accuracy: "best", // 精度值为20m
					success: function (res) {
					  that.markAddr=that.$t('index.xianzaiwez');
					  that.setLocat(res.latitude,res.longitude,1,5);//wgs84转为gcj02显示在百度地图上
					  var latlon= res.latitude+','+res.longitude;
					  that.getAreaCode(latlon);
					  //that.gcj02towgs(res.latitude,res.longitude);//gcj02定位查询
					},
					fail(err) {
						
					}
				});
			},
			movetoCenter(latitude,longitude,sLb){
				console.log(longitude)
				this.mapready=false;
				this.latitude=latitude;
				this.longitude=longitude;
				setTimeout(()=>{
					this.mapready = true;
				},500);
				
				// return;
				
				// var label=''
				// if(sLb){
				// 	label={//自定义标记点上方的气泡窗口
				// 		content: latitude+','+longitude,//文本
				// 	    color:"#ffffff",//文本颜色
				// 	    fontSize:12,//文字大小
				// 	    padding:3,//文本边缘留白
				// 	    textAlign:"center",//文本对齐方式。有效值: left, right, center
				// 	};
				// }
				// else{
				// 	label={//自定义标记点上方的气泡窗口
				// 		content: latitude,//文本
				// 	    color:"#ffffff",//文本颜色
				// 	    fontSize:12,//文字大小
				// 	    padding:3,//文本边缘留白
				// 	    textAlign:"center",//文本对齐方式。有效值: left, right, center
				// 	};
				// }
				// // if(!this.showLb){
				// // 	label='';
				// // }
				// this.covers=[{
				// 	id:1,//控件id
				// 	iconPath:'/static/images/Rdizhil60@3x.png',//显示的图标 
				// 	latitude:latitude,
				// 	longitude:longitude,
				// 	label:label,
				// }];
			},
			
			getAreaCode(latlng){
				var userId = uni.getStorageSync('userId');
				var that = this;
				api('getLocationAddr',{
					latlng:latlng,
					type:this.type,
					id:userId
				},r=>{
					if(r.data.code!=200){
						return;
					}
					that.dowithAddr(r.data.data);
					that.scrollTop=0;
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			dowithAddr(r){
				console.log(r);
				if(this.type==0){
					if(r.result.pois.length>0){
						this.pois=r.result.pois;
						this.markAddr=r.result.formatted_address;
					}
				}
				else if(this.type==1){
					if(r.results.length>0){
						this.pois=r.results;
						this.markAddr=this.pois[1].vicinity;
					}
				}
			},
			regionChange(){
				var that = this;
				if(!this.mapready){
					return;
				}
				this.mapContext.getCenterLocation({
					success: res => {//经纬度格式是gcj02
						console.log('getCenterLocation',res)
						that.movetoCenter(res.latitude,res.longitude,false);
						var tap={
							point:{
								x:res.latitude,
								y:res.longitude
							},
							addr:'',
							name:''
						}
						that.bdtogps(tap,2)
						//this.gcj02towgs(res.latitude,res.longitude);
					},
					fail: res => {
					}
				})
			},
			controlstp(tap){
				if(tap.detail.controlId==2){
					this.gotoLocat();
				}
			},
			markertap(tap){
				var addr;
				if(this.type==0){
					this.bdtogps(tap,1);
				}
				else if(this.type==1){
					addr={
						address: tap.vicinity,
						name:tap.name,
						longitude:tap.geometry.location.lng, 
						latitude: tap.geometry.location.lat, 
					}
					uni.setStorageSync('tempLocation',addr);
					uni.setStorageSync('userAddrLocation',addr);
					uni.navigateBack();
				}
				
			},
			chooseCancel(){
				this.showpop=false;
			},
			addrselect(tap){
				var addr;
				if(this.type==0){
					this.bdtogps(tap,0);
				}
				else if(this.type==1){
					addr={
						address: tap.vicinity,
						name:tap.name,
						longitude:tap.geometry.location.lng, 
						latitude: tap.geometry.location.lat, 
					}
					uni.setStorageSync('tempLocation',addr);
					uni.setStorageSync('userAddrLocation',addr);
					if(this.chakanzb){
						uni.redirectTo({
							url:'/pages/UserCenter/dizhi/newdizhi?id=-1'
						});
					}
					else{
						uni.navigateBack();
					}
				}
			},
			setCenter(){
				//console.log('setCenter',this.left,this.top)
				this.controls=[
					{//在地图上显示控件，控件不随着地图移动
						id:1,//控件id
						iconPath:'/static/images/Rdizhil@3x.png',//显示的图标    
						position:{//控件在地图的位置
						    left:this.left/4-20,
						    top:150-36,
						    width:36,
						    height:36
						},    
					},
					{//在地图上显示控件，控件不随着地图移动
					id:2,//控件id
					iconPath:'/static/images/dingwei.png',//显示的图标 
					clickable:true,
					position:{//控件在地图的位置
					    left:320,
					    top:260,
					    width:28,
					    height:28
					},    
				}];
				
			},
			gcj02towgs(latitude,longitude){
				api('gcj02towgs',{
					lng:longitude,
					lat:latitude
				},r=>{
					let str = r.data.data;
					let s = str.split(',');
					if(s.length>1){
						var latlon= s[1]+','+s[0];
						//console.log('----1',latlon);
						this.getAreaCode(latlon);
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			querendizhi(index){
				var addr;
				var poi=this.pois[index];
				if(this.type==0){
					this.movetoCenter(poi.point.y,poi.point.x,false);
					//this.setLocat(poi.point.y,poi.point.x,5,3);//百度API查询结果bd09ll转为gcj02显示在百度地图上
				}
				else if(this.type==1){
					this.setLocat(poi.geometry.location.lat,poi.geometry.location.lng,1,5);//谷歌返回GPS转为转为gcj02显示在百度地图上
				}
				return;
			},
			setLocat(latitude,longitude,f,t){
				var latlng = longitude+','+latitude;
				api('setLocat',{
					latlng:latlng,
					from:f,
					to:t
				},r=>{
					this.movetoCenter(r.data.data.result[0].y,r.data.data.result[0].x,false);
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			//bd09ll 转  GPS
			bdtogps(tap,type){
				var latlng = tap.point.x+','+tap.point.y; 
				api('setLocat',{
					latlng:latlng,
					from:5,
					to:3
				},r=>{
					console.log('bdtogps1:',r);
					//this.movetoCenter(r.data.data.result[0].y,r.data.data.result[0].x,false);
					api('gcj02towgs',{
						lng:r.data.data.result[0].x,
						lat:r.data.data.result[0].y
					},res=>{
						console.log('bdtogps2:',res);
						var s = res.data.data.split(',');
						
						if(type==2){
							var latlon= s[1]+','+s[0];
							//console.log('----1',latlon);
							this.getAreaCode(latlon);
							return;
						}
						
						var	addr={//bd09ll 转  GPS
							address:tap.addr, 
							name:tap.name,
							longitude:s[0], 
							latitude:s[1], 
						}
						uni.setStorageSync('tempLocation',addr);
						uni.setStorageSync('userAddrLocation',addr);
						if(type==0){
							if(this.chakanzb){
								uni.redirectTo({
									url:'/pages/UserCenter/dizhi/newdizhi?id=-1'
								});
							}
							else{
								uni.navigateBack();
							}
						}
						else if(type==1){
							uni.navigateBack();
						}
					},failc=>{
						//console.log('getadvertis----',failc)
					})
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
		}
	}
</script>

<style>
	.mapbody{
		width: 100%;
	}
	.mapcontentV{
		margin-top: 20rpx;
	}
	.contensb{
		display: flex;
		flex-direction: column;
		justify-content:flex-start;
	}
	
	.itemContent{
		width: 90%;
		margin-left: 5%;
		padding: 10rpx;
		border-bottom-width: 2rpx;
		border-bottom-style:outset;
		border-bottom-color:lightgray;
		align-items: center;
	}
	
	.addrName{
		width: 100%;
		margin-left:10rpx;
		font-size: 32rpx;
		color: black;
		height: 36rpx;
		line-height: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.addrNamedetlV{
		display: flex;
		width: 100%;
		margin-left: 10rpx;
		height: 100rpx;
		align-items: center;
	}
	.addrNamedetl{
		text-align: left;
		width: 100%;
		margin-left: 10rpx;
		font-size: 28rpx;
		color:darkslategrey;
		padding: 10rpx;
	}
	.popocontenv{
		background-color: cornflowerblue;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	.itemViewTop{
		display: flex;
		background-color:whitesmoke;
		width: 100%;
		padding: 10rpx;
		height: 70rpx;
		justify-content: center;
		align-items: center;
		text-align: center;
		box-shadow: 0rpx 0rpx -10rpx 0rpx #E02F73;
	}
	.itemTextTop{
		text-align: center;
		font-size: 32rpx;
		color: black;
	}
	.itemView{
		width: 100%;
		padding: 10rpx;
		height: 100rpx;
		background-color: white;
		text-align: center;
		
	}
	.itemTextA{
		width: 80%;
		height: 70rpx;
		border-radius: 20rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 32rpx;
		color: white;
		background-color: #E02F73;
		box-shadow: 0rpx 0rpx 10rpx 0rpx #E02F73;
	}
	
	.itemTextB{
		width: 80%;
		height: 70rpx;
		border-radius: 20rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 32rpx;
		color: white;
		background-color: sandybrown;
		box-shadow: 0rpx 0rpx 10rpx 0rpx sandybrown;
	}
	

</style>