cbz/pages/user/map.vue

<template>
	<view class="content">
		<view class="btns">
			<view @click="back">取消</view>
			<view @click="checkAdd">确定</view>
		</view>
		<!-- // 地图部分 -->
		 <map style="width: 100%; height: 60vh;" :latitude="latitude" :longitude="longitude" :markers="markers" @tap="tap" :include-points="markers" :scale="10"/>
		 <!-- <view id="container"></view> -->
		 <!-- // 搜索框 -->
		 <view class="inputCon">
			 <view class="searchView">
				 <text class="iconfont icon-sousuo"></text>
				 <input type="text" placeholder="搜索地点" v-model="searchWords" confirm-type="search" @confirm="searchFn"/>
				 <text @click="cancel">取消</text>
			 </view>
		 </view>
		 <!-- // 地点列表部分 -->
		 <view class="list">
			 <view class="item" v-for="(add,index) in dataTips" :key="add.id" @click="select(add,index)"
			 :class="selectIndex==index?'active':''">
				 <view class="name">{{add.name}}</view>
				 <view class="address">{{add.district || ''}}{{add.address || ''}}</view>
			 </view>
		 </view>
	</view>
</template>

<script>
// 引入高德地图api提供的微信小程序的接口
	import amapFile from '@/static/js/amap-wx.130.js'
	// 创建地图
	var myAmapFun = new amapFile.AMapWX({key: 'bb69713f3c3d3c85e2662d313daa47b9'});
	import $api from '../../static/js/api.js'
	export default{
		data(){
			return{
				selectIndex:undefined,
				selectAddr:{},
				searchWords:"",
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				markers: [{
					id: 0,
					latitude: 39.909,
					longitude: 116.39742,
					// iconPath: ''
				}],
				dataTips:[]
			}
		},
		onLoad(options) {
			if(options && options.lng){
				this.longitude = options.lng;
				this.markers[0].longitude = this.longitude;
			}
			if(options && options.lat){
				this.latitude = options.lat;
				this.markers[0].latitude = this.latitude;
			}
			
			// 获取当前位置的地点列表
			myAmapFun.getPoiAround({
			  success: (data)=>{
				this.dataTips = data.poisData;
			  },
			  fail: (info)=>{
				console.log(info)
			  }
			})
		},
		methods:{
			// 选择地点后，将选取的地点传递到前一个页面中
			checkAdd(){
				
				this.select(this.dataTips[this.selectIndex],this.selectIndex)
				console.log(this.markers);
				uni.setStorageSync('address', this.markers[0]);
				var pages = getCurrentPages();// 获取所有的页面栈
				var prevPage = pages[pages.length - 2]; // 找到上一个页面，注意是页面，如果是页面中有组件，则需要通过页面接受到数据后，再次往组件中传递
				console.log(this.selectAddr);
				prevPage.$vm.addressObj = this.selectAddr;//在上一个页面中就可以用addressObj进行接收
				$api.jump(1,-1)
			},
			back(){
				$api.jump(1,-1)
			},
			cancel(){
				if(this.searchWords){
					this.searchWords = "";
					myAmapFun.getPoiAround({
					  location: this.markers[0].longitude+','+this.markers[0].latitude,
					  success: (data)=>{
						console.log("获取当前的列表",data);
						this.dataTips = data.poisData;
					  },
					  fail: (info)=>{
						console.log(info)
					  }
					})
				}
			},
			reserGeo(){
				myAmapFun.getRegeo({
				  success: (data)=>{
					console.log("获取当前定位信息",data);
				  },
				  fail: (info)=>{
					console.log(info)
				  }
				})
			},
			// 根据地址列表中选择某一个地点
			select(add,index){
				if(!add){
					return;
				}
				if(add.district) {
					myAmapFun.getRegeo({
						location:add.location,
						success: (data)=>{
							console.log("获取当前定位信息",data[0].regeocodeData.addressComponent.city.length == 0);
							this.selectIndex = index;
							var location = add.location.split(",");
							this.selectAddr = {
								address:data[0].regeocodeData.formatted_address,
								latitude:location[1],
								longitude:location[0],
								province: data[0].regeocodeData.addressComponent.province,
								city: data[0].regeocodeData.addressComponent.city.length == 0?data[0].regeocodeData.addressComponent.province:data[0].regeocodeData.addressComponent.city,
								area: data[0].regeocodeData.addressComponent.district
							};
							this.markers[0].latitude = +location[1];
							this.markers[0].longitude = +location[0];
						},
						fail: (info)=>{
							console.log(info)
						}
					})
				}
				else {
					this.selectIndex = index;
					var location = add.location.split(",");
					this.selectAddr = {
						address:add.name?(add.name):(add.name),
						latitude:location[1],
						longitude:location[0],
						province: add.pname,
						city: add.cityname,
						area: add.adname
					};
					this.markers[0].latitude = +location[1];
					this.markers[0].longitude = +location[0];
				}
			},
			// 在地图上点击进行选点，这个选点在地图缩放比例较大时无效，因为精读的问题。
			tap(e){
				var location = e.detail.longitude +','+e.detail.latitude
				myAmapFun.getRegeo({
				  location: location,
				  success: (data)=>{
					console.log("获取指定定位信息",data);
					console.log(e);
					this.selectAddr = {
						address:data[0].regeocodeData.formatted_address,
						latitude:e.detail.latitude,
						longitude:e.detail.longitude,
						// province: add.pname,
						// city: add.cityname,
						// area: add.adname
					};
					this.markers[0].latitude = data[0].latitude;
					this.markers[0].longitude = data[0].longitude;
					myAmapFun.getPoiAround({
					  location: data[0].longitude+','+data[0].latitude,
					  success: (data)=>{
						console.log("获取当前的列表",data);
						this.dataTips = data.poisData;
					  },
					  fail: (info)=>{
						console.log(info)
					  }
					})
				  },
				  fail: (info)=>{
					console.log(info);
				  }
				})
			},
			// 根据内容进行检索
			searchFn(){
				console.log("根据地址检索",this.searchWords);
				myAmapFun.getInputtips({
				  keywords: this.searchWords,
				  location: '',
				  success: (data) => {
					  console.log(111,data);
					if(data && data.tips){
					  this.dataTips = data.tips;
					}
				  },
				  fail:data=>{
					  console.log(222,data);
				  }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns{
		position: fixed;
		top:0;
		left:0;
		height:260upx;
		width:100%;
		background:linear-gradient(to bottom,rgba(0,0,0,0.4),rgba(0,0,0,0));
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index:10 !important;
		view{
			margin:140upx 24upx 0;
			font-size:30upx;
			&:first-child{
				color:#fff;
			}
			&:last-child{
				width:100upx;
				height:60upx;
				line-height: 60upx;
				text-align: center;
				border-radius: 10upx;
				background:#E13500;
				color:#fff;
			}
		}
	}
	.content{
		.list{
			height:calc(40vh - 100upx);
			overflow-y: auto;
			width:702upx;
			margin:-40upx auto 0;
			padding-bottom:20upx;
			.item{
				border-bottom:2upx solid #f3f3f3;
				&:last-child{
					border:none;
				}
				.address{
					font-size:22upx;
					color:#666;
					margin:10upx 0;
				}
				.name{
					font-size:30upx;
					color:#333;
					margin-top:10upx;
				}
				&.active{
					.name{
						font-weight: bold;
						color:#E13500;
					}
					.address{
						color:#E13500;
					}
				}
			}
		}
		.inputCon{
			width:100%;
			background:#fff;
			top:-60upx;
			position: relative;
			z-index:20;
			height:100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.searchView{
				width:702upx;
				height:60upx;
				display: flex;
				align-items: center;
				line-height: 60upx;
				border-radius: 40upx;
				padding:0 30upx;
				box-sizing: border-box;
				background:#f3f3f3;
				font-size:26upx;
				.iconfont{
					color:#666;
					margin-right:20upx;
				}
				input{
					flex:1;
				}
				view{
					flex-shrink: 0;
				}
			}
		}
		
	}
</style>