cte-share/pages/UserCenter/map/mapN.nvue

<template>
	<view>
		<customNav :shownav="state" title="map" titledetl=""></customNav>
		<view class="mapcontentV" :style="'height:'+mapHeight+'rpx;'">
			<view class="">
				 <map id="map" class="mapbody" scale="18" show-location="true" :style="'height:'+mapHeight+'rpx;'" :latitude="latitude" :longitude="longitude" :markers="covers" :controls="controls" @markertap="markertap" @regionchange="regionChange" @controltap="controlstp" @anchorpointtap="anchorpointtap">
				</map>
			</view>
		</view>
		<view class="contensb">
			<view style="height: 8rpx;background-color:lavender;width: 100vw;"></view>
			<view v-if="pois.length==0" class="contentColumnC" style="margin-top: 50rpx;">
				<text class="itemTextTop">{{i18n('index.fujinredwz')}}</text>
			</view>
			<!-- <text>{{latitude}},{{longitude}}</text> -->
			<scroll-view class="scrollVct" :scroll-top="scrollTop" scroll-y="true" :style="'height:'+listHight+'rpx;'">
				<view class="contentColumn" 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="#00A6FF" type="location-filled" size="28"  @click="listMarkertap(item)"></uni-icons>
						<view class="contentColumn" style="width: 580upx;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 class="contentColumn" 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="#00A6FF" type="location-filled" size="28"  @click="listMarkertap(item)"></uni-icons>
						<view class="contentColumn" style="width: 580upx;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>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="NOMLE" :cancelText="i18n('order.quxiao')" :confirmText="i18n('comp.queren')" :title="noteMsg.title" :content="noteMsg.msg" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import api from "@/pages/api/api.js"
	export default {
		data() {
			return {
				controls:[],
				covers:[],
				latitude: 22.84585,
				longitude:108.324762,
				mapCenter:{
					lat:22.881143,
					lon: 108.41943
				},
				pois:[],
				poi:[],
				markAddr:'',
				scrollTop:0,
				mapHeight:0,
				listHight:0,
				left:0,
				top:1,
				mapContext:Object,
				state:true,
				isAndroid:true,
				chakanzb:true,
				type:1,
				noteMsg:{
					title:'',
					msg:'',
					markAddr:'',
					lat:0,
					lon:0
				},
				previous:0,
				timer:''
			}
		},
		onReady() {
			this.mapContext = uni.createMapContext("map",this); 
			console.log('---------1')
			if(!this.isAndroid){
				this.setCenter();
			}
			this.gotoLocat();
		},
		onBackPress(options) {
		   //console.log('options', options);
		   if (options.from == 'backbutton') {
		       return !this.state;
		   } else if (options.from == 'navigateBack') {
		       return false;
		   }
		},
		onLoad(option) {
			let systemInfo = uni.getSystemInfoSync();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			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-740-info.statusBarHeight*2;
			this.left = 750;
			this.top = 250;
		},
		methods: {
			i18n(str){
				return getApp().globalData.$t(str);
			},
			gotoLocat(){
				var that = this;
				uni.getLocation({
					type: "wgs84", //默认为 wgs84 返回 gps 坐标//谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标
					geocode: "true",
					isHighAccuracy: "true",
					accuracy: "best", // 精度值为20m
					success: function (res) {
						console.log(res);
						that.markAddr='Location';
						if(res.type=='gcj02'){
							//that.movetoCenter(res.latitude,res.longitude,false);
							that.gcj02towgsM(res.latitude,res.longitude);//gcj02定位查询
						}
						else if(res.type=='wgs84'){
							var latlon= res.latitude+','+res.longitude;
							//that.getAreaCode(latlon);
							//that.setLocat(res.latitude,res.longitude,1,5);//wgs84转为gcj02显示在地图上
							that.movetoCenter(res.latitude,res.longitude,false);
						}
					  //that.setLocat(res.latitude,res.longitude,1,5);//wgs84转为gcj02显示在百度地图上
					  //that.gcj02towgs(res.latitude,res.longitude);//gcj02定位查询
					},
					fail(err) {
						console.log('--------getLocation',err)
					}
				});
			},
			movetoCenter(latitude,longitude,sLb){
				console.log(longitude)
				if(this.latitude==latitude){
					this.latitude=latitude+0.0000000001;
				}
				else{
					this.latitude=latitude;
				}
				this.longitude=longitude;
				this.mapCenter.lat = this.latitude;
				this.mapCenter.lon = this.longitude;
				this.mapContext.moveToLocation();
			},
			setCenterMark(){
				this.covers=[{
					id:1,//控件id
					iconPath:'/static/images/Rdizhil110@3x.png',//显示的图标 
					latitude:this.mapCenter.lat,
					longitude:this.mapCenter.lon,
				}];
			},
			getAreaCode(latlng){
				var userId = uni.getStorageSync('userId');
				var that = this;
				uni.showLoading({
					title:'Loading...',
					mask:true
				})
				api('getLocationAddr',{
					latlng:latlng,
					type:this.type,
					id:userId
				},r=>{
					uni.hideLoading();
					//console.log('getAreaCode11',r);
					if(r.data.code!=200){
						return;
					}
					if(this.type==1){
						if(r.data.data.results.length==0){
							uni.showToast({
							    title:r.data.data.error_message,
							    icon: 'none',
							    duration: 2000
							})
							return;
						}
					}
					that.dowithAddr(r.data.data,latlng);
					that.scrollTop=0;
				},failc=>{
					uni.hideLoading();
					//console.log('getadvertis----',failc)
				})
			},
			dowithAddr(r,latlng){
				//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){
						r.results[0].name=r.address.name;
						r.results[0].vicinity=r.address.address;
						var s = latlng.split(',');
						r.results[0].geometry.location.lng=s[1];
						r.results[0].geometry.location.lat=s[0];
						this.pois=r.results;
						this.markAddr=r.address.address;
					}
				}
			},
			regionChange(val){
				console.log('regionChange',val)
				var now = new Date().valueOf();
				
				if(this.isAndroid){
					if(val.type!='end'){
						return;
					}
				}
				else{
					if(val.detail.type!='end'){
						console.log('ios begin')
						return;
					}
					else{
						console.log('ios end')
					}
				}
				var that = this;
				if (now - that.previous < 300) {
				    if (that.timer) clearTimeout(that.timer)
				    that.timer = setTimeout(() => {
				          that.previous = now
				            that.CenterLocation();
				    }, 300)
				}
				else{
					that.previous=now;
					if (that.timer) clearTimeout(that.timer)
					that.timer = setTimeout(() => {
					        that.CenterLocation();
					}, 300)
				}
			},
			CenterLocation(){
				var that = this;
				this.mapContext.getCenterLocation({
					success: res => {//经纬度格式是gcj02
						console.log('getCenterLocation',res)
						this.mapCenter.lat = res.latitude;
						this.mapCenter.lon = res.longitude;
						//that.bdtogps(tap,2)
						//this.gcj02towgs(res.latitude,res.longitude);
						var latlon= res.latitude+','+res.longitude;
						console.log('----1',latlon);
						this.setCenterMark();
						this.getAreaCode(latlon);
						this.tempmark=false;
					},
					fail: res => {
						console.log(res);
					}
				})
			},
			controlstp(tap){
				console.log('controlstp------',tap)
				//this.mapContext.moveToLocation(); 
				if(tap.detail.controlId==2){
					this.gotoLocat();
				}
				if(tap.detail.controlId==1){
					console.log(tap);
					var addr={
						address:this.markAddr,
						name:'',
						longitude:this.mapCenter.lon, 
						latitude: this.mapCenter.lat, 
					}
					var that = this;
					uni.showModal({
					    title: that.i18n('api.message'),
					    content:that.i18n('index.querenxzwz'),
						cancelText: that.i18n('order.quxiao'), // 取消按钮的文字  
						confirmText: that.i18n('comp.queren'), // 确认按钮的文字  
					    success: function (res) {
							if (res.confirm) { //这里是点击了确定以后
								uni.setStorageSync('tempLocation',addr);
								uni.setStorageSync('userAddrLocation',addr);
								uni.navigateBack();
							} else { //这里是点击了取消以后
							  
							}
					    }
					})
				}
			},
			markertap(tap){
				console.log('markertap---',tap);
				this.noteMsg.title=this.i18n('api.message');
				this.noteMsg.msg=this.i18n('index.querenxzwz');
				this.noteMsg.lon=this.mapCenter.lon;
				this.noteMsg.lat=this.mapCenter.lat;
				this.noteMsg.markAddr=this.markAddr;
				this.$refs.alertDialog.open('center');
			},
			anchorpointtap(tap){
				console.log('anchorpointtap-----',tap);
				this.noteMsg.markAddr=this.i18n('index.xianzaiwez');
				this.noteMsg.lon=tap.detail.longitude;
				this.noteMsg.lat=tap.detail.latitude;
				this.noteMsg.title=this.i18n('api.message');
				this.noteMsg.msg=this.i18n('index.querenxzwz');
				this.$refs.alertDialog.open('center');
			},
			listMarkertap(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();
				}
			},
			
			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();
					}
				}
			},
			
			dialogConfirm() {
				console.log('点击确认')
				
				var addr={
					address:this.noteMsg.markAddr,
					name:'',
					longitude:this.noteMsg.lon, 
					latitude: this.noteMsg.lat, 
				}
				uni.setStorageSync('tempLocation',addr);
				uni.setStorageSync('userAddrLocation',addr);
				setTimeout(()=>{
					uni.navigateBack();
				},200);
				
			},
			dialogClose() {
				console.log('点击关闭')
			},
			setCenter(){
				//console.log('setCenter',this.left,this.top)
				this.controls=[
					// {//在地图上显示控件，控件不随着地图移动
					// 	id:1,//控件id
					// 	iconPath:'/static/images/Rdizhil@3x.png',//显示的图标   
					// 	clickable:true,
					// 	position:{//控件在地图的位置
					// 	    left:158,
					// 	    top:150-36,
					// 	    width:36,
					// 	    height:36
					// 	},    
					// },
					{//在地图上显示控件，控件不随着地图移动
					id:2,//控件id
					iconPath:'/static/images/dingwei.png',//显示的图标 
					clickable:true,
					position:{//控件在地图的位置
					    left:365,
					    top:285,
					    width:40,
					    height:40
						},    
					},
				];
				
			},
			gcj02towgsM(latitude,longitude){
				
				api('gcj02towgs',{
					lng:longitude,
					lat:latitude
				},r=>{
					console.log('gcj02towgs:',r);
					let str = r.data.data;
					let s = str.split(',');
					this.movetoCenter(s[1],s[0],false);
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			gcj02towgs(latitude,longitude){
				api('gcj02towgs',{
					lng:longitude,
					lat:latitude
				},r=>{
					console.log('gcj02towgs:',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.movetoCenter(s[1],s[0],false);
						this.getAreaCode(latlon);
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			gcj02towgsB(addr,type){
				api('gcj02towgs',{
					lng:addr.longitude,
					lat:addr.latitude
				},r=>{
					console.log('gcj02towgs:',r);
					let str = r.data.data;
					let s = str.split(',');
					var tpaddr={
						address:addr.address,
						name:'',
						longitude:s[0], 
						latitude:s[1], 
					}
					uni.setStorageSync('tempLocation',tpaddr);
					uni.setStorageSync('userAddrLocation',tpaddr);
					uni.navigateBack();
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			querendizhi(index){
				var addr;
				var poi=this.pois[index];
				console.log(index,poi);
				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显示在百度地图上
					var tap={
						point:{
							x:poi.point.y,
							y:poi.point.x
						},
						addr:'',
						name:''
					}
					this.bdtogps(tap,2);
				}
				else if(this.type==1){
					this.movetoCenter(poi.geometry.location.lat,poi.geometry.location.lng,false);//谷歌返回GPS直接在Google显示
					//this.setLocat(poi.geometry.location.lat,poi.geometry.location.lng,1,5);//谷歌返回GPS转为转为gcj02显示在百度地图上
					// var latlon= poi.geometry.location.lat+','+poi.geometry.location.lng;
					// that.getAreaCode(latlon);
				}
				return;
			},
			setLocat(latitude,longitude,f,t){
				var latlng = longitude+','+latitude;
				api('setLocat',{
					latlng:latlng,
					from:f,
					to:t
				},r=>{
					console.log('setLocat:',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);
					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: 750rpx;
	}
	.mapcontentV{
		margin-top: 20rpx;
		width: 750rpx;
		background-color: bisque;
	}
	.contensb{
		display: flex;
		flex-direction: column;
		justify-content:flex-start;
		width: 750upx;
	}
	
	.scrollVct{
		width: 750upx;
	}
	
	.itemContent{
		width: 740upx;
		margin-left: 5upx;
		padding: 10rpx;
		border-bottom-width: 2rpx;
		border-bottom-color:lightgray;
		align-items: center;
	}
	
	.addrName{
		width: 580upx;
		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: 580upx;
		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: 100vw;
		padding: 10rpx;
		height: 70rpx;
		justify-content: center;
		align-items: center;
		text-align: center;
		box-shadow: 0rpx 0rpx -10rpx 0rpx #00A6FF;
	}
	.itemTextTop{
		text-align: center;
		font-size: 32rpx;
		color: black;
	}
	.itemView{
		width: 100vw;
		padding: 10rpx;
		height: 100rpx;
		background-color: white;
		text-align: center;
		
	}
	.itemTextA{
		width: 80vw;
		height: 70rpx;
		border-radius: 20rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 32rpx;
		color: white;
		background-color: #00A6FF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx #00A6FF;
	}
	
	.itemTextB{
		width: 80vw;
		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>