zx_flk_app/component/googleMap/googleMap.vue

<template>
	<view class="content">
		<view style="position: relative;" id="container">
			<view class="loader"></view>
			<view style="width: 100%; height: calc(50vh - 0rpx)" id="mapModule" :prop="nearCabinetList"
				:change:prop="mapModule.update" :change:markersIcon='mapModule.markersIcon'
				:change:markersIconActive='mapModule.markersIconActive' :markersIcon='markersIcon'
				:markersIconActive='markersIconActive' :lngLat="myLocation" :change:lngLat="mapModule.initAmap"></view>

		</view>
	</view>
</template>
<script module="mapModule" lang="renderjs">
	var common = require("@/common/common.js");
	var transform = require('../../common/transform.js');
	var meMarker = []
	var polylinePath = null
	export default {
		data() {
			return {
				infoWindow: {},
				selectedMarker: null,
				defaultIcon: {},
				selectedIcon: {},
				markerData: {},
				markersIcon: '',
				markersIconActive: '',
				ownerInstance: null,
				map: {},
				receiveTraceDate: []
			};
		},
		mounted() {

		},
		methods: {
			initAmap(lngLat, _, ownerInstance) {
				console.log('213123123123')
				console.log(_)
				lngLat = {
					lat: lngLat.latitude,
					lng: lngLat.longitude
				}
				lngLat = transform.wgs_gcj_encrypts(lngLat)
				// lngLat = transform.gcj_wgs_encrypts(lngLat)
				// console.log(lngLat, "坐标系lngLat")
				let _this = this

				// script.src ='https://map.gpsall.cc/maps/api/js?key=AIzaSyA70JUgslynjmVv0NPz3hcvkTbPZpr2i_c&callback=initMap&v=weekly'
				const script = document.createElement('script')
				script.src =
					'https://map.gpsall.cc/maps/api/js?key=AIzaSyA70JUgslynjmVv0NPz3hcvkTbPZpr2i_c&callback=initMap&v=weekly&loading=async';
				script.async = true; // 异步加载
				script.defer = true; // 延迟执行
				document.head.appendChild(script)
				window.initMap = function() {
					_this.loadAmap(lngLat)
				};

			},

			loadPanTo(lngLat, _, ownerInstance) {
				lngLat = {
					lat: lngLat.latitude,
					lng: lngLat.longitude
				}
				console.log("lngLat", lngLat)
				lngLat = transform.wgs_gcj_encrypts(lngLat)
				console.log("lngLat", lngLat)

				this.map.panTo(new google.maps.LatLng(lngLat.latitude, lngLat.longitude))
			},

			loadAmap(lngLat) {

				let _this = this
				var myOptions = {
					center: {
						lat: parseFloat(lngLat.latitude),
						lng: parseFloat(lngLat.longitude)
					},
					gestureHandling: "greedy", // 强制单指拖动
					fullscreenControl: false,
					draggable: true, // 显式启用拖拽
					zoom: 14,
					panControl: false,
					zoomControl: false,
					scaleControl: false,
					streetViewControl: false,
					mapTypeControl: false,
					clickableIcons: false,
				}
				// 在初始化时定义图标配置（确保路径正确）
				_this.defaultIcon = {
					url: _this.markersIcon, // 默认图标路径
					size: new google.maps.Size(50, 52),
					scaledSize: new google.maps.Size(50, 52)
				};

				_this.selectedIcon = {
					url: _this.markersIconActive, // 选中图标路径
					size: new google.maps.Size(50, 52),
					scaledSize: new google.maps.Size(50, 52)
				};
				// 存储当前选中的 Marker
				_this.selectedMarker = null;
				_this.map = new google.maps.Map(document.getElementById("mapModule"), myOptions);

				//地图绑定事件
				new google.maps.event.addListener(_this.map, "click", function(event) {
					_this.$ownerInstance.callMethod('bindTapMap')
				});

				_this.addMarkers(_this.$ownerInstance)
				// console.log("render初始化数据")
				_this.$ownerInstance.callMethod('loadInitData')
			},


			addMarkers(ownerInstance) {
				this.Markers.map(item => {
					this.AddMarker(item, ownerInstance)
				})

			},
			AddMarker(item, ownerInstance) {
				let _this = this
				const marker = new google.maps.Marker({
					id: item.id,
					map: _this.map,
					data: item,
					position: new google.maps.LatLng(parseFloat(item.latitude), parseFloat(item.longitude)),
					icon: this.defaultIcon,
					zIndex: 20
				});
				marker.addListener('click', function(event) {
					if (_this.selectedMarker) {
						_this.selectedMarker.setIcon(_this.defaultIcon);
						 _this.selectedMarker.setOptions({ label: null });
					}
					marker.setIcon(_this.selectedIcon);
					let distance = common.getFlatternDistance(_this.myLocation.longitude, _this.myLocation
						.latitude, item.longitude, item.latitude)
					let time = Math.ceil(Number(((distance - 0) / 1000).toFixed(2)) * 25 / 10)
					let content = `${common.formatDistance(Number(distance))} 骑行${time}分钟`
					marker.setOptions({
						label: {
							text: content,
							className: "map-label",
						}
					})
					_this.selectedMarker = marker;
					_this.loadMarkertap(marker)
				})
			},

			update(newValue, _, ownerInstance) {
				this.Markers = newValue
			},

			loadMarkertap(marker) {
				let markerId = marker.data.markerId
				if (markerId == 5000) return
				this.$ownerInstance.callMethod('onMarkertap',marker.data)
			},
		}
	}
</script>

<script>
	export default {
		props: {
			nearCabinetList: {
				type: Array,
				required: true //必填项
			},
			myLocation: {
				type: Object,
				required: true //必填项
			},
			markersIcon: {
				type: String,
				default: ""
			},
			markersIconActive: {
				type: String,
				default: ""
			},

		},
		data() {
			return {
			};
		},
		mounted() {},
		methods: {
			onMarkertap(marker) {
				this.$emit('changMarkertap',marker)
			},
			bindTapMap() {
				console.log('点击事件!')
			},
			loadInitData() {
				console.log('初始化成功!')
			},
		}
	}
</script>

<style>
	
</style>