no message

components/tiandituMap/tiandituMap.vue

@@ -235,10 +235,7 @@
 						const script = document.createElement('script')
 						script.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=' + this.options.apikey
 						script.onload = this.initChartsRender.bind(this)
-						document.head.appendChild(script)
-						setTimeout(() => {
-							this.$emit("handleSearch")
-						}, 1000);
+						document.head.appendChild(script) 
 					} else {
 						const {
 							lng,
@@ -287,6 +284,7 @@
 				// 	console.log('addEventListener  = ' , e)
 				// });
 				this.addMapEvent()
+				this.$emit("handleSearch")
 			},
 			upDataChartsRender(lng, lat) {
 				if (!Tmap) return

pages.json

@@ -15,6 +15,12 @@
 			"style": {
 				"navigationBarTitleText": "武汉公安政务服务"
 			}
+		},
+		{
+			"path": "pages/map/cs",
+			"style": {
+				"navigationBarTitleText": "武汉公安政务服务"
+			}
 		}
 	],
 	"globalStyle": {

pages/map/cs.vue

@@ -0,0 +1,459 @@
+<template>
+	<view class="map-box">
+	 
+
+		<tiandituMap ref="tiandituMapRefs" @handleSearch="handleSearch" @clickMap="handleClickMap"
+			@moveMap="moveMapSearch" @onLoadTianDiTu="initMaps" @onSelect="selectPoint" :apiKey="apiKey"
+			@handleMapSite="handleMapSite">
+		</tiandituMap>
+
+		 
+	</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"
+	import siteDetails from "./model/siteDetails.vue"
+	import $config from "@/config/index.js"
+	import { EventBus } from "@/utils/vueBus.js"
+	import { getLocation, throttle } from "@/utils/tool.js"
+	let mapThat = this;
+	export default {
+		name: 'tdtmap',
+		components: {
+			search,
+			siteListModel,
+			siteDetails
+		},
+		data() {
+			return {
+				mapThat: this,
+				showMap: false,
+				longitude: undefined,
+				latitude: undefined,
+				apiKey: $config.tianKey,
+				winWidth: 0,
+				winHeight: 0,
+				winTop: 0,
+				datalist: [],
+				startY: 0,
+				selectItem: {},
+				iStatusBarHeight: 0,
+
+
+				siteListArr: [],
+				TouchHeight: 0,
+			}
+		},
+		created() {
+			mapThat = this;
+			getLocation();
+
+			this.getMapCenterPoint()
+		},
+		mounted() {
+			this.disableScroll()
+		},
+		beforeDestroy() {
+			try {
+				document.removeEventListener('touchmove');
+				document.body.removeEventListener('mousewheel');
+				document.body.removeEventListener('DOMMouseScroll');
+				document.removeEventListener('onmousewheel', function() {
+					window.event.returnValue = false;
+				});
+			} catch (error) {
+				//TODO handle the exception
+			}
+		},
+		watch: {
+			siteListArr: {
+				handler(newArr) {
+					try {
+						this.$refs.tiandituMapRefs.clearIcon().then(res => {
+							this.$nextTick(() => {
+								(newArr || []).forEach((el, index) => {
+									const { longitude, latitude, mapTypeIcon } = el
+									this.$refs.tiandituMapRefs.setIcon(longitude, latitude, false,
+										mapTypeIcon,
+										el);
+								})
+							})
+						});
+					} catch (error) {}
+
+				},
+				deep: true
+			}
+		},
+		methods: {
+			disableScroll() {
+				if (typeof window.addEventListener === 'function') {
+					document.addEventListener('touchmove', function(e) {
+						e.preventDefault();
+					}, { passive: false });
+					document.body.addEventListener('mousewheel', function(e) {
+						e.preventDefault();
+					});
+					document.body.addEventListener('DOMMouseScroll', function(e) {
+						e.preventDefault();
+					});
+				} else {
+					document.attachEvent('onmousewheel', function() {
+						window.event.returnValue = false;
+					});
+				}
+			},
+			// 点击地图
+			handleClickMap() {
+				if (this.$refs.TouchboxRef) {
+					this.$refs.TouchboxRef.concealList()
+				}
+			},
+			// 点击地图标注点位
+			handleMapSite(parmas = {}) {
+				const { Lng, Lat } = parmas;
+				const item = (this.siteListArr || []).find(el => el.longitude == Lng && el.latitude == Lat);
+				this.checkSiteDetails(item)
+			},
+			// 查看点位详情
+			checkSiteDetails(info) {
+				if (info) {
+					this.$refs.tiandituMapRefs.Trenderjs.SelectedDot(info)
+					// EventBus.$emit('TianDiTuSite', info)
+					this.handleClickMap();
+					this.$refs.siteDetailsRef.openDetails(info)
+				}
+			},
+			// 获取地图中心点
+			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()
+				})
+			},
+			moveMapSearch(parms) {
+				const { Lng, Lat } = parms;
+				this.longitude = Lng;
+				this.latitude = Lat;
+				this.$refs.searchRef.handleSearch()
+				// console.log("moveMapSearch", Lng, Lat)
+			},
+			handleSearch(val = {}) {
+				const parms = {
+					...val,
+					longitude: this.longitude,
+					latitude: this.latitude,
+					radius: 5000
+				};
+				getMapList_Api(parms).then(res => {
+					if (!res || res.length === 0) {
+						uni.showToast({
+							title: "当前区域无办理点位",
+							icon: 'none'
+						})
+					}
+					this.siteListArr = res || [];
+				}).catch(err => {
+					this.siteListArr = [];
+				}).finally(() => {
+					clearTimeout(this.SearchTimeout)
+					this.SearchTimeout = null;
+				})
+			},
+			// //普通搜索
+			// handleSearch(val = {}) {
+			// 	const parms = {
+			// 		...val,
+			// 		longitude: this.longitude,
+			// 		latitude: this.latitude,
+			// 		radius: 5000
+			// 	};
+			// 	getMapList_Api(parms).then(res => {
+			// 		if (!res || res.length === 0) {
+			// 			uni.showToast({
+			// 				title: "当前区域无办理点位",
+			// 				icon: 'none'
+			// 			})
+			// 		}
+			// 		this.siteListArr = res || [];
+			// 	}).catch(err => {
+			// 		this.siteListArr = [];
+			// 	})
+			// },
+			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('https://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('https://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;
+		/* 		position: fixed;
+		left: 0;
+		top:0;
+		right: 0;
+		bottom: 0; */
+	}
+
+
+
+	.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>