提交

components/Touchbox/Touchbox.vue

@@ -13,6 +13,7 @@
 				windowHeight: 0,
 				touchHeight: uni.upx2px(100),
 				popupHeight: 0,
+				initialHeight:0,
 				oldHeight: 0,
 				scrollHeight: 0,
 				minTop: 0,
@@ -33,16 +34,12 @@
 				type: Number,
 				default: 0.65,
 			},
-			// minHeight: {
-			// 	type: Number,
-			// 	default: 0.2,
-			// },
 		},
 		created() {
 			const { windowHeight } = uni.getSystemInfoSync();
 			this.windowHeight = windowHeight;
 			// this.windowWidth = uni.getSystemInfoSync().windowWidth;
-			this.popupHeight = this.oldHeight = windowHeight * this.smallHeight;
+			this.popupHeight = this.initialHeight =  this.oldHeight = windowHeight * this.smallHeight;
 
 			this.maxTop = windowHeight * (1 - this.smallHeight);
 			this.minTop = windowHeight * (1 - this.maxHeight);
@@ -81,7 +78,8 @@
 		methods: {
 			// 隐藏
 			concealList() {
-				this.popupHeight = this.touchHeight
+				// this.popupHeight = this.touchHeight
+				this.popupHeight = this.initialHeight
 			},
 			getstart(e) {
 				e.preventDefault();
@@ -107,7 +105,9 @@
 						this.popupHeight = s_h
 					} else {
 						// 在中等偏下区域,还原成最小高度
-						this.popupHeight = this.touchHeight
+						this.popupHeight = this.initialHeight
+						// this.popupHeight = this.touchHeight
+						
 					}
 
 				} else {

components/tiandituMap/tiandituMap.vue

@@ -31,6 +31,7 @@
 				checkedDot: false,
 				Tmap: null,
 				option: {
+					// dotPath:dotPath,
 					type: '',
 					apikey: '',
 					lng: '',
@@ -41,7 +42,7 @@
 		},
 
 		created() {
-
+			console.log('===== ', this.option)
 		},
 		mounted() {
 
@@ -53,9 +54,11 @@
 			compliteonLoadTianDiTu() {
 				this.$emit('onLoadTianDiTu')
 
+
 			},
 			initCharts(lng, lat, iconPng) {
 				this.option = {
+					...this.option,
 					apikey: this.apiKey,
 					lng,
 					lat,
@@ -109,9 +112,27 @@
 <script module="Trenderjs" lang="renderjs">
 	import { EventBus } from "@/utils/vueBus.js"
 	import iconPath from '@/static/images/point.png'
+	import dotPath from '@/static/images/dot.png'
+	import locationPath from '@/static/images/location.png'
+	import $confog from "@/config/index.js"
+	import { mapGetters } from "vuex"
+	const { type } = $confog
 	var Tmap = null;
 	const left = -(uni.upx2px(150));
 	export default {
+		props: {
+			// 点位列表
+			siteListArr: {
+				type: Array,
+				default: () => {
+
+				}
+			},
+			searchDot: {
+				type: Boolean,
+				default: false
+			},
+		},
 		data() {
 			return {
 				options: {},
@@ -120,17 +141,157 @@
 				MyLngLat: {
 					lng: '',
 					lat: ''
-				}
+				},
+				// 中心点位
+				centreDot: null,
+				// 中心点位地址解析
+				centreText: null,
+				// 中心点信息
+				centreMarker: '',
+				// 我的点位信息
+				MyMarker: null
+
 			}
 		},
 
+		computed: {
+			...mapGetters(['useLocation'])
+		},
 		mounted() {
 
 		},
 		beforeDestroy() {
 			this.removeMapEvent()
 		},
+
+		watch: {
+			siteListArr: {
+				handler(newL, oldL) {
+					this.handleSiteList(newL)
+				},
+				deep: true,
+				immediate: true
+			},
+			centreText: {
+				handler(newL, oldL) {
+					if (newL && newL !== oldL) {
+						this.$emit("centre-text-callback", newL)
+					}
+				},
+				deep: true
+			},
+			useLocation: {
+				handler(newL, oldL) {
+					if (this.MyMarker) this.setMyIcon()
+				},
+				deep: true
+			}
+		},
 		methods: {
+			handleSiteList(newArr) {
+				this.clearIcon().then(async (res) => {
+					const dotArr = []
+					if (Tmap) await this.getMapCenter();
+
+					const { Lng, Lat } = this.centreDot || {};
+					let maxIcon = false;
+					(newArr || []).forEach((el, index) => {
+						el.maxIcon = false;
+						// 通过搜索自动移动到收索返回的第一个点位
+						if (index === 0 && this.searchDot) {
+							this.SelectedDot(el, true, 12)
+						}
+						const { longitude, latitude, mapTypeIcon } = el;
+						if (Lng == el.longitude && Lat == el.latitude) {
+							el.maxIcon = true;
+							maxIcon = true;
+						};
+						this.setIcon(el);
+					});
+					// 是否标记中心点
+					if (!maxIcon) this.setCentre()
+					this.setMyIcon()
+
+				})
+
+				// console.log('siteListArr = ', newL)
+				// if (this.siteListArr && this.siteListArr.length) {
+				// 	setTimeout(() => {
+				// 		console.log("this.centreDot 1 = ", this.centreDot)
+				// 		const { longitude, latitude, mapTypeIcon } = el;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+				// 	}, 10);
+				// }
+
+
+
+
+			},
+			getMapCenter() {
+				return new Promise((resolve) => {
+					const Fn = () => {
+						if (Tmap) {
+							const c = Tmap.getCenter();
+							this.centreDot = {
+								Lng: c.getLng(),
+								Lat: c.getLat()
+							};
+							this.dotParse(c);
+							resolve()
+						} else {
+							setTimeout(() => {
+								Fn()
+							}, 100);
+						}
+					};
+					Fn()
+				})
+
+			},
+			// 中心点位逆解析
+			dotParse(v) {
+				try {
+					const geocode = new T.Geocoder();
+					geocode.getLocation(v, (result) => {
+						if (result.getStatus() == 0) {
+							let t = '';
+							const Address = result.getAddress()
+							try {
+								if (Address && Address.indexOf('湖北省武汉市') === 0) {
+									const lo = Address.split('湖北省武汉市')
+									lo.forEach((el, index) => {
+										if (index >= 1) {
+											t = `${t}${el}`
+										}
+									})
+								}
+							} catch (error) {
+								//TODO handle the exception
+							}
+							this.centreText = t || Address
+						} else {
+							this.centreText = null
+						}
+					});
+				} catch (error) {
+					this.centreText = null
+				}
+			},
 			onPosition() {
 				// const { longitude, latitude } = { longitude: 114.414431, latitude: 30.482926 };
 				// 	this.SelectedDot({ longitude, latitude })
@@ -142,13 +303,17 @@
 				// 	this.setMyIcon()
 
 				EventBus.$emit('TianDiTuSearch', (res) => {
-					const { longitude, latitude } = res;
-					this.SelectedDot({ longitude, latitude })
-					this.MyLngLat = {
-						lng: longitude,
-						lat: latitude
+					const { longitude, latitude } = res || {};
+					if (longitude && latitude) {
+						this.SelectedDot({ longitude, latitude })
 					}
-					this.clearIcon()
+
+					// 	// this.SelectedDot({ longitude, latitude })
+					// 	// this.MyLngLat = {
+					// 	// 	lng: longitude,
+					// 	// 	lat: latitude
+					// 	// }
+					// 	// this.clearIcon()
 				})
 
 			},
@@ -175,14 +340,36 @@
 			// 移动地图,获取中心点
 			MapMoveend(e) {
 				try {
-					console.log('------------------')
+					// if (type === 'H6') {
+					// 	const v = e.target.getCenter()
+					// 	// 自然缩放移动，刷新接口
+					// 	const Lng = v.getLng();
+					// 	const Lat = v.getLat();
+					// 	this.$emit("moveMap", { Lng, Lat })
+					// } else {
+					// 	// 地图移动，判断是否缩放/移动地图，还是通过点位定位
+					// 	if (!this.checkedDot) {
+					// 		const v = e.target.getCenter()
+					// 		// 自然缩放移动，刷新接口
+					// 		const Lng = v.getLng();
+					// 		const Lat = v.getLat();
+					// 		this.$emit("moveMap", { Lng, Lat })
+					// 	} else {
+					// 		// 点位移动，做处理
+					// 		this.$nextTick(() => {
+					// 			this.checkedDot = false;
+					// 		})
+					// 	}
+					// }
 					// 地图移动，判断是否缩放/移动地图，还是通过点位定位
 					if (!this.checkedDot) {
-						// 自然缩放移动，刷新接口
 						const v = e.target.getCenter()
-						const Lng = v.getLng();
-						const Lat = v.getLat();
-						this.$emit("moveMap", { Lng, Lat })
+						// 自然缩放移动，刷新接口
+						if (v) {
+							const Lng = v.getLng();
+							const Lat = v.getLat();
+							this.$emit("moveMap", { Lng, Lat })
+						}
 					} else {
 						// 点位移动，做处理
 						this.$nextTick(() => {
@@ -190,6 +377,7 @@
 						})
 					}
 
+
 				} catch (error) {
 					//TODO handle the exception
 				}
@@ -197,10 +385,11 @@
 
 			// 点击地图标注的点位
 			clickMapSite({ type, target, lnglat, containerPoint }) {
-				console.log('clickMapSite === ', 1)
+				console.log("type, target, lnglat, containerPoint = ", type, target, lnglat, containerPoint)
 				const Lng = lnglat.getLng();
 				const Lat = lnglat.getLat();
 				this.$emit('handleMapSite', { Lng, Lat })
+
 			},
 			// 天地图缩放事件
 			handleZoomEvent(event) {
@@ -220,7 +409,7 @@
 				}
 			},
 
-			initTmap() {
+			initTmap_() {
 				try {
 					Tmap = null;
 					Tmap = new T.Map('mapDiv', {
@@ -252,6 +441,7 @@
 			},
 
 			initTMap(newValue, oldValue, ownerInstance, instance) {
+				console.log('-----1----', newValue)
 				this.options = newValue
 				if (newValue.type === 'open' && newValue.apikey) {
 					if (!window.T) {
@@ -265,7 +455,7 @@
 							lng,
 							lat
 						} = this.options
-						this.initTmap()
+						this.initTmap_()
 						Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
 						this.$ownerInstance.callMethod('nextPoint', {
 							lng,
@@ -293,9 +483,8 @@
 					lat
 				} = this.options
 				var that = this;
-				this.initTmap()
+				this.initTmap_()
 				Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
-				this.setIcon(lng, lat, true)
 				this.$ownerInstance.callMethod('nextPoint', {
 					lng,
 					lat
@@ -310,21 +499,23 @@
 				this.addMapEvent()
 				this.$emit("handleSearch")
 			},
-			upDataChartsRender(lng, lat) {
-				if (!Tmap) return
-				this.setIcon(lng, lat, true)
-				Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
-			},
-			setIcon(lng, lat, isClear, iconU, info, max = false) {
-				if (isClear) {
-					this.clearIcon()
-				}
+			// upDataChartsRender(lng, lat) {
+			// 	if (!Tmap) return
+			// 	this.setIcon(lng, lat, true)
+			// 	Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
+			// },
+			// setIcon(lng, lat, isClear, iconU, info, max = false) {
+			setIcon(row) {
+				const { longitude, latitude, mapTypeIcon, locationName, maxIcon } = row
+
+				// this.setCentre({ lng, lat })
+				// return
 				const icon = new T.Icon({
-					iconUrl: iconU || this.options.png,
-					iconSize: max ? new T.Point(60, 60) : new T.Point(45, 45),
+					iconUrl: mapTypeIcon || this.options.png,
+					iconSize: maxIcon ? new T.Point(60, 60) : new T.Point(45, 45),
 					iconAnchor: new T.Point(15, 45)
 				});
-				const marker = new T.Marker(new T.LngLat(lng, lat), {
+				const marker = new T.Marker(new T.LngLat(longitude, latitude), {
 					icon
 				});
 				// 点位注册点击事件
@@ -335,11 +526,11 @@
 				// 缓存注册点击事件的点位
 				this.markerList.push(marker)
 				Tmap.addOverLay(marker);
-				if (info) {
+				if (locationName) {
 					try {
 						var label = new T.Label({
-							// text: this.setLable(info.locationName),
-							text: info.locationName,
+							// text: this.setLable(locationName),
+							text: locationName,
 							position: marker.getLngLat(),
 							offset: new T.Point(left, 30)
 						});
@@ -368,6 +559,8 @@
 						});
 						this.markerList = [];
 						this.labelLsit = [];
+						this.centreMarker = null;
+						this.MyMarker = null;
 						Tmap.clearOverLays();
 						this.setMyIcon()
 					} catch (error) {
@@ -401,22 +594,23 @@
 
 			},
 			setMyIcon() {
-				const { lng, lat } = this.MyLngLat || {}
-				if (!Tmap || !lng || !lat) return;
+				const { longitude, latitude } = this.useLocation || {}
+				if (!Tmap || !longitude || !latitude) return;
 				const icon = new T.Icon({
-					iconUrl: iconPath,
-					iconSize: new T.Point(45, 45),
-					iconAnchor: new T.Point(15, 30)
+					iconUrl: locationPath,
+					iconSize: new T.Point(36, 36)
 				});
-				const marker = new T.Marker(new T.LngLat(lng, lat), {
+				const marker = new T.Marker(new T.LngLat(longitude, latitude), {
 					icon
 				});
 
-				// Tmap.addOverLay(marker);
+				Tmap.addOverLay(marker);
 				try {
 					marker.removeEventListener("click", () => {});
 				} catch (error) {}
 				marker.addEventListener("click", () => {});
+				this.MyMarker = marker
+
 			},
 			setLable(locationName) {
 				let el = '';
@@ -428,6 +622,33 @@
 					}
 				};
 				return `<p class='map-label'>${el}<p>`
+			},
+			// setTcon
+			// centreDot
+			// 设置中心点坐标
+			setCentre() {
+				if (type !== 'H6') return
+				// siteListArr
+				if (this.centreDot) {
+					try {
+						const { Lng, Lat } = this.centreDot || {}
+						const icon = new T.Icon({
+							iconUrl: dotPath,
+							iconSize: new T.Point(36, 36)
+						});
+						const d_ = new T.Marker(new T.LngLat(Lng, Lat), {
+							icon,
+							zIndexOffset: 666
+						});
+						Tmap.addOverLay(d_);
+						this.centreMarker = d_
+					} catch (error) {
+						//TODO handle the exception
+						console.log('this.centreDot error ', error)
+					}
+
+
+				}
 			}
 		},
 	}

config/index.js

@@ -12,5 +12,5 @@ export default {
 	// 天地图
 	tianKey:'1edd9c001a8425cb93631398109d5ab2',
 	
-	type:'H5' , // H5 / H6,  web端打包需要修改 manifest.json web配置的基础运行路径
+	type:'H6' , // H5 / H6,  web端打包需要修改 manifest.json web配置的基础运行路径
 }

main.js

@@ -1,6 +1,7 @@
 import App from './App'
 import "@/static/css/index.scss";
-import $config from "@/config/index.js"
+import $config from "@/config/index.js";
+import store from "@/store";
 
  
 // #ifndef VUE3
@@ -14,6 +15,7 @@ Vue.prototype.$config = $config
 Vue.config.productionTip = false
 App.mpType = 'app'
 const app = new Vue({
+	store,
   ...App
 })
 app.$mount()

manifest.json

@@ -76,7 +76,7 @@
             "maps" : {}
         },
         "router" : {
-            "base" : "/h5/"
+            "base" : "/h6/"
         }
     }
 }

pages/map/model/search.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="search-content">
+	<view :class="[ 'search-content' , type === 'H6' ? 'h6-search-content' : '' ]">
 		<view class="search-box">
 			<view class="search-input-box">
 				<svg t="1733904658291" class="search-icon" viewBox="0 0 1024 1024" version="1.1"
@@ -15,11 +15,11 @@
 			<view class="search-select">
 				<view class="select-item" @click.stop="$refs.cityRef.open()">
 					<text class="item-text one-row">{{params.codeLabel || '办理区域'}}</text>
-					<u-icon name="arrow-down-fill" color="#101010" size="16"></u-icon>
+					<u-icon name="arrow-down-fill" :color="downFillColor" size="16"></u-icon>
 				</view>
 				<view class="select-item" @click.stop="$refs.mapTypeRef.open()">
 					<text class="item-text one-row">{{ params.typeName || '位置类型'}}</text>
-					<u-icon name="arrow-down-fill" color="#101010" size="16"></u-icon>
+					<u-icon name="arrow-down-fill" :color="downFillColor" size="16"></u-icon>
 				</view>
 			</view>
 		</view>
@@ -35,6 +35,7 @@
 	import { getMapList_Api } from "@/api/map.js"
 	import { EventBus } from "@/utils/vueBus.js"
 	import { getLocation } from "@/utils/tool.js"
+	import $confog from "@/config/index.js"
 	export default {
 		data() {
 			return {
@@ -54,9 +55,13 @@
 
 				LocationTimeout: null,
 				SearchTimeout: null,
+				type: $confog.type,
+				downFillColor: '#101010'
 			}
 		},
 		created() {
+			this.type = $confog.type;
+			this.downFillColor = $confog.type === 'H6' ? '#929292' : '#101010'
 			this.init()
 		},
 		mounted() {
@@ -80,6 +85,7 @@
 							clearTimeout(this.LocationTimeout);
 							this.LocationTimeout = null;
 							this.onSearchFocus()
+							this.$store.dispatch('updateUseLocation', { longitude, latitude })
 						} else {
 							this.init()
 						}
@@ -95,7 +101,7 @@
 			 * 
 			 */
 
-			handleSearch(callBack) { 
+			handleSearch(callBack) {
 				try {
 					uni.showLoading({
 						mask: true
@@ -108,14 +114,18 @@
 						}
 						callBack && callBack({ longitude: res.longitude, latitude: res.latitude })
 					}).catch(err => {
-						uni.showToast({
-							title: '获取定位失败',
-							icon: 'none'
-						})
+						if (this.selfLatitude && this.selfLongitude) {
+							callBack && callBack({ longitude: this.selfLatitude, latitude: this.selfLongitude })
+						} else {
+							uni.showToast({
+								title: '获取定位失败',
+								icon: 'none'
+							})
+						}
 					}).finally(() => {
 						uni.hideLoading()
 					})
-
+ 
 				} catch (error) {
 					console.log(999977999, error)
 					//TODO handle the exception
@@ -230,4 +240,14 @@
 			}
 		}
 	}
+
+	.h6-search-content {
+		.search-select {
+			.item-text {
+				color: #929292;
+			}
+		}
+
+
+	}
 </style>

pages/map/model/telList.vue

@@ -1,5 +1,5 @@
 <template>
-	<uni-popup ref="telRef" type="center" border-radius="10px 10px 0 0" maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
+	<uni-popup ref="telRef" :isMaskClick='true' type="center" border-radius="10px 10px 0 0" maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
 		<view class="tel-box">
 			<view class="tel-title">请选择电话拨打</view>
 			<view class="tel-number">
@@ -30,7 +30,7 @@
 			open(parmas = {}) {
 				const { tel } = parmas;
 				if (tel) {
-					if (tel.length === 1) {
+					if (tel.length === 1 && !tel[0].remark) {
 						this.onPhoneCall(tel[0].phone)
 					} else {
 						this.telList = tel;

store/getters.js

@@ -0,0 +1,4 @@
+const getters = {
+  useLocation: state => state.map.useLocation
+}
+export default getters

store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import map from './modules/map'
+import map2 from './modules/map2'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    map,
+	map2
+  },
+  getters
+})
+
+export default store

store/modules/map.js

@@ -0,0 +1,31 @@
+const map = {
+	state: {
+		useLocation:null
+	},
+
+	mutations: {
+		// SET_TOKEN: (state, token) => {
+		// 	state.token = token
+		// },
+		// SET_NAME: (state, name) => {
+		// 	state.name = name
+		// },
+		// SET_AVATAR: (state, avatar) => {
+		// 	state.avatar = avatar
+		// },
+		// SET_ROLES: (state, roles) => {
+		// 	state.roles = roles
+		// },
+		// SET_PERMISSIONS: (state, permissions) => {
+		// 	state.permissions = permissions
+		// }
+	},
+
+	actions: {
+		updateUseLocation({ commit, state } , lo) {
+			state.useLocation = lo || null
+		}
+	}
+}
+
+export default map

store/modules/map2.js

@@ -0,0 +1,37 @@
+const map2 = {
+	state: {
+		// token: getToken(),
+		// name: '',
+		// avatar: '',
+		// roles: [],
+		// permissions: []
+	},
+
+	mutations: {
+		// SET_TOKEN: (state, token) => {
+		// 	state.token = token
+		// },
+		// SET_NAME: (state, name) => {
+		// 	state.name = name
+		// },
+		// SET_AVATAR: (state, avatar) => {
+		// 	state.avatar = avatar
+		// },
+		// SET_ROLES: (state, roles) => {
+		// 	state.roles = roles
+		// },
+		// SET_PERMISSIONS: (state, permissions) => {
+		// 	state.permissions = permissions
+		// }
+	},
+
+	actions: {
+		updateDotInfo() {
+			
+		console.log('更新点位2')
+		
+		}
+	}
+}
+
+export default map2