maishidaSJ/pages/UserCenter/map/map.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>
			<!-- <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="#006AFF" 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>
					</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="#006AFF" 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>
					</view>
					<view v-if="pois.length==0" class="itemContent contentInRowL">
						<image style="width: 50rpx;height: 50rpx;" src="/static/images/Rdizhil100@3x.png" mode="scaleToFill"></image>
						<view class="contentColumn" style="width: 580upx;align-items: center;">
							<text class="addrName">{{centerpoi.name}}</text>
							<text class="addrNamedetl">{{centerpoi.address}}</text>
						</view>
					</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 {http} from '@/utils/request';
	import {
		getLocationAddr,
		gcj02towgs,
		setLocat
	} from '@/pages/api/basic.js';
	export default {
		data() {
			return {
				controls:[],
				covers:[],
				latitude: 22.881143,
				longitude: 108.41943,
				mapCenter:{
					lat:22.881143,
					lon: 108.41943
				},
				noteMsg:{
					title:'',
					msg:'',
					markAddr:'',
					lat:0,
					lon:0
				},
				pois:[],
				centerpoi:'',
				markAddr:'',
				scrollTop:0,
				mapHeight:0,
				listHight:0,
				left:0,
				top:0,
				mapContext:Object,
				state:true,
				isAndroid:true,
				chakanzb:true,
				type:1,
				previous:0,
				timer:''
			}
		},
		onReady() {
			this.mapContext = uni.createMapContext("map",this); 
			console.log('---------1')
			if(!this.isAndroid){
				this.setCenter();
			}
			this.gotoLocat();
			//this.mapContext.showUserLocation(true);
		},
		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=that.i18n('index.xianzaiwez');
					  if(res.type=='gcj02'){
					  	that.movetoCenter(res.latitude,res.longitude,false);
					  	that.gcj02towgs(res.latitude,res.longitude);//gcj02定位查询
					  }
					  else if(res.type=='wgs84'){
					  	//that.setLocat(res.latitude,res.longitude,1,5);//wgs84转为gcj02显示在地图上
					  	that.movetoCenter(res.latitude,res.longitude,false);
					  }
					},
					fail(err) {
					}
				});
			},
			movetoCenter(latitude,longitude,sLb){
				
				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/Rdizhil100@3x.png',//显示的图标 
					latitude:this.mapCenter.lat,
					longitude:this.mapCenter.lon,
				}];
			},
			getAreaCode(latlng){
				
				var userId = uni.getStorageSync('userId');
				var that = this;
				http.get(`${getLocationAddr}`, {
						latlng:latlng,
						type:this.type,
						id:userId
				},false)
				.then(r => {
					//console.log('getAreaCode',r);
					if(r.data.code!=200){
						return;
					}
					that.dowithAddr(r.data.data,latlng);
					that.scrollTop=0;
				})
				.catch(err => {
					
				})
			},
			dowithAddr(r,latlng){
				console.log(this.type,r);
				if(this.type==0){
					if(r.result.pois.length>0){
						this.pois=r.result.pois;
					}
				}
				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;
					}
					else{
						var s = latlng.split(',');
						this.centerpoi={
							"address":r.address.address,
							"name":r.address.name,
							"lng":s[1],
							"lat":s[0]
						}
						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(tap);
				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();
				}
				
			},
			
			itemSelect(index){
				if(index==1){
					uni.navigateBack();
				}
				if(index==2){
					// uni.redirectTo({
					// 	url:'/pages/UserCenter/dizhi/newdizhi?id=-1'
					// })
				}
				
			},
			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
						},    
					}
				];
			},
			gcj02towgs(latitude,longitude){
				http.get(`${gcj02towgs}`, {
						lng:longitude,
						lat:latitude
				},false)
				.then(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.getAreaCode(latlon);
					}
					else{
						this.getAreaCode(r.data.data);
					}
				})
				.catch(err => {
					console.log(err)
				})
			},
			querendizhi(index){
				var addr;
				var poi=this.pois[index];
				if(this.type==0){
					// this.markAddr=poi.addr;
					// this.movetoCenter(poi.point.y,poi.point.x,false);
					this.setLocat(poi.point.y,poi.point.x,5,3);//百度API查询结果bd09ll转为gcj02显示在百度地图上
					//this.bdtogps(tap,2);
				}
				else if(this.type==1){
					this.movetoCenter(poi.geometry.location.lat,poi.geometry.location.lng,false);
					//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;
			},
			
			addrSelect(){
				
			},
			
			setLocat(latitude,longitude,f,t){
				var latlng = longitude+','+latitude;
				http.get(`${setLocat}`, {
						latlng:latlng,
						from:f,
						to:t
				},false)
				.then(r => {
					console.log('setLocat:',r);
					this.movetoCenter(r.data.data.result[0].y,r.data.data.result[0].x,false);
				})
				.catch(err => {
					console.log(err)
				})
			},
			// 转  GPS
			bdtogps(addr,type){
				http.get(`${gcj02towgs}`, {
						lng:addr.longitude,
						lat:addr.latitude
				},false)
				.then(res => {
					console.log('bdtogps2:',res);
					let str = res.data.data;
					let s = str.split(',');
					if(type==0){
						var tpaddr={
							address:addr.address,
							name:'',
							longitude:s[0], 
							latitude:s[1], 
						}
						uni.setStorageSync('tempLocation',tpaddr);
						uni.setStorageSync('userAddrLocation',tpaddr);
						uni.navigateBack();
					}
					
					
				})
				.catch(err => {
					console.log(err)
				})
			},
		}
	}
</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: 750rpx;
	}
	
	.scrollVct{
		width: 750rpx;
	}
	
	.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 #006AFF;
	}
	.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: #006AFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx #006AFF;
	}
	
	.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>