LocalLivingServicesUniapp/pages/login/map.vue

<template>
	<view class="content">
		<view id="amap" class="amap" style="width: 100%; height: 59vh;" 
			:pointList="pointList" :change:pointList="ModuleMap.setParkList">
		</view>
		<view class="btns"> 
			<view @click="back">取消</view>
			<view @click="checkAdd">确定</view>
		</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 style="position: absolute;top:30upx;width: 100%;">
            <view class="map-min-2-search-box">
                <input
                    v-model="address"
                    placeholder="搜索地点"
                    class="locationpicker-search-content-ipt"
                />
                <view class="locationpicker-search-clear" @click="onClearInput">
                <image
                    src="https://lbs.gtimg.com/visual/miniprogram-plugin/location-picker/assets/btn_close@2x.png"
                    class="locationpicker-search-clear-ipt"
                    mode=""
                ></image>
                </view>
                <view class="locationpicker-search--content-btn-line"></view>
                <view class="locationpicker-search-content-btn" @click="searchAddress">搜索</view>
			<button class="cu-btn bg-blue"  @click="surePoint">确认</button>

            </view>
		</view> -->
	</view>
</template>

<script>
	var amapFile = require('@/static/map/amap-wx.130.js');//如：..­/..­/libs/amap-wx.js
	// 创建地图
	var myAmapFun = new amapFile.AMapWX({key: '915d1d1ed40dc41450eda1d930ea1b2d'});
	export default {
		data() {
			return {
				markers: [],
				longitude: '',
				latitude: '',
				pointList: null,
				address: '',

				selectIndex:undefined,
				selectAddr:{},
				searchWords:"",
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				// latitude: 39.909,
				// longitude: 116.39742,
				dataTips:[],
				map: null,
				centerArr:[]

			};
		},
		methods: {
			checkAdd(){
				console.log(this.markers);
				uni.setStorageSync('address', this.markers[0]);
				// var pages = getCurrentPages();// 获取所有的页面栈
				// var prevPage = pages[pages.length - 2]; // 找到上一个页面，注意是页面，如果是页面中有组件，则需要通过页面接受到数据后，再次往组件中传递
				// prevPage.$vm.addressObj = this.selectAddr;//在上一个页面中就可以用addressObj进行接收
				// uni.navigateBack();
                this.back()
			},
			back(){
                 // 返回上一页
                uni.navigateBack({
                    delta: 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){
				console.log(add,index);
				if(!add){
					return;
				}
				this.selectIndex = index;
				var location = add.location.split(",");
				this.selectAddr = {
					address:add.pname?(add.pname+add.cityname+add.adname+add.address):(add.district+add.address),
					latitude:location[1],
					longitude:location[0]
				};
				this.markers = [{
					latitude:location[1],
					longitude: location[0]
				}]
				// this.markers[0].latitude = +location[1];
				// this.markers[0].longitude = +location[0];
				console.log(this.markers[0]);

			},
			// 根据内容进行检索
			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);
				  }
				})
			},
			//标记点触发方法
			markerClick(e) {
				this.longitude = e.split(':')[0]
				this.latitude = e.split(':')[1]
				this.markers = [{
					latitude: this.latitude,
					longitude: this.longitude
				}]
				
			},
	},
	onLoad(e) {
		// myAmapFun.getRegeo({
		// 	success: (data)=>{
		// 	console.log("获取当前定位信息",data[0][longitude]);
		// 	// this.centerArr=[data[0].longitude,data[0].latitude]
		// 	},
		// 	fail: (info)=>{
		// 	console.log(info)
		// 	}
		// })
		if(e){
				let point = JSON.parse(decodeURIComponent(e.position))
				// point.iconPath = '/static/avatar_boy.png';
				console.log(point,77777);
				this.markers = [point]
				// 传入的标点（反显用）
				this.longitude = point.longitude
				this.latitude = point.latitude
			}
		},
		mounted() {
			// 将传入的标点传入下面的 ModuleMap 中
			this.pointList = [this.longitude, this.latitude];
		},
	}
</script>
<script module="ModuleMap" lang="renderjs">
	export default {
		data() {
			return {
				map: null,
				layer: null,
				markers: '',
				isExistImplement: false,
				markerId: '',
				parkList: [],
			}
		},
		watch: {
			//监听位置数据的变化，并初始化地图（有位置数据则默认给个标点）
			parkList(v) {
				setTimeout(() => {
					if (window.AMap) {
						this.initAmap(v);
					} else {
						const script = document.createElement('script');
						script.src =
						'https://webapi.amap.com/maps?v=1.4.15&key=220880dab49e4a565afbf0bd989af006'; //这里是自己申请的高德的key
						script.onload = () => {
							this.initAmap(v);
						}
						document.head.appendChild(script);
					}
				});
			}
		},
		mounted() {

		},
		methods: {

			initAmap(marker) {
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					center: [112.34988, 37.827066], //中心点坐标
					zoom: 17, //显示的缩放级别
					zooms: [6, 30], //地图显示的缩放级别范围
				})
				//地图创建完成 标注点
				this.map.on("complete", () => {
					if (marker && marker.length) {
						this.markers = new AMap.Marker({
							// icon: new AMap.Icon({
							// 	image: 'static/img/map.png',
							// 	size: new AMap.Size(30, 34), //图标所处区域大小
							// 	imageSize: new AMap.Size(30, 34) //图标大小
							// }),
							position: [marker[0], marker[1]],
							offset: new AMap.Pixel(-15, -30)
						});
						this.markers.setMap(this.map);
						this.map.setCenter(marker)
					}
				})
				//点击事件
				this.map.on("click", (e) => {
					if (this.markers) {
						this.markers.setMap(null);
						this.markers = null;
					}
					if (!this.markers) {
						this.markers = new AMap.Marker({
							// icon: new AMap.Icon({
							// 	image: 'static/img/map.png',
							// 	size: new AMap.Size(30, 34), //图标所处区域大小
							// 	imageSize: new AMap.Size(30, 34) //图标大小
							// }),
							position: [e.lnglat.lng, e.lnglat.lat],
							offset: new AMap.Pixel(-15, -30)
						});
						this.markers.setMap(this.map);
						let str = e.lnglat.lng + ':' + e.lnglat.lat
						//地图点击事件 将位置信息传到上面的markerClick函数中
						this.$ownerInstance.callMethod('markerClick', str)
					}
					// this.createLabelsLayer();
				})
			},
			//接收传入的位置数据
			setParkList(newValue, oldValue, ownerInstance, instance) {
				this.parkList = newValue;
			},
		}
	}
</script>
<style scoped  lang="scss">
.map-min-2-search-box {
  height: 84rpx;
  background: #efefef;
  border-radius: 7px;
  height: 42px;
  margin: 0 14px 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;

  input {
    cursor: auto;
    display: block;
    font-family: UICTFontTextStyleBody;
    height: 1.4rem;
    min-height: 1.4rem;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .locationpicker-search-content-ipt {
    height: 42px;
    padding-left: 10px;
    width: 70%;
  }

  .locationpicker-search-clear {
    height: 43px;
    text-align: center;
    width: 33px;

    .locationpicker-search-clear-ipt {
      height: 16px;
      margin-top: 13px;
      width: 16px;
    }
  }

  .locationpicker-search--content-btn-line {
    background: #c7c7c7;
    height: 16px;
    margin: 13px -10px 0 0;
    width: 1px;
  }

  .locationpicker-search-content-btn {
    color: #427cff;
    height: 42px;
    line-height: 42px;
    padding: 0 10px 0 20px;
  }
}
.content{
        height: 100vh;
		.list{
			height:calc(40vh - 100upx);
			overflow-y: auto;
			width:702upx;
			margin:0 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:0;
			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;
				}
			}
		}
		
	}
	.btns{
		position: fixed;
		top:0;
		left:0;
		// height:100upx;
		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:1000 !important;
		view{
			margin:50upx 24upx 0;
			font-size:30upx;
            width:100upx;
            height:60upx;
            line-height: 60upx;
            text-align: center;
            border-radius: 10upx;
            color:#fff;
			&:first-child{
                background:#7e6d68;
			}
			&:last-child{
				background:#E13500;
			}
		}
	}
</style>