zx_flk_app/pages/carLocation/carLocation.vue

<template>
	<view class="">
		<navBar name="车辆位置"></navBar>
		<!-- #ifndef APP -->
		<map @touchmove="hiddenNav" @markertap="showNav" style="width: 100%; height: calc(100vh - 506rpx);" :latitude="latitude"
			:longitude="longitude" :markers="markers" show-location>
		</map>
		<!-- #endif -->
		<!-- #ifdef APP -->
		<googleMap keyId="1" width='100%' height='calc(100vh - 506rpx)' v-if="myLocation.latitude"  :mapData="{type:3,markers,zoom:13}" :myLocations='myLocation'></googleMap>
		<!-- #endif -->
		<!-- 由于cover-view一些样式及点击事件不支持 -->
		<!-- 气泡内容 -->
		<view v-if="is_show_nav" class="block-view">
			<view class="custom-bubble-name">{{address}}</view>
			<view class="flex-row" style="justify-content: flex-end;">
				<!-- <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> -->
				<view class="" @tap="navAddress"><img style="width: 112rpx;height: 64rpx;" src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt=""></view>
			</view>
			<view v-if="car_info.heart_time" class="updata-time">更新于 {{car_info.heart_time}} </view>
			<view @tap="findCar"  class="car-config-btn">闪灯鸣笛</view>
		</view>
	</view>
</template>

<script>
	import dayjs from "dayjs";
import googleMap from "@/component/googleMap/googleMap";
	const http = require('../../common/request.js');
	const config = require('../../common/config.js');
	const common = require('../../common/common.js');
	import controlMixin from '@/mixin/index';
	export default {
		mixins: [controlMixin],
		components:{
			googleMap
		},
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				latitude: 39.909,
				longitude: 116.39742,
				address: '',
				city_name: '',
				is_show_nav: true,
				car_info:{},
				myLocation:{},
				markers: [], // 标记点
				plate_number: '',
				carLocationTimer: null, // 定时器变量，用于清除定时器
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
			this.car_info = uni.getStorageSync('car_info') || {}
			this.car_info.heart_time = this.car_info.heart_time ?  dayjs(this.car_info.heart_time*1000).format('YYYY-MM-DD hh:mm:ss') : '未知时间'
			this.init()
			// this.longitude = {
			// 	longitude:car_info.longitude,
			// 	latitude:car_info.latitude
			// }
			// 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: {
			init(){
				this.latitude = this.car_info.latitude || 39.909
				this.longitude = this.car_info.longitude || 116.39742
				this.getAddressName(this.latitude,this.longitude)
				let _this = this
				uni.getLocation({
					success(res) {
						_this.myLocation.latitude = res.latitude
						_this.myLocation.longitude = res.longitude
						_this.markers = [
							{
								width: 80 / 2,
								height: 108 / 2,
								id: _this.car_info.car_sn,
								longitude: _this.longitude,
								latitude: _this.latitude,
								iconPath: 'https://qiniu.bms16.com/Fim2CWvIaWVoqPwQsJbNn-fcS-Ku',
								iconPathActive: 'https://qiniu.bms16.com/Fim2CWvIaWVoqPwQsJbNn-fcS-Ku',
								content:''
							},
							{
								width: 22,
								height: 40,
								id: 50000,
								iconPath: "https://zxappfile.bms16.com/zx_client/location_n.png",
								longitude: res.longitude,
								latitude: res.latitude,
							}
						]
					}
				})
			},
			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) {}
				});
			},
			
			async 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
						
					} else {
						// 默认返回上一个页面再提示报错
						uni.navigateBack({
							delta: 1
						})
						common.simpleToast(resp.data.msg)
					}
				})
			},
			
			async getAddressName(latitude, longitude) {
				const that = this
				//#ifdef MP-ALIPAY
				var _pi = "ali_index"
				//#endif
				//#ifdef MP-WEIXIN
				var _pi = "wx_index"
				//#endif
				//#ifdef APP
				var _pi = "APP"
				//#endif
				const location = {
					lat: that.latitude,
					lng: that.longitude,
					pi: _pi
				}
				let {data} = await http.postApi(config.API_MAP_REGEO, location)
				console.log(data.data.data)
				if(data.code == 200){
					this.address = data.data.data.address
				}
			},
			
			hiddenNav() {
				this.is_show_nav = false
			},
			
			showNav() {
				this.is_show_nav = true
			},
			
			findCar(){
				const me=this
				uni.showModal({
					title: '提示',
					content: '您确认开启闪灯鸣笛吗',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							me.setData({
								popText:'闪灯鸣笛',
								cmdType:'findCar',
							})
							me.tapBlueToothCmd('',true)
						}
					},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			navAddress(){
				const {
					latitude,
					longitude,
					cityname,
					address,
					model_name
				} = this.car_info
				uni.openLocation({
					latitude: latitude - 0,
					longitude: longitude - 0,
					scale: 15,
					name:model_name,
					address: address,
					success: function(res) {}
				});
			}
		}
	};
</script>

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