zhgdyunapp_vue3/pages/projectEnd/InspectionRoute/mapLocatoin/mapLocatoin.vue

<template>
	<view>
		<view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					获取当前巡检点位置
				</view>
			</headers>
		</view>
		<view class="content" :style="{paddingTop: (mobileTopHeight + 50) * 1.5 + 'rpx'}">
			<view class="search-box">
				<picker mode="selector" :range="standOptions" @change="handleChangeStandArea" filterable>
					<view class="picker">
						<view class="" style="color: #c0c4cc; font-size: 28rpx;" v-if="!standArea">
							请选择
							<u-icon style="margin-left: 8rpx;" name="arrow-down" color="#c0c4cc"></u-icon>
						</view>
						<view class="" v-else>
							{{standArea}}米
							<u-icon style="margin-left: 8rpx;" name="arrow-down" color="#c0c4cc"></u-icon>
						</view>
					</view>
				</picker>
				<view class="">
					<input class="search-input" v-model="searchVal" @blur="onBlur" @input="changeInput" placeholder="请输入地点" id="tipinput" />
					<!-- 搜索出来的地址 -->
					<view v-show="showListView">
						<cover-view :class="{'display-none': !showListView}" class="search-address bg-white">
							<cover-view v-for="(item,index) in addressList" :key="item.id" class="addres_item bg-white"
								@click="chooseIs(index,item)">
								{{item.name}}
							</cover-view>
						</cover-view>
					</view>
					
					
				</view>

				<button class="search-btn" size="mini" type="primary" @click="searchArea">搜索</button>
			</view>
			<map id="map" :style="{
					width:mapConfig.width+'px',
					height:mapConfig.height+'px'
				}" :show-scale="true" :scale="mapConfig.scale" :latitude="mapConfig.latitude" :longitude="mapConfig.longitude"
				:markers="mapConfig.markers" :circles="mapConfig.circles"></map>
			<button class="save-btn" type="primary" @click="saveLocation">保存位置</button>
		</view>
	</view>
</template>

<script>
	let mapSearch = weex.requireModule('mapSearch');
	export default {
		data() {
			return {
				mobileTopHeight: 0,
				mapConfig: {
					width: 0,
					height: 0,
					scale: 14,
					latitude: undefined,
					longitude: undefined,
					markers: [], // 定位配置
					circles: [], // 显示圆配置
					address: ""
				},
				showMap: false,
				coordType: "gcj02",
				map: null,
				standOptions: [5, 10, 20, 30, 50, 100, 200, 300],
				standArea: undefined,
				searchVal: "",
				addressList: [],
				showListView: false,
			}
		},
		mounted() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res)
				}
			})
			console.log('this.mobileTopHeight', this.mobileTopHeight)
			this.initMap()
		},
		onLoad(option) {
			let info = uni.getWindowInfo();
			this.standArea = option.standArea;
			this.mapConfig.latitude = option.latitude;
			this.mapConfig.longitude = option.longitude;
			this.mapConfig.address = option.addr;

			this.mapConfig.width = info.windowWidth;
			this.mapConfig.height = info.windowHeight - 170;

			console.info(info.windowHeight, 'info.windowHeight')
			// uni.showLoading({
			// 	title: "加载地图资源中"
			// })
			// this.openMonitor()
		},
		methods: {
			initMap() {
				// uni.hideLoading();
				this.map = uni.createMapContext("map", this);
				this.registerEvent()
				this.mapSetLocation()
				this.drawCircle()
			},
			// 注册点击事件
			registerEvent() {
				let that = this;
				this.map.$getAppMap().onclick = function(point) {
					console.info(point, 'point')
					that.mapConfig.longitude = point.longitude
					that.mapConfig.latitude = point.latitude
					that.mapSetLocation()
					that.drawCircle()
					that.getAddress()
				}
			},
			// 设置定位
			mapSetLocation() {
				this.mapConfig.markers = [{
					latitude: this.mapConfig.latitude,
					longitude: this.mapConfig.longitude,
					iconPath: '../../static/map/end.png'
				}]
			},
			//画圆
			drawCircle() {
				this.mapConfig.circles = [ // 显示圆配置
					{
						latitude: this.mapConfig.latitude,
						longitude: this.mapConfig.longitude,
						color: '#3C71F2',
						// 填充颜色
						fillColor: '#5181F670',
						fillOpacity: 0.56,
						// 圆半径
						radius: this.standArea,
						// 边
						strokeWidth: 1,
						level: 'aboveroads'
					}
				]
				this.mapConfig.scale = this.standArea >= 200 ? 16 : this.standArea >= 100 ? 17 : 18;
			},
			// handleTapMap(e) {
			// 	console.info('点击', e)
			// 	let that = this;
			// 	const res = that.map.getCenterLocation({
			// 		success: (res) => {
			// 			console.info('当前定位', res)
			// 			that.mapConfig.latitude = res.latitude;
			// 			that.mapConfig.longitude = res.longitude;
			// 			that.mapSetLocation()
			// 			that.drawCircle()
			// 		}
			// 	})
			// },
			// 切换范围
			handleChangeStandArea(e) {
				this.standArea = this.standOptions[e.detail.value];
				this.drawCircle()
			},
			changeInput(){
				let that = this;
				if (!this.searchVal) return;
				mapSearch.poiKeywordsSearch({
					point: {
						latitude: this.mapConfig.latitude,
						longitude: this.mapConfig.longitude
					},
					key: this.searchVal
				}, (res) => {
					console.info('搜索:', res)
					if (res.poiList.length) {
						that.addressList = res.poiList;
						that.showListView = true;
					}
				})
			},
			chooseIs(index, item){
				this.searchVal = item.name;
				this.searchArea();
				console.log(item)
			},
			onBlur(){
				this.showListView = false;
			},
			// 搜索详细位置
			searchArea() {
				let that = this;
				if (!this.searchVal) return;
				mapSearch.poiKeywordsSearch({
					point: {
						latitude: this.mapConfig.latitude,
						longitude: this.mapConfig.longitude
					},
					key: this.searchVal
				}, (res) => {
					console.info('搜索:', res)
					if (res.poiList.length) {
						const {
							latitude,
							longitude
						} = res.poiList[0].location;
						that.mapConfig.latitude = latitude;
						that.mapConfig.longitude = longitude;
						that.showListView = false;
						that.mapSetLocation()
						that.drawCircle()
						that.getAddress()
					}
				})
			},
			// 保存位置
			saveLocation() {
				uni.$emit('locationSuccessEvent', {
					latitude: this.mapConfig.latitude,
					longitude: this.mapConfig.longitude,
					standArea: this.standArea,
					address: this.mapConfig.address
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 10)
			},
			// 地址逆解析，根据经纬度获取详细位置
			getAddress() {
				mapSearch.reverseGeocode({
						point: {
							latitude: this.mapConfig.latitude,
							longitude: this.mapConfig.longitude
						}
					},
					res => {
						console.info('成功回调', res)
						this.mapConfig.address = res.address || "未知位置"
					})
			},
		},
	}
</script>

<style lang="less">
	.bg-white {
		background-color: white;
	}
	.display-none {
		display: none;
	}
	.search-address {
		// width: 450rpx;
		// height: 450rpx;
		position: absolute;
		// padding: 14rpx 12rpx;
		// line-height: normal;
		margin-top: 4rpx;
		border-radius: 4rpx;
	}
	.addres_item :deep( .uni-cover-view ){
		padding: 4rpx 4rpx;
		font-size: 28rpx;
		// visibility: initial;
		// line-height: normal;
	}
	.fixedheader {
		position: fixed;   
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		.headerName {
			z-index: 1;
		}

		:deep( .headerBox ){
			background-color: #5181F6;
			color: white;

			.uni-icons {
				color: white !important;
			}
		}
	}

	.content {
		width: 100%;
		box-sizing: border-box;
	}

	.search-box {
		height: 100rpx;
		background-color: rgba(16, 16, 16, 0.08);
		display: flex;
		align-items: center;
	}

	.picker {
		width: 140rpx;
		height: 62rpx;
		line-height: 40rpx;
		border-radius: 22rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(51, 51, 51, 0.48);
		font-size: 28rpx;
		display: flex;
		padding: 0 16rpx;
		margin: 0 16rpx;
		align-items: center;
	}

	.search-input {
		flex: 1;
		min-width: 400rpx;
		height: 62rpx;
		line-height: 40rpx;
		border-radius: 22rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(51, 51, 51, 0.48);
		font-size: 28rpx;
		padding: 0 16rpx;
	}

	.search-btn {
		margin: 0 16rpx;
		flex-shrink: 0;
	}

	.save-btn {
		width: 100%;
		z-index: 999;
	}
</style>