H5/pages/map/index.vue

<template>
	<view class="map-box">

		<search @handleSearch="handleSearch" v-if="showMap" />
		<tiandituMap ref="tiandituMapRefs" @onLoadTianDiTu="initMaps" @onSelect="selectPoint" :apiKey="apiKey">
		</tiandituMap>
		<bab-Touchbox v-if="showMap && siteList && siteList.length > 0" :zIndex="1001" :minHeight="0.35" :maxHeight="0.8" :touchHeight="64"
			@currentHeight="setTouchHeight" @maxtHeight="setScrollMaxHeight">
			<scroll-view :style="{'height':TouchHeight - 40  +'px' }" scroll-y="true" :show-scrollbar="false">
				<template v-for="item in siteList">
					<siteListModel :info="item" />
				</template>
			</scroll-view>
		</bab-Touchbox>
	</view>
</template>
<script>
	import tools from '@/components/tiandituMap/tools.js'
	import search from "./model/search.vue"
	import siteListModel from "./model/siteList.vue";
	import { getMapCenterPoint_Api, getMapList_Api } from "@/api/map.js"
	export default {
		name: 'tdtmap',
		components: {
			// tiandituMap,
			search,
			siteListModel
		},
		data() {
			return {
				showMap: false,
				longitude: undefined,
				latitude: undefined,
				apiKey: '1edd9c001a8425cb93631398109d5ab2',
				winWidth: 0,
				winHeight: 0,
				winTop: 0,
				datalist: [],
				startY: 0,
				// domMaxHeight: '50vh',
				// domMinHeight: '0vh',
				selectItem: {},
				iStatusBarHeight: 0,
				option: {
					apikey: '123123',
				},

				siteList: [],
				TouchHeight: 0,
			}
		},
		created() {
			// if (navigator.geolocation) {
			//   navigator.geolocation.getCurrentPosition(function(position) {
			//     var latitude = position.coords.latitude;
			//     var longitude = position.coords.longitude;
			//     // 在这里处理获取到的经纬度
			// 	console.log("Longitude is :", latitude , longitude);
			//   });
			// } else {
			//   // 处理不支持 Geolocation 的情况
			//   console.error("Error Code = " + error.code + " - " + error.message);
			// }
			// try {
			// 	uni.getLocation({
			// 		type:'wgs84',
			// 		cacheTimeout: 30 * 60,
			// 		success: Location => {
			// 			console.log("getLocation" , Location)
			// 			// const address = Location.address;
			// 			// // 缓存全局的定位信息
			// 			// app.globalData.location = address;
			// 			// this.location = address;
			// 			// if (!address.city) {
			// 			// 	uni.showToast({
			// 			// 		title: '获取定位失败',
			// 			// 		icon: 'none'
			// 			// 	})
			// 			// } else {
			// 			// 	uni.showToast({
			// 			// 		title: '获取定位成功，请开始抽奖',
			// 			// 		icon: 'none'
			// 			// 	})
			// 			// }

			// 		},
			// 		fail: LocationErr => {
			// 			 console.log("LocationErr = " , LocationErr)
			// 		} 
			// 	})
			// } catch (error) {
			// 	console.log("LocationErr = catch" , LocationErr)
			// }
			// // uni.getSystemInfo({
			// //     success: function(res) {
			// //         that.winWidth = res.windowWidth
			// //         that.winHeight = res.windowHeight
			// //         that.winTop = res.windowTop
			// //     }
			// // });
		},
		mounted() {
			// this.open(114.294, 30.534)
			this.getMapCenterPoint()
		},
		watch: {
			siteList: {
				handler(newArr) {
					this.$refs.tiandituMapRefs.clearIcon();
					(newArr || []).forEach(el => {
						const { longitude, latitude, mapTypeIcon } = el
						this.$refs.tiandituMapRefs.setIcon(longitude, latitude, false, mapTypeIcon);
					})
				},
				deep: true
			}
		},
		methods: {
			// 获取地图中心点
			getMapCenterPoint() {
				uni.showLoading()
				this.showMap = false;
				getMapCenterPoint_Api().then(res => {
					const { longitude, latitude , mapTypeIcon } = res || {};
					this.longitude = longitude;
					this.latitude = latitude;
					this.open(longitude, latitude , mapTypeIcon)
					
				}).catch(err => { this.open(null, null) }).finally(() => {
					uni.hideLoading()
				})
			},
 
			handleSearch(val = {}) {
				const parms = { ...val, longitude: this.longitude, latitude: this.latitude };
				getMapList_Api(parms).then(res => {
					if(!res || res.length === 0){
						uni.showToast({
							title:"搜索结果为空",
							icon:'none'
						})
					}
					this.siteList = res || [];
				}).catch(err => {
					this.siteList = [];
				})
			},



			open(lon, lat , mapTypeIcon) {
				if (lon && lat) {
					this.$nextTick(() => {
						this.$refs.tiandituMapRefs.initCharts(lon, lat , mapTypeIcon)
						this.showMap = true;
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '地图中心点获取错误，请联系管理员！',
						success: res => {
							console.log("showModal == ", res)
							if (res.confirm) {}
						}
					})
				}

			},
			close() {
				this.visible = false
			},
			onConfirm() {
				if (Object.keys(this.selectItem).length) {
					this.visible = false
					this.$emit('onSelect', this.selectItem)
				} else {
					tools.createMessage('请选择位置')
				}
			},
			upDateLonLat(lon, lat) {
				if (lon && lat) {
					this.$refs.tiandituMapRefs.upDataCharts(lon, lat)
				} else {
					console.error('请传入lon, lat')
				}
			},
			tianidtuSearch(value) {
				if (value.city) {
					this.cityInfoSearch(value)
				} else {
					this.infoSearch(value)
				}
			},
			async infoSearch(value) { // 地理编码查询
				let params = {
					ds: {
						"keyWord": value.keyword,
					},
					tk: this.apiKey,
				}
				let resData = await tools.createRequest('http://api.tianditu.gov.cn/geocoder', params, true)
				if (resData.status === '0') {
					const location = resData.location
					const formateOne = tools.formatterAdressLocation(resData, 3)
					this.datalist = [formateOne]
					this.selectItem = datalist
					this.$refs.tiandituMapRefs.upDataCharts(location.lon, location.lat)
				}
			},
			async cityInfoSearch(value) { // 地名搜索2.0
				let params = {
					postStr: {
						"keyWord": value.keyword,
						"queryType": 12,
						"start": 0,
						"count": 10,
						"specify": value.city.value
					},
					type: 'query',
					tk: this.apiKey,
				}
				let resData = await tools.createRequest('http://api.tianditu.gov.cn/v2/search', params, true)
				if (resData.status.infocode === 1000) {
					const {
						pois: aPoints,
						count
					} = resData
					if (count === '0' || !aPoints || !aPoints.length) {
						return tools.createMessage('没有找到该地址')
					}
					const {
						pois,
						keyWord,
						lonlat
					} = aPoints[0]
					const formateData = aPoints.map((item) => tools.formatterAdressLocation(item, 2))
					this.datalist = formateData
					this.selectItem = formateData[0]
					const [lon, lat] = lonlat.split(',')
					this.$refs.tiandituMapRefs.upDataCharts(lon, lat)
				} else {
					tools.createMessage('数据异常', 1000, false, 'error')
				}
			},
			selectListItem(item) {
				this.$refs.tiandituMapRefs.upDataCharts(item.location.lon, item.location.lat)
			},
			selectPoint(e) {
				this.domMinHeight = '0vh'
				this.datalist = [e]
				this.selectItem = e
			},
			initMaps() {
				console.warn('--------天地图加载完成--------');
				this.$emit('onLoad')
			},
			// start(e) {
			// 	const clientY = e.changedTouches[0].clientY
			// 	this.startY = clientY
			// },
			// end(e) {
			// 	const transformY = e.changedTouches[0].clientY - this.startY;
			// 	switch (true) {
			// 		case transformY > 50:
			// 			console.log('下划')
			// 			this.domMaxHeight = '20vh'
			// 			this.domMinHeight = '0vh'
			// 			break;
			// 		case transformY < -50:
			// 			console.log('上划')
			// 			this.domMaxHeight = '50vh'
			// 			this.domMinHeight = '50vh'
			// 			break;
			// 		default:
			// 			break;
			// 	}

			// },
			selectCard(item) {
				this.domMaxHeight = '20vh'
				this.domMinHeight = '0vh'
				this.selectItem = item
				this.selectListItem(item)
			},



			setTouchHeight(val) {
				console.log('setScrollHeight = ', val)
				// 实时返回的滑动组件高度
				this.TouchHeight = val;
			},
			setScrollMaxHeight(val) {
				//最大高度
				this.scrollMaxHeight = val;
			},
		}
	}
</script>



<style scope>
	.map-box {
		width: 100vw;
		height: 100vh;

	}



	.mask {
		/* overflow: hidden; */
		position: fixed;
		left: 0;
		background-color: #FFFFFF;
		z-index: 399;
	}

	/* footer */
	.list-boxd {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 401;
		right: 0;
		border-radius: 14px 14px 0 0;
		background: #FFFFFF;
		transition: all 1s;
	}

	.list-header {
		height: 20px;
		position: relative;
		border-bottom: 1px solid #f3f4f6;
		cursor: pointer;
	}

	.list-header::after {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		content: '';
		height: 6px;
		width: 60px;
		border-top: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
	}

	.list-content {
		max-height: 50vh;
		overflow-y: scroll;
	}

	.card {
		min-height: 44px;
		padding: 12px;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.card-left {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.card-right {
		padding-right: 10px;
	}

	.arrow {
		border-top: 2px solid #666666;
		border-right: 2px solid #666666;
		width: 10px;
		height: 10px;
		transform: rotate(45deg);
	}


	.card:active {
		background-color: #f3f4f6;
	}


	.card::after {
		position: absolute;
		content: '';
		bottom: 0;
		height: 1px;
		background-color: #e8e8e8;
		width: 90%;
	}

	.card:last-child::after {
		height: 0;
		background-color: #FFFFFF;
	}

	.card-title {
		font-size: 18px;
	}

	.card-text {
		color: #e8e8e8;
		font-size: 13px;
	}
</style>