zx_flk_app/pages/carLocation/carLocation.vue

<template>
	<view class="">
		<map @touchmove="hiddenNav" @markertap="showNav" style="width: 100%; height: 100vh;" :latitude="latitude"
			:longitude="longitude" :markers="markers" show-location>
		</map>
		<!-- 由于cover-view一些样式及点击事件不支持 -->
		<!-- 气泡内容 -->
		<view v-if="is_show_nav" class="block-view">
			<view class="custom-bubble-name">广东省深圳市宝安区西乡街道普宁升记炒饭肠粉(绿海名苑店)</view>
			<view class="flex-row flex-between">
				<view class="flex-row block-car-time align-center">
					<img style="width: 52rpx;height: 52rpx;" src="https://qiniu.bms16.com/FhKkijkN__9UzhYNgamBFSggIlYo" alt="">
					<text class="car-time-text">已驻车 <text class="car-time-text-b">9</text>分钟</text>
				</view>
				<img style="width: 112rpx;height: 64rpx;" src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt="">
			</view>
			<view class="updata-time">更新于 11-25 23:05 </view>
			<view class="car-config-btn">闪灯鸣笛</view>
		</view>
	</view>
</template>

<script>
	const http = require('../../common/http.js');

	const config = require('../../common/config.js');
	const common = require('../../common/common.js');
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				latitude: 39.909,
				longitude: 116.39742,
				address_name: '',
				city_name: '',
				is_show_nav: true,
				markers: [{
					id: 1345,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: 'https://qiniu.bms16.com/Fim2CWvIaWVoqPwQsJbNn-fcS-Ku',
					width: 30,
					height: 30,
					customCallout: {
						anchorY: -45, // Y轴偏移量
						anchorX: -100, // X轴偏移量
						display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
					},
				}], // 标记点
				plate_number: '',
				carLocationTimer: null, // 定时器变量，用于清除定时器
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.plate_number = options.plate_number
			this.latitude=options.latitude||''
			this.longitude=options.longitude||''
			// this.loadCarAddress()
			// // 五秒后重新调用加载车辆位置信息的方法
			// this.carLocationTimer = setTimeout(() => {
			// 	this.loadCarAddress();
			// }, 5000)
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {
			// 页面卸载时清除定时器
			if (this.carLocationTimer) {
				clearTimeout(this.carLocationTimer);
				this.carLocationTimer = null; // 确保定时器引用被清除  
			}
		},
		methods: {
			navAddress() {
				const that = this;
				uni.openLocation({
					latitude: that.latitude - 0,
					longitude: that.longitude - 0,
					scale: 15,
					name: that.city_name,
					address: that.address_name,
					success: function(res) {}
				});
			},
			
			loadCarAddress() {
				const that = this
				http.postApi(config.API_DAYHIRE_CAR_LOCATION, {
					plate_number: this.plate_number
				}, (resp) => {
					if (resp.data.code === 200) {
						this.latitude = resp.data.data.latitude
						this.longitude = resp.data.data.longitude
						this.markers[0].latitude = resp.data.data.latitude
						this.markers[0].longitude = resp.data.data.longitude
						this.getAddressName()
					} else {
						// 默认返回上一个页面再提示报错
						uni.navigateBack({
							delta: 1
						})
						common.simpleToast(resp.data.msg)
					}
				})
			},
			
			getAddressName(latitude, longitude, type) {
				const that = this
				//#ifdef MP-ALIPAY
				var _pi = "ali_index"
				//#endif
				//#ifdef MP-WEIXIN
				var _pi = "wx_index"
				//#endif
				const location = {
					lat: that.latitude,
					lng: that.longitude,
					pi: _pi
				}
				http.postApi(config.API_MAP_REGEO, location, (resp) => {
					if (resp.data.code === 200) {
						that.address_name = resp.data.data.data.address
						that.city_name = resp.data.data.data.province + resp.data.data.data.city
					} else {
						common.simpleToast('获取车辆定位失败')
					}
				})
			},
			
			hiddenNav() {
				this.is_show_nav = false
			},
			
			showNav() {
				this.is_show_nav = true
			}
		}
	};
</script>

<style>
	@import './carLocation.css';
</style>