wardrobe/tm-vuetify/components/tm-mapSelectedPoint/tm-mapSelectedPoint.vue

<template>
	<view class="tm-mapSelectedPoint" :class="[black_tmeme?'grey-darken-5':'']">
		<map :scale="mapscale" id="MapTm" ref="MapTm" @regionchange="moveMapChange" :markers="markers" :latitude="mapCenter.lat" :longitude="mapCenter.lng" :style="{width:`${width}rpx`,height:`400rpx`}"></map>
		<view class=" pa-32 ">
			<view class="tm-mapSelectedPoint-contr">
				<view class="pb-32"><text class=" text-size-n fulled text-overflow-1">当前:{{adress.adress||"获取失败，请移动地图选择"}}</text></view>
				<view class="flex-between pb-10">
					<tm-button @click="confirm" block height="80" style="width:60%">确认位置</tm-button>
					<view style="width:35%" class="flex-shrink">
						<tm-button :black="black_tmeme" :fllowTheme="fllowTheme" :theme="color_tmeme" @click="getLocation" text block height="80"  icon="icon-position-fill">定位当前</tm-button>
					</view>
				</view>
			</view>
			<view v-if="adressList.length>0" class="grey-lighten-5 px-24 round-6 mt-32" :class="[black_tmeme?'bk grey-darken-4':'']">
				<scroll-view scroll-y :style="{height: scrollHeight+'px'}">
					<view @click="selecListitem(item)" v-for="(item,index) in adressList" :key="index" :class="[black_tmeme?'bk':'']" class="py-24 border-b-1 flex-between">
						<view class="mr-32">
							<view class="pb-12">  {{item.name}}</view>
							<view class="text-size-s text-grey">{{item.address}}</view>
						</view>
						<view class="flex-shrink">
							<tm-icons :black="black_tmeme" :fllowTheme="fllowTheme" :color="color_tmeme" size="40" v-if="activeId == item.id" name="icon-check-circle"></tm-icons>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 地图选点
	 * @property {Boolean|String} black = [true|false] 默认null,是否开启暗黑模式
	 * @property {String} color = [] 主题默认:primary，提供是请写主题色名称
	 * @property {String} map-key = [] 地图key:默认为作者测试的，用户不要使用我的，否则会被限制，key作废。
	 * @property {String} map-type = [] 地图类型:qq，qq,baidu,amp高德。
	 * @property {Number} scale = [] 默认:14，地图绽放级别5-18
	 * @property {Number} width = [] 默认:700，组件的宽度。
	 * @property {Number} height = [] 默认:1200，组件的高度。
	 * @property {Object} location = [] 默认:{latitude:39.908823,longitude:116.39747}，默认的定位点，北京。
	 * @property {Function} confirm 点击确认位置按钮时返回当前定位资料信息。
	 * @property {Function} change 当移动地图时的位置信息，返回的结构同confirm
	 */
	import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
	import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
	export default {
		name:"tm-mapSelectedPoint",
		components:{tmButton,tmIcons},
		props:{
			width:{
				type:Number|String,
				default:700
			},
			height:{
				type:Number|String,
				default:1200
			},
			location:{
				type:Object,
				default:()=>{
					return {
						latitude:0,
						longitude:0
					}
				}
			},
			scale:{
				type:Number,
				default:14
			},
			// 是否开启暗黑模式
			black: {
				type: String | Boolean,
				default: null
			},
			color: {
				type: String | Array,
				default: 'primary'
			},
			// 跟随主题色的改变而改变。
			fllowTheme: {
				type: Boolean | String,
				default: true
			},
			mapKey:{
				type:String,
				default:'U3QBZ-3YIKI-YBEGX-5WURG-5ZQE6-ZGFME'
			},
			mapType:{
				type:String,
				default:'qq' //qq,baidu,amp
			}
		},
		watch: {
			location:{
				deep:true,
				async handler(newValue, oldValue) {
					this.moveMap(newValue.latitude,newValue.longitude)
					await this.moveMarkes(newValue.latitude,newValue.longitude)
				}
			}
		},
		data() {
			return {
				now_latitude:0,
				now_longitude:0,
				mapCenter:{
					lat:0,
					lng:0
				},
				markers:[],
				timeid:9566555566,
				adressList:[],
				adress:{
					adress:'',
					city:[]
				},
				scrollHeight:0,
				activeId:'',
				map:null,
			};
		},
		
		computed:{
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme: function() {
				if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
					.fllowTheme) {
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			mapscale:function(){
				return this.scale;
			}
		},
		created() {
			this.now_latitude = this.location.latitude;
			this.now_longitude = this.location.longitude;
			this.mapCenter = {
				lat:this.location.latitude,
				lng:this.location.longitude
			}
		},
		async mounted() {
			let t = this;
			this.map = uni.createMapContext("MapTm", this)
			let q = await this.$Querey('.tm-mapSelectedPoint-contr',this).catch(e=>{});
			let h = q[0].height||80;
			this.scrollHeight = uni.upx2px(this.height) - uni.upx2px(400) - h;
			// #ifdef MP
			uni.authorize({
			    scope: 'scope.userLocation',
			    success() {
			        t.mapready();
			    }
			})
			// #endif
			// #ifndef MP
			this.$nextTick(async function(){
				await uni.$tm.sleep(200)
				await this.mapready();
			})
			// #endif
		},
		methods: {
			moveMap(latitude,longitude){
				this.map.moveToLocation({
					  latitude:latitude,
					  longitude:longitude
				})
			},
			async mapready(){
				
				let t = this;
				// #ifndef H5
				uni.getSetting({
					success: async (res) => {
						if(!res.authSetting['scope.userLocation']){
							uni.showModal({
								title:"权限受限",
								content:"你禁止了位置受限，请打开设置，允许访问地址！否则功能无法使用。",
								cancelText:"我已允许",
								confirmText:"前往设置",
								success: async (rks) => {
									if(rks.cancel==true){
										 await t.getLocation();
										 return
									}
									uni.openSetting({})
								}
							})
							return;
						}
						if(t.mapCenter.lat !==0 && t.mapCenter.lng!==0){
							t.markers = [t.createMarker( t.mapCenter.lat ,t.mapCenter.lng)]
							await t.poiSidel_byTencentMap(t.mapCenter.lat ,t.mapCenter.lng)
							return;
						}
						await t.getLocation();
					},
					fail: (res) => {
						uni.$tm.toast("系统错误")
					}
				})
				// #endif
				
				// #ifdef H5
				if(t.mapCenter.lat !==0 && t.mapCenter.lng!==0){
					t.markers = [t.createMarker( t.mapCenter.lat ,t.mapCenter.lng)]
					await t.poiSidel_byTencentMap(t.mapCenter.lat ,t.mapCenter.lng)
					return;
				}
				await this.getLocation();
				// #endif
			},
			confirm(){
				this.$emit('confirm',{...this.adress,latitude:this.now_latitude,longitude:this.now_longitude})
			},
			async getLocation() {
				let t = this;

				//非h5通过GPS定位 。
		
				// #ifndef H5
				uni.getSetting({
					success: async (res) => {
						if(!res.authSetting['scope.userLocation']){
							uni.showModal({
								title:"权限受限",
								content:"你禁止了位置受限，请打开设置，允许访问地址！否则功能无法使用。",
								cancelText:"我已允许",
								confirmText:"前往设置",
								success: async (rks) => {
									if(rks.cancel==true){
										 await t.getLocation();
										 return
									}
									uni.openSetting({})
								}
							})
							return;
						}
						
						uni.getLocation({
						    type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						    success:async function (res) {
						        const latitude = res.latitude;
						        const longitude = res.longitude;
						       t.now_latitude = latitude;
						       t.now_longitude = longitude;
							   t.mapCenter = {
							   	lat:latitude,
							   	lng:longitude
							   }
							  
							   t.moveMap(t.mapCenter.lat,t.mapCenter.lng)
							   await t.moveMarkes(latitude,longitude)
							   //缓存定位点。否则失败，间隔15s小于15秒。不允许调用。
								uni.setStorageSync('tmvue_map_selectePoint',{latitude:latitude,longitude:longitude})
						    },
							fail: async (err) => {
								let p = uni.getStorageSync('tmvue_map_selectePoint');
								
								try{
									
									if(typeof p == 'object'){
										const latitude = p .latitude;
										const longitude = p .longitude;
										t.now_latitude = latitude;
										t.now_longitude = longitude;
										t.mapCenter = {
											lat:latitude,
											lng:longitude
										}						  
										t.moveMap(t.mapCenter.lat,t.mapCenter.lng)
										await t.moveMarkes(latitude,longitude)
									}
								}catch(e){
									uni.$tm.toast('请间隙至少15s调用，不可频繁定位。')
								}
								
							}
						});
						
					},
					fail: (res) => {
						uni.$tm.toast("系统错误")
					}
				})
				// #endif
				
				
				//h5通过ip定位 
				// #ifdef H5
				
				uni.showLoading({
					mask:true,title:'...'
				})
				
				//没有获取到地址资料。通过Ip尝试定位 。
				let adressPoiObj = await uni.$tm.request.get("https://apis.map.qq.com/ws/location/v1/ip?key="+this.mapKey).catch(e=>{
					uni.hideLoading();
					uni.$tm.toast("地址解析错误")
				})
				
				if(adressPoiObj['status']==0){
					t.now_latitude = adressPoiObj.result.location.lat;
					t.now_longitude = adressPoiObj.result.location.lng;
					t.map.moveToLocation({
						  latitude:t.now_latitude,
						  longitude:t.now_longitude
					})
					t.moveMap(t.mapCenter.lat,t.mapCenter.lng)
					t.markers = [t.createMarker( adressPoiObj.result.location.lat,adressPoiObj.result.location.lng)]
					await t.poiSidel_byTencentMap(adressPoiObj.result.location.lat,adressPoiObj.result.location.lng)
				}
				
				// #endif
			},
			createMarker(latitude,longitude){
				
				let id = 636598;
				let label = {
					content:'',
					color:'#000000',
					fontSize:12,
					bgColor:'red',
					padding:5,
					textAlign:'center',
					
				}
				return {
					id:id,
					iconPath:'/static/posiimg.png',
					width:45,
					height:45,
					latitude:latitude,
					longitude:longitude,
					label:label,
					
				}
			},
			moveMapChange(e){
				var etype = ''
				// #ifdef APP-PLUS
				etype = 'end'
				// #endif
				// #ifdef MP-WEIXIN
				etype = e.type
				// #endif
				clearTimeout(this.timeid);
				if(etype ==='end'){

					let t = this;
					this.timeid = setTimeout(function() {
						
						t.map.getCenterLocation({
							success:async (res)=>{
								await t.moveMarkes(res.latitude,res.longitude)
							}
						})
					}, 350);
				}
				
				
			},
			async selecListitem(item){
				let t = this;
				this.$set(this.adress,'adress',item.address)
				await this.moveMarkes(item.location.latitude,item.location.longitude)
				this.activeId = item.id;
			},
			async moveMarkes(latitude,longitude,callback){
				let t = this;
				t.markers = []
				await uni.$tm.sleep(50)
				if(t.markers.length==0){
					t.markers = [t.createMarker( latitude,longitude)]
				}
				t.now_latitude = latitude;
				t.now_longitude = longitude;
				t.poiSidel_byTencentMap(latitude,longitude)
			},
			//mp腾讯地址获取当前地址资料。
			async poiSidel_byTencentMap(latitude,longitude){
				let t = this;
				uni.showLoading({
					mask:true,title:'...'
				})
				let lot=`location=${latitude},${longitude}&get_poi=1&key=${this.mapKey}`
				let adressPoiObj = await uni.$tm.request.get("https://apis.map.qq.com/ws/geocoder/v1/?"+lot).catch(e=>{
					uni.hideLoading();
					uni.$tm.toast("地址解析错误")
				})
				uni.hideLoading();
				if(adressPoiObj.status!==0){
					uni.$tm.toast(adressPoiObj.message)
					return;
				}
				let adress = adressPoiObj.result;
				this.$set(this.adress,'adress',adress.address)
				this.$set(this.adress,'city',[adress.address_component.province,adress.address_component.city,adress.address_component.district]);
				this.$emit('change',{...this.adress,latitude:this.now_latitude,longitude:this.now_longitude})
				let pos  =  adress.pois;
				if(pos.length==0) return;
				let list = [];
				for(let i=0;i<pos.length;i++){
					list.push({
						address:pos[i].address,
						name:pos[i].title,
						id:pos[i].id,
						location:{
							latitude:pos[i].location.lat,
							longitude:pos[i].location.lng
						}
					})
				}
				
				this.adressList = list;
			}
		},
	}
</script>

<style lang="scss">

</style>