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: [],
				city:'',
				currentAddress:{}
			};
		},
		onShow() {
		},
		methods: {
			checkAdd() {
				console.log(this.markers);
				uni.setStorageSync('address', this.markers[0]);
				uni.setStorageSync('currentAddress', this.currentAddress);
				// 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);
				this.currentAddress = add
				
				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: '',
					city:this.city || '太原' ,
					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) {
				console.log(e);
				let point = JSON.parse(decodeURIComponent(e.position))
				// point.iconPath = '/static/avatar_boy.png';
				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=6b8b0fd9f75da24fb1c13edf7b2d7daa'; //这里是自己申请的高德的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>