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

<template>
	<view>
		<customNav shownav="true" title="map" titledetl=""></customNav>
		<view class="">
			<web-view style="background-color: #fafafa;" :style="{ height: statusBarHeight + 'px' }" @onPostMessage="getMessage" :src="webUrl"></web-view>
		</view>
		<view v-if="Keyboar" class="bottomfloatV">
			<view class="contentInRowC" style="align-items: center;">
				<view class="dizhixx">
					<text style="font-size: 26rpx;">{{addrObj.cityInfo.name}}</text>
				</view>
				<text class="xuanzBt" @click="addrselect">{{i18n('order.queding')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webUrl: '',
				lng:0,
				lat:0,
				statusBarHeight:0,
				Keyboar:false,
				addrObj:'',
				lg:0
			}
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().screenHeight;
			this.lng = 113.64360881345777;
			this.lat = 34.738282020827825;
			this.webUrl = '/hybrid/html/maps/mapindex.html?sstate=1&&lat=' + this.lat + '&lng=' + this.lng+'&nlng=0&nlat=0';
			
			var language = uni.getStorageSync('language');
			if(language=='yuenan'){
				this.lg = 1;
			}
			if(language=='zh-Hans'){
				this.lg = 2;
			}
			if(language=='zh-Hant'){
				this.lg = 3;
			}
			
			this.getlocetion();
		},
		onShow() {
			this.getlocetion();
			console.log(this.webUrl);
			
			
		},
		methods: {
			i18n(str){
				return getApp().globalData.$t(str);
			},
			
			/**
			 * 获取当前定位
			 * 
			 * */
			getlocetion() {
				const self = this;
				// 使用高德地图 也可以使用下方的原生插件定位
				uni.getLocation({
					geocode: true,
					type: 'wgs84',
					accuracy: "best",
					isHighAccuracy: true,
					success: (res) => {
						console.log('当前位置的经度11：' + JSON.stringify(res));
						self.lat = res.latitude;
						self.lng = res.longitude;
						self.webUrl = '/hybrid/html/maps/mapindex.html?sstate=1&&lat=' + self.lat +'&lng=' +self.lng+'&nlng=0&nlat=0&lg='+self.lg;
					}
				});
				return
			},
			getMessage(e) {
				console.log("--getMessage--",e.detail.data[0]);
				var obj = e.detail.data[0];
				if(obj.type==0){
					this.Keyboar=true;
					this.addrObj=obj;
					this.addrObj.cityInfo.name=obj.cityInfo.address
					return;
				}
				if(obj.type==1){
					this.Keyboar=true;
					this.addrObj=obj;
					return;
				}
				//this.Keyboar=false;
			},
			addrselect(){
				var addr={
					address:this.addrObj.cityInfo.address,
					name:this.addrObj.cityInfo.name,
					longitude:this.addrObj.position.lng, 
					latitude:this.addrObj.position.lat, 
				}
				uni.setStorageSync('tempLocation',addr);
				uni.setStorageSync('userAddrLocation',addr);
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
.dizhixx{
	padding: 8rpx;
	width: 500rpx;
	border-radius: 8rpx;
	border: solid lavender;
	border-width: 0px 0px 6rpx 0px;
	text-align: center;
	color:black;
	box-shadow: 0rpx 0rpx 10rpx 0rpx lavender;
}
.xuanzBt{
	background-color: #00A6FF;
	color: white;
	font-size: 28rpx;
	padding-left: 16rpx;
	padding-right: 16rpx;
	line-height: 46rpx;
	border-radius: 23rpx;
	text-align: center;
	margin-left: 10rpx;
}
.bottomfloatV{
	position: fixed;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	left: 0;
	right: 0;
	bottom: 80rpx;
	z-index: 999;
}
</style>