H5/components/tiandituMap/tiandituMap.vue

<template>
	<view id="mapDiv" class="mapDiv" :apikey="apiKey" :prop="option" :change:prop="Trenderjs.initTMap">
		<!-- :change:prop="Trenderjs.initTMap" -->
		<!-- <view class="position" @click.stop="Trenderjs.onPosition">
			<svg t="1734080022350" class="position-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="4287" xmlns:xlink="http://www.w3.org/1999/xlink">
				<path d="M512 512m-80 0a80 80 0 1 0 160 0 80 80 0 1 0-160 0Z" p-id="4288"></path>
				<path
					d="M960 480h-33.632C910.752 276.16 747.84 113.248 544 97.632V64a32 32 0 1 0-64 0v33.632C276.16 113.248 113.248 276.16 97.632 480H64a32 32 0 0 0 0 64h33.632C113.248 747.84 276.16 910.752 480 926.368V960a32 32 0 1 0 64 0v-33.632C747.84 910.752 910.752 747.84 926.368 544H960a32 32 0 1 0 0-64zM544 862.368V800a32 32 0 1 0-64 0v62.368C311.424 847.104 176.896 712.576 161.632 544H224a32 32 0 1 0 0-64H161.632C176.896 311.424 311.424 176.896 480 161.632V224a32 32 0 0 0 64 0V161.632c168.576 15.296 303.104 149.792 318.368 318.368H800a32 32 0 1 0 0 64h62.368c-15.264 168.576-149.792 303.104-318.368 318.368z"
					p-id="4289"></path>
			</svg>

		</view> -->
	</view>
</template>

<script>
	import tools from './tools.js'
	import iconPath from '@/static/images/point.png'
	import { EventBus } from "@/utils/vueBus.js"
	export default {
		name: "tianditu",
		props: {
			apiKey: {
				type: String,
				require: true,
				default: ''
			},
		},
		data() {
			return {
				Tmap: null,
				option: {
					type: '',
					apikey: '',
					lng: '',
					lat: '',
					png: iconPath
				}
			};
		},

		created() {

		},
		mounted() {
			EventBus.$on('TianDiTuSite', (res) => {
				const { longitude, latitude } = res;
				this.Trenderjs.SelectedDot(longitude, latitude)
				console.log('Event received with payload:', res);
			});
		},
		beforeDestroy() {
			EventBus.$off('someEvent'); // 确保在组件销毁前移除事件监听
		},
		methods: {
			compliteonLoadTianDiTu() {
				this.$emit('onLoadTianDiTu')
			},
			initCharts(lng, lat, iconPng) {
				this.option = {
					apikey: this.apiKey,
					lng,
					lat,
					png: iconPng || this.option.png,
					type: 'open'
				}
				// setTimeout(() => {
				// 	this.Trenderjs.getLocation()
				// }, 5000)
			},
			upDataCharts(lng, lat) {
				this.option = {
					...this.option,
					type: 'Icon',
					lng,
					lat,
					png: this.customIcon || this.option.png,
					type: 'update'
				}
			},
			async nextPoint(lnglat) {
				var that = this;
				let params = {
					postStr: JSON.stringify({
						lon: lnglat.lng,
						lat: lnglat.lat,
						ver: 1,
					}),
					type: 'geocode',
					tk: that.apiKey
				}
				let resData = await tools.createRequest('https://api.tianditu.gov.cn/geocoder', params, true)
				if (resData.status === '0') {
					const info = tools.formatterAdressLocation(resData.result, 1)
					this.option = {
						...this.option,
						apikey: this.apiKey,
						lng: lnglat.lng,
						lat: lnglat.lat,
						png: this.customIcon || this.option.png,
						type: 'update'
					}
					this.$emit('onSelect', info)
				} else {
					tools.createMessage('数据异常', 1000, false, 'error')
				}
			},
		}
	}
</script>
<script module="Trenderjs" lang="renderjs">
	var Tmap = null;
	export default {
		data() {
			return {
				options: {},
			}
		},
		mounted() {

		},
		beforeDestroy() {
			this.removeMapMoveend()
		},
		methods: {
			onPosition(e) {
				e.
				console.log("---------------------")
			},
			addMapMoveend() {
				//移除地图的移动停止事件
				console.log("Tmap = 11", Tmap)
				this.removeMapMoveend()
				if (Tmap) Tmap.addEventListener("moveend", this.MapMoveend);
			},
			removeMapMoveend() {
				//移除地图的移动停止事件
				try {
					if (Tmap) Tmap.removeEventListener("moveend", this.MapMoveend);
				} catch (error) {
					//TODO handle the exception
				}
			},

			MapMoveend(e) {
				try {
					const v = e.target.getCenter()
					const Lng = v.getLng();
					const Lat = v.getLat()
					console.log("MapMoveend 99= ", Lng, Lat)
					this.$emit("moveMap", { Lng, Lat })
				} catch (error) {
					//TODO handle the exception
				}

			},
			initTmap() {
				try {
					Tmap = null;
					Tmap = new T.Map('mapDiv', {
						projection: 'EPSG:4326',
					});
				} catch (error) {
					//TODO handle the exception
				}
			},


			initTMap(newValue, oldValue, ownerInstance, instance) {
				this.options = newValue
				if (newValue.type === 'open' && newValue.apikey) {
					if (!window.T) {
						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")
						}, 500);
					} else {
						const {
							lng,
							lat
						} = this.options
						this.initTmap()
						Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
						this.$ownerInstance.callMethod('nextPoint', {
							lng,
							lat
						})
						Tmap.addEventListener('click', (e) => {
							console.log("nextPoint", e.lnglat)
							this.$ownerInstance.callMethod('nextPoint', e.lnglat)
						});
					}
				} else {
					// 选点，更新
					// const {
					//     lng,
					//     lat
					// } = newValue
					// this.upDataChartsRender(lng, lat)
					this.$emit("clickMap")
				}
			},
			initChartsRender() {
				this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
				const {
					lng,
					lat
				} = this.options
				var that = this;
				this.initTmap()
				console.log("77777777777", Tmap)
				Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
				this.setIcon(lng, lat, true)
				this.$ownerInstance.callMethod('nextPoint', {
					lng,
					lat
				})
				Tmap.addEventListener('click', (e) => {
					this.$ownerInstance.callMethod('nextPoint', e.lnglat)
				});

				// Tmap.addEventListener("moveend", (e) => {
				// 	console.log('addEventListener  = ' , e)
				// });
				this.addMapMoveend()
			},
			upDataChartsRender(lng, lat) {
				if (!Tmap) return
				this.setIcon(lng, lat, true)
				Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
			},
			setIcon(lng, lat, isClear, iconU) {
				if (isClear) {
					this.clearIcon()
				}
				const icon = new T.Icon({
					iconUrl: iconU || this.options.png,
					iconSize: new T.Point(30, 30),
					iconAnchor: new T.Point(15, 30)
				});
				const marker = new T.Marker(new T.LngLat(lng, lat), {
					icon
				});
				Tmap.addOverLay(marker);
			},
			clearIcon() {
				Tmap.clearOverLays()
			},
			getLocation() {
				var lo = new T.Geolocation();
				console.log('获取定位', lo)
				const fn = (e) => {
					console.log('eeeeeeeeeeeeeeeeeeee', e)
					// if (this.getStatus() == 0) {
					// 	map.centerAndZoom(e.lnglat, 15)
					// 	alert("获取定位坐标：" + e.lnglat.lat + "," + e.lnglat.lng)
					// 	var marker = new T.Marker(e.lnglat);
					// 	map.addOverLay(marker);

					// }
					// if (this.getStatus() == 1) {
					// 	map.centerAndZoom(e.lnglat, e.level)
					// 	alert("获取定位坐标：" + e.lnglat.lat + "," + e.lnglat.lng)
					// 	var marker = new T.Marker(e.lnglat);
					// 	map.addOverLay(marker);
					// }
				}
				lo.getCurrentPosition(fn);
				// if (this.getStatus() == 0) {
				// 	map.centerAndZoom(e.lnglat, 15)
				// 	alert("获取定位坐标：" + e.lnglat.lat + "," + e.lnglat.lng)
				// 	var marker = new T.Marker(e.lnglat);
				// 	map.addOverLay(marker);

				// }
				// if (this.getStatus() == 1) {
				// 	map.centerAndZoom(e.lnglat, e.level)
				// 	alert("获取定位坐标：" + e.lnglat.lat + "," + e.lnglat.lng)
				// 	var marker = new T.Marker(e.lnglat);
				// 	map.addOverLay(marker);
				// }
			},
			SelectedDot(lng, lat) {
				Tmap.panTo(new T.LngLat(lng, lat), 16); // 移动到选中的点位
			}
		},
	}
</script>
<style lang="scss">
	.mapDiv {
		width: 100%;
		height: 100%;
	}

	.position {
		position: fixed;
		right: 30rpx;
		bottom: 50vh;
		z-index: 1000;
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		padding: 10rpx;

		.position-icon {
			width: 100%;
			height: 100%;

			path {
				fill: #3291F8;
			}

		}
	}
</style>