maishidaSJ/components/liupishui-pickerpolygons/liupishui-pickerpolygons.vue

<template>
	<view class="box-picker_position">
		<view class="map_wp">
			<map id="map_20221212" class="picker-map" scale="12" min-scale="12" @regionchange="handleRegionchange" :latitude="position.latitude" :longitude="position.longitude" show-location='true' :polygons="polygons"></map>
			<view :class="['picker_map_location', animateLocation?'animated':'']"></view>
		</view>
		<view class="list-picker_position">
			<view class="hd">
				<input type="text" v-model="searchKey" class="input_text" placeholder="请输入搜索地点">
				<button class="btn-search" type="default" @click="searchPosition"><view class="picker-search"></view>搜索</button>
			</view>
			<view class="bd">
				<view v-for="(item,index) in searchlist" @click="changeSelectItem(index)" :class="['item',item.useable?'':'disabled']" :key="index">
					<view class="item-l">
						<view class="picker-address"></view>
					</view>
					<view class="item-c">
						<view class="title">{{item.title}}</view>
						<view class="address">{{item.address}}</view>
					</view>
					<view class="item-r">
						<view v-if="item.select" class="picker-checked"></view>
					</view>
				</view>
			</view>
			<view class="ft">
				<button @click="confirmSelect" :class="['btn-selected', canConfirm?'':'disabled']">确定选点</button>
			</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('./qqmap-wx-jssdk.js');
	var qqmapsdk,handleRegionchangeTimmer;
	export default {
		props:{
			polygons:{
				type:Array,
				default:[
					{
						points:[
							{
								latitude:'36.829066',
								longitude:'118.025761',
							},
							{
								latitude:'36.825012',
								longitude:'118.066702',
							},
							{
								latitude:'36.81161',
								longitude:'118.042681'
							},
							{
								latitude:'36.801964',
								longitude:'118.034875',
							},
						],
						strokeWidth:1,
						strokeColor:'#ff000066',
						fillColor:'#ff000016'
					},
					{
						points:[
							{
								latitude:'36.817369',
								longitude:'118.001311',
							},
							{
								latitude:'36.808682',
								longitude:'118.010281',
							},{
								latitude:'36.805555',
								longitude:'117.996537',
							},
						],
						strokeWidth:1,
						strokeColor:'#ff000066',
						fillColor:'#ff000016'
					},
				]
			},
			qqmapsdkKey:{
				type:String,
				default:''
			},
			base_url:{
				type:String,
				default:''
			},
			sig:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				canConfirm: false,
				animateLocation:false,
				isChangeSelectItem:false,
				searchKey:'',
				position:{
					latitude:'36.811995',
					longitude:'118.05539'
				},
				searchlist:[]
			};
		},
		mounted(){
			if(this.qqmapsdkKey==''){
				console.error('需要腾讯地图开发Key，申请地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview')
				return;
			}
			qqmapsdk = new QQMapWX({
				key:this.qqmapsdkKey,
				BASE_URL:this.base_url
			});
			let that = this;
			let needRegetLocation = true;
			
			if(uni.getStorageSync('mapPickerPosition')){
				let data = JSON.parse(uni.getStorageSync('mapPickerPosition'));
				if(new Date().getTime() < data.expireTime){
					needRegetLocation = false;
					that.position.latitude = data.position.latitude;
					that.position.longitude = data.position.longitude;
					that.init();
				}
			}
			if(needRegetLocation){
				uni.getLocation({
					cacheTimeout:1,
					accuracy:'best',
					type:'gcj02',
					isHighAccuracy:true,
					success:function(e){
						console.log(e);
						that.position.latitude = e.latitude;
						that.position.longitude = e.longitude;
						uni.setStorageSync('mapPickerPosition',JSON.stringify({
							expireTime: new Date().getTime() - 0 + 60*1000,
							position:{
								latitude: e.latitude,
								longitude: e.longitude
							}
						}))
						that.init();
					},
					fail:function(e){
						console.log(e);
					}
				})
			}
			// uni.onLocationChange(function(e){
			// 		console.log(11111,e);
			// 		that.position.latitude = e.latitude;
			// 		that.position.longitude = e.longitude;
			// 	})
		},
		methods:{
			init(){
				this.animateLocation = true;
				handleRegionchangeTimmer = setTimeout(()=>{
					this.renderList();
				},400)
			},
			renderList(){
				let that = this;
				let mapContext = uni.createMapContext("map_20221212", that);
				mapContext.getCenterLocation({
						success:function(rst){
							let options = {
									location:rst.latitude+','+rst.longitude,
									get_poi:1,
									poi_options: 'radius=1000',
									sig:that.sig,
									success:function(res){
										//console.log('xxxxx',res.result.pois)
										let isSelect = false;
										if(res.message == "query ok"){
											//that.$data.searchlist = [];
											that.$data.searchlist = [...res.result.pois];
											for(let i = 0;i<that.$data.searchlist.length;i++){
												that.$data.searchlist.useable = false;
												that.$data.searchlist.select = false;
												for(let j = 0;j < that.polygons.length;j++){
													if(that.isPointInPolygon(that.$data.searchlist[i].location.lat,that.$data.searchlist[i].location.lng,that.polygons[j].points)){
														that.$data.searchlist[i].useable = true;
														if(!isSelect){
															that.$data.searchlist[i].select = true;
															isSelect = true;
														}
													}
												}
												
											}
											setTimeout(()=>{
												that.animateLocation = false;
											},200)
										}
										if(isSelect){
											that.canConfirm = true;
										}else{
											that.canConfirm = false;
										}
									},
									fail:function(error){
										console.log(error);
									}
								};
							if(typeof(window)==='undefined'){
								delete options.sig;
							}
							if(options.sig===''){
								delete options.sig;
							}
							qqmapsdk.reverseGeocoder(options);
							
						}
				});
			},
			searchPosition(){
				if(this.searchKey.replace(/\s+/,'')==''){
					return;
				}
				let that = this;
				let searchOptions = {
					keyword:this.searchKey,
					location:{
						latitude:this.position.latitude,
						longitude:this.position.longitude
					},
					sig:that.sig,
					success:function(rst){
						let isSelect = false;
						if(rst.message == "query ok"){
							//that.$data.searchlist = [];
							that.$data.searchlist = [...rst.data];
							for(let i = 0;i<that.$data.searchlist.length;i++){
								that.$data.searchlist.useable = false;
								that.$data.searchlist.select = false;
								for(let j = 0;j < that.polygons.length;j++){
									if(that.isPointInPolygon(that.$data.searchlist[i].location.lat,that.$data.searchlist[i].location.lng,that.polygons[j].points)){
										that.$data.searchlist[i].useable = true;
										if(!isSelect){
											that.$data.searchlist[i].select = true;
											that.position.latitude = that.$data.searchlist[i].location.lat;
											that.position.longitude = that.$data.searchlist[i].location.lng;
											isSelect = true;
										}
									}
								}
								
							}
						}
						if(isSelect){
							that.canConfirm = true;
						}else{
							that.canConfirm = false;
						}
					}
				};
				if(typeof(window)==='undefined'){
					delete searchOptions.sig;
				}
				if(searchOptions.sig===''){
					delete searchOptions.sig;
				}
				
				qqmapsdk.search(searchOptions);
			},
			changeSelectItem(index){
				if(this.$data.searchlist[index].useable){
					for(let i = 0;i<this.$data.searchlist.length;i++){
						let temp = {};
						for(var key in this.$data.searchlist[i]){
							temp[key] = this.$data.searchlist[i][key];
						}
						if(i===index){
							temp.select = true;
							this.isChangeSelectItem = true;
							this.position.latitude = temp.location.lat;
							this.position.longitude = temp.location.lng;						
						}else{
							temp.select = false;
						}
						this.$set(this.$data.searchlist,i,temp);
					}
				}
			},
			handleRegionchange(e){
				console.log(e);
				this.animateLocation = false;
				if(e.type=='end'){
					if(this.isChangeSelectItem){
						setTimeout(()=>{
							this.isChangeSelectItem = false;
						},100)
						return;
					}else{
							this.animateLocation = true;
							if(handleRegionchangeTimmer){
								clearTimeout(handleRegionchangeTimmer);
							}
							handleRegionchangeTimmer = setTimeout(()=>{
								this.renderList();
							},400)
						
					}
				}
			},

			isPointInPolygon(aLat, aLon, pointList){
						/* 
			            :param aLon: double 经度 
			            :param aLat: double 纬度 
			            :param pointList: list [{latitude: 22.22, longitude: 113.113}...] 多边形点的顺序需根据顺时针或逆时针，不能乱 
			            */
			            var iSum = 0  
			            var iCount = pointList.length
			              
			            if(iCount < 3) {
			                return false 
			            }
			            //  待判断的点(x, y) 为已知值
			            var y = aLat
			            var x = aLon
			            for(var i = 0; i < iCount; i++) {
			                var y1 = pointList[i].latitude
			                var x1 = pointList[i].longitude
			                if(i == iCount - 1) {
			                    var y2 = pointList[0].latitude
			                    var x2 = pointList[0].longitude
			                } else {
			                    var y2 = pointList[i + 1].latitude  
			                    var x2 = pointList[i + 1].longitude
			                }
			                // 当前边的 2 个端点分别为 已知值(x1, y1), (x2, y2)
							if (((y >= y1) && (y < y2)) || ((y >= y2) && (y < y1))) {
			                    //  y 界于 y1 和 y2 之间
			                    //  假设过待判断点(x, y)的水平直线和当前边的交点为(x_intersect, y_intersect)，有y_intersect = y
			                    // 则有（2个相似三角形，公用顶角，宽/宽 = 高/高）：|x1 - x2| / |x1 - x_intersect| = |y1 - y2| / |y1 - y|
			                    if (Math.abs(y1 - y2) > 0) {
			                        var x_intersect = x1 - ((x1 - x2) * (y1 - y)) / (y1 - y2);  
			                        if(x_intersect < x) {
			                            iSum += 1 
			                        }
			                    }
			                } 
			            }
			            if(iSum % 2 != 0) { //true就是在
			                return true  
			            }else { //false就是不在
			                return false 
			            }  
				},
				confirmSelect(){
					if(this.canConfirm){
						this.searchlist.forEach(val=>{
							if(val.select){
								val.polygonIndex = [];
								this.polygons.forEach((polygon,index)=>{
									if(this.isPointInPolygon(val.location.lat,val.location.lng,polygon.points)){
										val.polygonIndex.push(index);
									}
								})
								uni.setStorageSync('polygonLocationPicker',JSON.stringify(val));
								this.$emit('selected',JSON.stringify(val));
							}
						})
					}
				}
		}

	}
</script>

<style scoped lang="scss">
	@keyframes bounceInDown {
		   from,
		    20%,
		    53%,
		    to {
		      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		      transform: translate3d(0, 0, 0);
		    }
		  
		    40%,
		    43% {
		      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		      transform: translate3d(0, -30rpx, 0) scaleY(1.1);
		    }
		  
		    70% {
		      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		      transform: translate3d(0, -15rpx, 0) scaleY(1.05);
		    }
		  
		    80% {
		      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		      transform: translate3d(0, 0, 0) scaleY(0.95);
		    }
		  
		    90% {
		      transform: translate3d(0, -4rpx, 0) scaleY(1.02);
		    }
	  }
	
	.box-picker_position{
		height: 100%;
		width: 100%;
		background: #fff;
		display: flex;
		flex-flow: column;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
	}
	.map_wp{
		position: relative;
		width: 750rpx;
		height: 400rpx;
	}
	.picker_map_location{
		width: 60rpx;
		height: 60rpx;
		background-image: url("data:image/svg+xml,%3Csvg t='1670988557938' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3498' width='200' height='200'%3E%3Cpath d='M511.968 0c-207.84 0-376.96 169.12-376.96 376.992 0 54.208 11.104 105.984 32.96 153.888 94.24 206.24 274.976 424 328.128 485.824 3.968 4.608 9.792 7.296 15.904 7.296s11.904-2.656 15.904-7.296c53.12-61.824 233.856-279.552 328.128-485.824 21.888-47.904 32.96-99.648 32.96-153.888-0.032-207.872-169.152-376.992-376.992-376.992zM511.968 572.8c-107.968 0-195.808-87.84-195.808-195.808s87.84-195.84 195.808-195.84 195.808 87.84 195.808 195.84c0 107.968-87.84 195.808-195.808 195.808z' fill='%23fa3c23' p-id='3499'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		background-position: center bottom;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -30rpx;
		margin-top: -60rpx;
		z-index: 999;
		transform-origin: center bottom;
	}
	.picker_map_location.animated{
		animation: bounceInDown .6s linear infinite;
	}
	.picker-map{
		width: 750rpx;
		height: 400rpx;
	}
	.list-picker_position{
		position: relative;
		flex: 1;
		display: flex;
		flex-flow: column;
		overflow: hidden;
		.hd{
			padding: 20rpx 20rpx 10rpx;
			display: flex;
			.input_text{
				flex: 1;
				box-sizing: border-box;
				background: #f2f2f2;
				border-radius: 6rpx;
				height: 60rpx;
				font-size: 28rpx;
				padding-left: 1em;
			}
		}
		.bd{
			padding: 20rpx;
			box-sizing: border-box;
			flex: 1;
			overflow-y: scroll;
			.item{
				display: flex;
				padding: 15rpx 10rpx;
				border-bottom: 1px solid #ccc;
				line-height: 1.92;
				align-items: stretch;
				.title{
					font-size: 32rpx;
				}
				.address{
					font-size: 24rpx;
					color: #999;
					line-height: 1.5;
				}
			}
			.item-l{
				padding: 10rpx 6rpx 0 0;
			}
			.item-c{
				flex: 1;
			}
			.item-r{
				width: 60rpx;
				display: flex;
				align-items: center;
				align-content: center;
			}
			.item.disabled{
				opacity: .5;
			}
		}
	}
	.btn-search{
		background: #007AFF;
		font-size: 24rpx;
		color: #fff;
		display: flex;
		padding: 0;
		align-items: center;
		justify-content: center;
		width: 120rpx;
	}
	.picker-search{
		background-image: url("data:image/svg+xml,%3Csvg t='1670900132396' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2679' width='200' height='200'%3E%3Cpath d='M685.6 660.336l155.152 155.168a16 16 0 0 1 0 22.624l-11.312 11.328a16 16 0 0 1-22.624 0l-158.528-158.544a289.792 289.792 0 0 1-165.152 51.36C322.336 742.256 192 611.904 192 451.12 192 290.336 322.336 160 483.136 160c160.784 0 291.12 130.336 291.12 291.136 0 82.112-33.984 156.272-88.672 209.2z m-202.464 33.92c134.272 0 243.12-108.848 243.12-243.12C726.256 316.848 617.408 208 483.136 208 348.848 208 240 316.848 240 451.136c0 134.272 108.848 243.12 243.136 243.12z' p-id='2680' fill='%23dbdbdb'%3E%3C/path%3E%3C/svg%3E");			background-size: cover;
		background-size: cover;
		width:36rpx;
		height: 36rpx;
		width: 36rpx;
		display: block;
		margin-right: 5rpx;
	}
	.picker-checked{
		background-image: url("data:image/svg+xml,%3Csvg t='1670909673260' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3763' width='200' height='200'%3E%3Cpath d='M417.185185 768c-9.481481 0-18.962963-3.792593-26.548148-11.377778l-246.518518-246.518518c-15.17037-15.17037-15.17037-37.925926 0-53.096297 15.17037-15.17037 37.925926-15.17037 53.096296 0L417.185185 676.977778l409.6-409.6c15.17037-15.17037 37.925926-15.17037 53.096296 0 15.17037 15.17037 15.17037 37.925926 0 53.096296l-436.148148 436.148148c-7.585185 7.585185-17.066667 11.377778-26.548148 11.377778z' p-id='3764' fill='%231e63ed'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 46rpx;
		height: 46rpx;
		display: block;
	}
	.picker-address{
		background-image: url("data:image/svg+xml,%3Csvg t='1670910118471' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4833' width='200' height='200'%3E%3Cpath d='M508.313 1018.666c0 0-379.51-422.921-379.51-632.516 0-209.606 169.914-379.51 379.51-379.51s379.511 169.903 379.51 379.51c0 209.596-379.51 632.516-379.51 632.516zM508.313 55.295c-182.719 0-330.854 150.305-330.854 335.72s330.854 559.534 330.854 559.534 330.854-374.117 330.854-559.534c0-185.415-148.135-335.72-330.854-335.72zM508.312 512.654c-87.336 0-158.129-70.793-158.129-158.129s70.793-158.129 158.129-158.129 158.129 70.793 158.129 158.129c0 87.328-70.793 158.129-158.129 158.129zM508.313 240.185c-64.488 0-116.772 52.285-116.772 116.772s52.285 116.772 116.772 116.772c64.498 0 116.772-52.285 116.772-116.772 0-64.488-52.275-116.772-116.772-116.772z' fill='%23666666' p-id='4834'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 36rpx;
		height: 36rpx;
		display: block;
	}
	.btn-selected{
		background: #007AFF;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		border: none;
		border-radius: 0;
	}
	.btn-selected.disabled{
		background: #f2f2f2;
		color: #ccc;
	}
</style>